在现代网络应用中，社交登录是一种流行的身份验证方式。它允许用户直接使用他们在社交媒体平台上的身份来登录你的应用，而不需要记忆另一组用户名和密码。使用社交登录可以加速用户注册流程，降低用户的沉没成本，提高用户的参与度和忠诚度。本文将介绍如何使用 Passport.js 和 Express.js 实现社交登录。
简介
Passport.js 是一个流行的 Node.js 身份验证中间件。它支持超过 500 种身份验证策略，包括本地策略、OAuth、OpenID、SAML 等。Passport.js 可以极大简化身份验证流程的实现和维护，提高安全性和稳定性。
Express.js 是一个流行的 Node.js Web 框架。它提供了简单易用的路由、模板、中间件等功能，可以快速创建 Web 应用和 API。
在本文中，我们将使用 Passport.js 和 Express.js 实现社交登录的示例为 GitHub 提供的 OAuth2 策略。
前置条件
在实现社交登录之前，我们需要满足以下前置条件：
- 一个有效的 GitHub 帐户和一个应用程序的 OAuth2 凭据。你可以在 GitHub Developer Settings 页面注册并创建一个 OAuth App。
- 一个 Node.js 环境和一个包管理器。你可以在 Node.js 官网 下载和安装。
- 一个基本的 Express 应用程序。你可以在 Express.js 中文网 学习并创建。
创建 Passport.js 应用
我们需要首先在我们的应用程序中添加 Passport.js 依赖项：
--- ------- -------- ----------------
然后，我们需要在 Express 应用程序中添加 Passport.js 和相关中间件：
----- -------- - --------------------
----- -------------- - -------------------------------------
---------------- ----------------
--------- -----------------
------------- ---------------------
------------ --------------------------------------------
--
--------------------- ------------- -------- ----- -
-- ----- ------ ----------------
-- ---- --------- ----- ----
-
---
-------------------------------
----------------------------上述代码中，我们使用 GitHubStrategy 作为我们的身份验证策略，并传递我们在 GitHub Developer Settings 创建的 OAuth2 凭据。Passport.js 将处理 OAuth2 认证流程，并将用户信息传递到回调函数中。我们需要在回调函数中验证 GitHub 用户，并将用户信息存储到数据库中或创建一个新用户。然后，我们必须调用 done(err, user) 回调函数，以便 Passport.js 可以将用户信息保存到 session 中供以后使用。
创建登录和注销路由
接下来，我们需要在 Express 应用程序中添加登录和注销路由：
----------------------- ------------------------------- - ------ - ------------ - ----
--------------------------------
------------------------------- - ---------------- -------- ---
------------- ---- -
------------------
---
------------------ ------------- -----
-------------
------------------
---在上面的代码中，我们使用 passport.authenticate('github', { scope: [ 'user:email' ] }) 处理我们的登录路由，并将用户重定向到 GitHub 登录页面。GitHub 将请求用户授权我们的应用程序，并重定向回我们的应用程序的 /auth/github/callback 路由。在 /auth/github/callback 路由中，我们使用 passport.authenticate('github') 处理用户信息，如果成功则将用户重定向回我们的应用程序主页。在注销路由中，我们通过 req.logout() 方法清除用户的 Passport.js session，并将用户重定向回主页。
添加身份验证保护
最后，我们需要在我们的应用程序中保护需要身份验证的路由：
------------------- --------------------------- ------------- -----
--------------------- - ----- -------- ---
---
-------- ------------------------ -- -
------ -------- ----- ---- ----- -
-- ----------------------- -
------ -------
-
-----------------------
-
-在上面的代码中，我们使用 authenticationMiddleware() 中间件保护我们的 /profile 路由。中间件将检查用户是否通过 Passport.js 验证，如果是则继续执行路由处理器，否则将用户重定向到登录页面。
完整示例代码
以下是一个使用 Passport.js 和 Express.js 实现 GitHub 社交登录的完整示例代码：
----- ------- - -------------------
----- ------- - ---------------------------
----- -------- - --------------------
----- -------------- - -------------------------------------
----- --- - ----------
----- ---------------- - ------------------------
----- -------------------- - ----------------------------
---------------- ----------------
--------- -----------------
------------- ---------------------
------------ --------------------------------------------
--
--------------------- ------------- -------- ----- -
-- ----- ------ ----------------
-- ---- --------- ----- ----
-
---
------------------------------------- ----- -
---------- ------
---
--------------------------------------- ----- -
---------- ------
---
------------------------
---------------------------- --------- ----- ----
-----------------
------- ----------------
------- ------
------------------ -----
----
-------------------------------
----------------------------
------------- -------- -------
------------ ------------- -----
------------------- - ----- -------- ---
---
----------------------- ------------------------------- - ------ - ------------ - ----
--------------------------------
------------------------------- - ---------------- -------- ---
------------- ---- -
------------------
---
------------------ ------------- -----
-------------
------------------
---
------------------- --------------------------- ------------- -----
--------------------- - ----- -------- ---
---
-------- ------------------------ -- -
------ -------- ----- ---- ----- -
-- ----------------------- -
------ -------
-
-----------------------
-
-
---------------- -----------
------------------- -- --------- -- ---- -------
---总结
本文介绍了如何使用 Passport.js 和 Express.js 实现社交登录。我们首先创建了我们的 Passport.js 应用程序，并添加了必要的中间件以处理身份验证流程。然后，我们创建了登录和注销路由，并添加了身份验证保护。最后，我们提供了一个完整的示例代码，演示了如何使用 GitHub OAuth2 策略实现社交登录。
使用 Passport.js 和 Express.js 可以轻松实现多种身份验证策略，大大简化了身份验证流程的实现和维护。使用社交登录可以为你的应用程序提供更好的用户体验和更高的用户参与度和忠诚度。希望本文对你有所帮助，并可以启发和指导你在实际开发中使用 Passport.js 和 Express.js 实现社交登录。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0e06f48841e9894d10758