简介
braingames-snsin 是一个 npm 包，旨在帮助前端开发人员快速实现社交登录的功能。它支持多种社交平台的登录，包括 Facebook、Google、Twitter 等。
本文将详细介绍 braingames-snsin 的使用方法，带领读者从零开始实现社交登录功能，在实践中深入了解社交登录相关知识点。
安装
通过 npm 安装最新版本：
npm install braingames-snsin
使用
1. 配置 OAuth 应用
在使用 braingames-snsin 之前，你需要先在对应的社交平台上申请 OAuth 应用，并得到应用的 Client ID 和 Client Secret。下面以 Facebook 为例介绍如何创建 OAuth 应用：
- 打开 Facebook for Developers，登录账号并创建一个应用；
- 在左侧导航中选中「产品」-「Facebook 登录」，然后点击「设置」按钮；
- 在「设置」菜单中，设置「有效的 OAuth 重定向 URI」为你的应用的回调地址，如：
http://localhost:8080/oauth/facebook/callback； - 按照界面提示，在代码中引用 SDK 并初始化应用，并使用 Client ID 和 Client Secret 完成 OAuth 授权流程。
待所有社交平台的 OAuth 应用均设置完成后，我们可以开始使用 braingames-snsin。
2. 引入 BraingamesSNSIn
在你的项目中引入 BraingamesSNSIn：
import BraingamesSNSIn from 'braingames-snsin'
3. 初始化
初始化 BraingamesSNSIn：
-- -------------------- ---- -------
----- ----- - --- -----------------
--------- -
--------- --------------------------
------------ -----------------------------
--
------- -
--------- ------------------------
------------ ---------------------------
--
-------- -
--------- -------------------------
------------ ----------------------------
--
--其中，facebook、google、twitter 分别对应不同的社交平台。你需要传入你在第一步中获得的 Client ID 和 Redirect URI。
4. 点击社交登录链接
你可以使用 snsIn.getLoginUrl('FACEBOOK')（FACEBOOK 可替换为其他社交平台） 获取社交登录链接，并在页面上展示给用户：
const facebookLoginUrl = snsIn.getLoginUrl('facebook')
document.getElementById('facebook-login').addEventListener('click', () => {
window.open(facebookLoginUrl)
})你也可以自行根据社交平台提供的 SDK 实现社交登录按钮的点击事件。
5. 处理社交平台回调
当用户完成社交登录时，社交平台会重定向回你的应用的 Redirect URI，并携带授权信息。你需要在对应的路由中，解析授权信息，获取用户信息并进行处理。
以 Express.js 为例，处理 Facebook 登录的路由如下：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---------- - ---------------------- ----- --- - --------- -------------------------- ----------------------------------- ----- ----- ---- -- - ----- ---- - -------------- -- -- ---- -- ------------ ----- ----------- - ----- -------------------------------- - ---- -- -- -- ------------ ------ ----- -------- - ----- ----------------------------- ------------ -- ------------ -- --- --------------- ------------- --
其中，code 是社交平台回调携带的授权码，accessToken 是根据授权码获取的 Token，userInfo 是根据 Token 获取的用户信息。
6. 完整示例
下面是一个完整的社交登录示例代码：
-- -------------------- ---- -------
------ --------------- ---- ------------------
----- ----- - --- -----------------
--------- -
--------- --------------------------
------------ -----------------------------
--
------- -
--------- ------------------------
------------ ---------------------------
--
-------- -
--------- -------------------------
------------ ----------------------------
--
--
----- --------------- - ----- -- -- -
----- ---------------- - -----------------------------
----- ----------- - ----- --- ----------------- ------- -- -
----- ----- - -----------------------------
----- ------------- - ------- ------------- -- -
-- ------------- --- ----------------------- ------
----- - ----- ------- - - ----------
------ ------ -
---- -------------------
----------------------------
--------------
-----
---- -------------------------
--------
--------------
-----
-
------------------------------------- --------------
-
---------------------------------- --------------
--
----- -------- - ----- ----------------------------- ------------
-- ------------
-- ---
-
------------------------------------------------------------------- ----------------你可以自定义如何展示登录按钮和处理登录后的逻辑。只要在 onFacebookLogin 函数中，使用 snsIn 来获取社交平台的授权信息即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66fa4