前言
随着互联网的迅速发展，很多网站都需要提供注册和登录功能。用户的密码是非常重要的信息，传统的保存方式往往容易出现安全问题。为了解决这些问题，网站在注册或登录时会使用第三方账号进行认证，如微信、QQ、微博等。
在前后端分离的环境下，前端需要调用后端提供的 API 进行用户认证。为了方便开发，社区开发了很多优秀的认证和授权 npm 包，本文将介绍一款常用的认证 npm 包 - loopback-component-passport-ec。
什么是 loopback-component-passport-ec
loopback-component-passport-ec 是基于 loopback 框架开发的认证 npm 包。它结合了 Passport 认证库和开源的 Eleme OAuth2.0 认证方案，提供了简单易用的第三方账号认证方法。
作为一款优秀的 npm 包，loopback-component-passport-ec 具有以下优点：
- 与 loopback 框架无缝衔接。
- 支持多种第三方账号登录。目前支持 Eleme OAuth、QQ 互联、微信开放平台、新浪微博等。
- 灵活配置，易于扩展。
- 提供前端登录和验证的接口。
如何使用 loopback-component-passport-ec
接下来我们将通过一步步的实现来了解如何使用 loopback-component-passport-ec。
安装 loopback-component-passport-ec
在你的 loopback 项目中进入终端，输入以下命令安装 loopback-component-passport-ec：
npm install loopback-component-passport-ec --save
添加配置
在 server/component-config.json 中添加 loopback-component-passport-ec 的配置：
-- -------------------- ---- -------
-
--------------------------------- -
----------- ------
-------- --- -------
------------ --- -----------
-------------- -----------------------------------------
--
------- -
------- -
------------- -----
--------- -----
-
-
-其中：
- provider 设定认证方式，ele 代表使用 Eleme OAuth 认证方案。
- appId 和 appSecret 分别是在 Eleme OAuth 平台上申请的应用 ID 和 Secret。
- callbackURL 是 OAuth 授权成功后的回调地址。
- auth:user:dataSource 可以设置使用哪个数据源存储用户信息。
注册 API
进入 server/boot 目录，创建 passport.js 文件，并添加以下代码：
-- -------------------- ---- ------- --- ---------------- - --------------------------------------- --- -------------------- - -------------------------------------- --- -------------------- - --- -------------------------- ---------------------------- ---------------------------------- ---------- ---------------- ------------------ ------------------------ -------------------- ------------------------- --- --- ---- - -- ----------------------------------------- - --- - - -------------------------------------------- --------- - --------- --- ------ ----------------------------------------- --- -
该代码会完成以下工作：
- 初始化 Passport 配置器。
- 指定数据源。
- 根据配置信息配置 Passport 认证。
创建认证路由
在 server/routes 目录中创建 auth.js 文件，并添加以下代码：
-- -------------------- ---- -------
--- -------- - --------------------
--- ---------------- - ---------------------------------------
--- -------------------- - --------------------------------------
--- -------------------- - --- --------------------------
-------------- - ------------- -
-------------------- ---------------------------------------- - ------ ------- ----
----------------------------- ---------------------------------------- -
---------------- ---------
-------------------------- ---
----
--其中：
- authenticate 方法用来调用 Passport 进行认证。
- failureRedirect 代表认证失败后重定向的页面。
- successReturnToOrRedirect 代表认证成功后重定向的页面。
处理认证成功后的操作
在 server/routes 目录中创建 auth.js 文件，并添加以下代码：
-- -------------------- ---- -------
-------------- - ------------- -
----------------------------- ---------------------------------------- -
---------------- ---------
-------------------------- ---
--- ------------- ---- -
------------------
---
------------------ ------------- ---- ----- -
-- ------------------- -- ------------------- -
----------------------------------
-------
-
--- ---- - - --------- ------------------ --------- ----------------- --
--------------------------- ------- ------------- ------ -
-- ---- -- ------- -
--------------------------
- ---- -
----------------
-
---
---
--其中：
- 执行
passportConfigurator.authenticate('ele', {...})方法时，如果认证成功将会执行第三个参数（即回调函数）。 app.models.User.login方法用于验证用户信息，如果信息验证通过将会生成 Token。
创建前端页面
创建 views/login.html 文件，并添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------
-------
------
----- ----------------
------ ---------------------------
------ ----------- --------------- --------------
--------
------ --------------------------
------ --------------- --------------- --------------
--------
------ ------------- -----------
-------
------- ---------------------------------------------------------------------
--------
------------ -
--------------------------------------- -
-----------------------
--- ---- - -
--------- ---------------------
--------- --------------------
--
---------------- ----- --------------- -
-------------------
-- ----
-- -------------------------- ----------- ------------ -
------------------------
-- ----
---
---
---
---------
-------
-------该页面将会向 /login 接口发送一次 POST 请求，用于验证用户信息并生成 Token。
系统测试
经过上面的配置后，我们就可以启动系统进行测试了。
- 访问
http://localhost:3000/auth/ele进行第三方账号认证。 - 在页面中输入用户名和密码进行验证。
- 最后系统将会返回 Token。
结论
在本次的介绍中，我们先了解了 loopback-component-passport-ec 的优势和特点，然后一步步实现了一个认证系统的功能，通过本文的学习，你将会了解到如何使用 loopback-component-passport-ec 进行开发，并掌握相关的认证和授权技术，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589b81e8991b448d5de3