在 Express.js 中集成 Passport 和 OAuth 进行第三方验证的完整指南

阅读时长 7 分钟读完

简介

随着互联网的快速发展,越来越多的应用程序需要使用第三方身份验证来提高用户体验和保护数据安全。Passport 是一个 Node.js 的身份验证库,它支持多种身份验证策略,包括本地验证、OpenID、OAuth 等。OAuth 是一个开放标准的授权协议,它允许用户通过授权第三方应用程序访问他们的资源,而无需将他们的凭据暴露给第三方。

本文将介绍如何在 Express.js 中使用 Passport 和 OAuth 实现第三方身份验证。我们将使用 GitHub OAuth2 作为示例,但是这个过程同样适用于其他 OAuth 提供商。

准备工作

在开始之前,您需要确保已经安装了 Node.js 和 Express.js,并且您已经在 GitHub 上注册了一个 OAuth 应用程序。

注册 OAuth 应用程序

在 GitHub 上注册 OAuth 应用程序非常简单。只需访问 https://github.com/settings/developers,然后单击“New OAuth App”按钮。在“New OAuth App”页面中,您需要提供以下信息:

  • 应用程序名称
  • 应用程序主页 URL
  • 回调 URL
  • 应用程序描述

完成后,您将收到一个客户端 ID 和客户端密钥,这些信息将用于在应用程序中进行身份验证。

安装 Passport 和相关插件

在开始之前,您需要安装 Passport 和相关插件。您可以使用以下命令进行安装:

创建 Express 应用程序

在安装了必要的依赖项之后,我们可以创建一个新的 Express 应用程序。您可以使用以下命令创建一个新的 Express 应用程序:

这将创建一个名为 passport-oauth-example 的新的 Express 应用程序,并使用 EJS 作为视图引擎。接下来,我们需要进入应用程序目录,并安装一些其他依赖项:

配置 Passport

在开始使用 Passport 之前,我们需要配置它。我们需要在 app.js 文件中导入 Passport 和相关插件,并设置一些必要的配置。

-- -------------------- ---- -------
----- -------- - --------------------
----- -------------- - ------------------------------------
----- ------- - ---------------------------

-- -- --------
------------------------------------- ----- -
  ---------- ------
---

--------------------------------------- ----- -
  ---------- ------
---

---------------- ----------------
    --------- -----------------
    ------------- ---------------------
    ------------ --------------------------------------------
  --
  --------------------- ------------- -------- ----- -
    ------ ---------- ---------
  -
---

在上面的代码中,我们设置了一个 GitHub 策略,以便 Passport 可以使用它来进行身份验证。我们还设置了 serializeUserdeserializeUser 函数,以便在用户登录时存储和检索用户信息。最后,我们还设置了一个回调 URL,以便 GitHub 可以将用户重定向回我们的应用程序。

配置 Express

在配置 Passport 之后,我们需要在 Express 中使用它。我们需要在 app.js 文件中导入 Passport 和相关插件,并设置一些必要的配置。

-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------

-- -- -------
-----------------
  ------- ------------------
  ------- ------
  ------------------ -----
----

-------------------------------
----------------------------

-- --
------------ ------------- ---- -
  ------------------- - ----- -------- ---
---

----------------------- ---------------------------------
-------------------------------- ------------------------------- - ---------------- --- --- ------------- ---- -
  ------------------
---

---------------- ---------- -
  ------------------- ------- -- ---- -------
---

在上面的代码中,我们设置了一个路由,以便用户可以访问我们的应用程序并登录。我们还设置了一个会话中间件,以便 Passport 可以在会话中存储用户信息。最后,我们还设置了两个路由,用于进行身份验证和重定向。

创建视图

在配置 Express 之后,我们需要创建视图。我们将创建两个视图文件:index.ejsprofile.ejs。这些视图将用于显示用户信息和身份验证状态。

-- -------------------- ---- -------
---- --------- ---
--------- -----
------
  ------
    --------------- ----- ---------------
  -------
  ------
    -- -- ------ - --
      ----------- --- ---------------- -------
      -- -------------------------
    -- - ---- - --
      --------- ---- -----------
      -- ------------------------- ---- ----------
    -- - --
  -------
-------
-- -------------------- ---- -------
---- ----------- ---
--------- -----
------
  ------
    --------------- ----- ---------------
  -------
  ------
    ----------------
    ----
      ------------------------------ --- ------------- -------
      --------------------------- --- ---------- -------
      -------------------------- --- ---------------- -------
    -----
    -- ------------- -- --------
  -------
-------

测试

在完成上述步骤后,我们可以启动我们的应用程序并测试它是否正常工作。您可以使用以下命令启动应用程序:

然后,您可以在浏览器中访问 http://localhost:3000,并使用 GitHub 身份验证登录。如果一切正常,您将被重定向回我们的应用程序,并看到您的用户名。您还可以访问 http://localhost:3000/profile,以查看您的个人资料信息。

结论

在本文中,我们介绍了如何在 Express.js 中使用 Passport 和 OAuth 实现第三方身份验证。我们使用 GitHub OAuth2 作为示例,但是这个过程同样适用于其他 OAuth 提供商。如果您需要实现第三方身份验证,请考虑使用 Passport 和 OAuth。它们可以帮助您快速实现安全和可扩展的身份验证解决方案。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6766725176af2b9a20f74ecb

纠错
反馈