在前端开发中，社交网站的登录/授权一直是一个常见的需求。而利用第三方库完成社交登录/授权的功能也是比较常见的实践方式。Vue.js 是一个流行的前端框架，而 hello.js 是一个方便类库，用于处理跨域请求和处理社交网络API。本文将介绍如何使用 vue-hellojs 这个 npm 包来实现社交登录功能。
什么是 vue-hellojs
在介绍 vue-hellojs 前，先来了解下 hello.js 是什么。hello.js 是一个轻量级的微型 Javascript SDK，旨在处理许多网站的OAuth1, OAuth2验证和一些数据API。它目前支持大约20多个社交网络和其他网站的API，如：Dropbox、Discord、Bitbucket、Pocket等等。
而 vue-hellojs 则是基于 hello.js 实现的便捷的 Vue.js 插件。它可以轻松地集成不同社交网络的登录授权功能。
安装
使用 vue-hellojs 需要先安装 hello.js。使用 npm 安装 hello.js 和 vue-hellojs：
--- ------- ------- ----------- ------
建议使用 {id}+'-'+{network}.js 的形式命名各个 hellojs 认证页面，以保证可以并行地进行验证（某些网站可能会强制资源共享时跳过hellojs）。
在 main.js 中引入 hellojs 和 vue-hellojs：
------ --- ---- ------ ------ ----- ---- ---------- ------ -------- ---- -------------- ----------------- -------
配置
在 main.js 中配置 hellojs，以实现对各个认证网站的OAuth2登录：
------------
------- ---------------------
--------- -----------------------
-------- -----------------------
-- -
------------- -------------------- - ----------------
------------ ------------------------------------------------
---其中第一个参数对象表示支持的社交网络和各自的 appId，第二个参数则是公共的配置选项。
组件
Vue-Hellojs 提供了最核心的两个组件 auth-button 和 auth-popup。在 auth-button 中，我们需要单独指定网站的服务名 name，并在 auth-popup 中引用它，以真正地实现对接操作。 页面的整个过程如下：
----------
-----
------------ ----------------- ----- ---- ------ --------------
------------ ------------------- ----- ---- -------- --------------
----------- ----------------- ------------- ---- --------- -------------
----------- ------------------- ------------- ---- ----------- -------------
------
-----------当用户点击对应的登录按钮时，在所有跳转和认证的过程完毕后，auth-popup 会弹出并向用户发送授权请求。
发送请求&获取信息
-- ---- - ---- --------------------------------------- -- - ---------------------- ----------------- ------ -- ---- ------ --- ------- ------------- -- --- ------- -- ------- -- - --------------------- ----------------- ------- -- ---- ------ --
当用户授权后，我们就可以使用 response 进行多种操作。 例如，我们可以使用此响应对象来弹出对话框窗口，或跳转到 API 端点，并轻松获取秘钥或其他重要信息。
结论
vue-hellojs 是一个方便的 Vue.js 插件，可以轻松地实现社交登录/授权的功能。本文中，分享了 hellojs 的基本概念和核心配置，还讨论了 auth-button 和 auth-popup 两个Vue.js组件。如果您想学习更多关于 Vue.js 或 hello.js 的信息，请查阅官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eb081e8991b448dc43b