介绍
在前端开发中，登录是一个常见的功能。为了方便开发人员，有很多第三方库提供了快速实现登录的方法。其中，@hapi/bell 是一款非常优秀的 npm 包，它可以帮助我们通过各种社交账号实现登录。本文将详细介绍 @hapi/bell 的使用方法，以及解释其内部实现原理。
安装
首先，我们需要在项目中安装 @hapi/bell。可以使用 npm 或 yarn，如下所示：
npm install @hapi/bell # 或者 yarn add @hapi/bell
配置
安装完毕之后，我们需要对其进行配置。我们可以在项目中新建一个 config 目录，在其中新建一个 auth.js 文件，然后在其中写入以下内容：
-- -------------------- ---- -------
---- --------
----- ------ - ------------------
----- ---- - ----------------------
-------------- - -
----- -------------------
-------- --------
--------- ----- ------ -- -
----- ----------------------
------------------------------ ------- -
--------- ---------
--------- ------------------------------
--------- ------------------------------
------------- ----------------------------------
--------- -------------------- --- -------------
------ ---------------
---
--------------
------- ------- --------
----- ---------
-------- -
----- -
----- ------
--------- ---------
--
-------- ----- --------- -- -- -
-- ------------------------------- -
------ ---------------------------
-
-- ---------- ------- -
----- ----------- - -------------------------
----------------------- ---------------------
-- -----
------ ----------------
--
--
---
--
--上述代码中使用了 config 库来获取配置信息，因此需要先安装：
npm install config # 或者 yarn add config
配置中用到了 github 的 OAuth2 认证，因此还需要前往 github developer settings 中创建一个 OAuth App，然后将 CLIENT ID 和 CLIENT SECRET 配置在项目的配置文件中。我们可以在项目根目录新建一个 config 文件夹，然后在其中创建 default.json 文件，写入以下配置项：
-- -------------------- ---- -------
-
--------- -
----------- ---------------------------------------
--
--------- -
----------- -----------------
--------------- --------------------
-
-其中，cookie.password 是 cookie 的加密密钥，需要设定一个随机的字符串。如需在生产环境中使用 https，请将 isSecure 设置为 true。
然后，在项目中使用 server.register 注册上述授权策略即可。
使用
在配置好 @hapi/bell 之后，我们就可以在路由中使用 handler 来实现登录。例如，在登录路由中可以写入以下代码：
-- -------------------- ---- -------
----- ------- - ----- --------- -- -- -
-- ------------------------- -
------ ----------------
-
------ -
-- --------------
---- --------------------------------------------------------------------------- --
---- -- ---- ------
----
--
--上述代码中，我们判断了 session 中有没有用户信息，如果有就直接跳转到首页。否则，将会显示一个登录的链接，点击链接会跳转到 Github 的登录页面，然后进行认证。认证成功之后，会跳转回登录路由。
登录成功之后，用户信息会存储在 session 中，可以在任何一个路由中获取这些信息：
const handler = async (request, h) => {
const user = request.yar.get('user');
if (user) {
return `Welcome ${user.displayName}`;
} else {
return 'Unauthorized';
}
};上述代码中，我们从 session 中获取了用户信息，然后展示了用户的名字。
原理
@hapi/bell 的原理是使用 OAuth2 协议来认证用户身份。在配置文件中，我们设定了 CLIENT ID 和 CLIENT SECRET，这些信息需要和 github endpoint 进行通信才能获得 token。在请求 github endpoint 时，我们需要传递一些参数：
client_id: CLIENT IDclient_secret: CLIENT SECRETcode: github 授权之后返回的 code 参数
在得到 token 之后，我们就可以获得用户信息。
总结
@hapi/bell 是一款非常优秀的 npm 包，可以帮助我们通过各种社交账号实现登录。在使用时，需要注意配置项，确保 CLIENT ID 和 CLIENT SECRET 正确。同时，我们还介绍了 @hapi/bell 的实现原理，希望可以帮助读者更好地理解这款 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/154242