在现代web应用中，用户登录系统已成为一个必备的功能，但是在传统的用户名和密码登录以外，第三方登录逐渐成为了另外一种常见的方式。使用第三方账号来登录，不仅方便用户使用，并且可以大大减少用户的注册流程，同时也有助于拓宽我们的用户范围。在本文中，我们将学习如何使用 Express.js 和 OAuth2.0 来实现第三方登录功能。
OAuth2.0 是什么？
OAuth2.0（开放授权2.0）是一个被广泛使用的授权框架。本质上，OAuth2.0 允许用户授权第三方应用访问其数据，而无需提供这些应用登录凭据。这使得第三方应用可以以用户的身份访问数据，但又不会暴露原始的凭据信息。
要实现 OAuth2.0 授权，我们需要使用到几个核心的概念：
- OAuth2.0 客户端，该客户端提供服务（诸如Google，Facebook，Twitter等等），接受第三方应用授权请求。
- 用户，该用户拥有客户端所需要的信息，比如用户名和密码等等。
- 授权服务器，该服务器接受来自第三方应用的授权请求，并且向客户端确认用户身份，并将访问令牌发给授权请求。
Express.js 与 Passport.js
我们将使用 Express.js 框架和它的组件 Passport.js 来实现 OAuth2.0 的授权流程。Express.js 是一个灵活且快速的 Node.js 库，它可用于构建具有众多路由的web应用程序，并与其他库和组件完美配合。而 Passport.js 则是一个 Node.js 库，提供了一些现成的策略来实现 OAuth2.0 授权。其中包括与 Google，Facebook等第三方平台进行通信的策略。
实现第三方登录的授权流程
接下来，我们将概述实现第三方授权登录的步骤。在本教程中，我们将以 Google 作为我们的例子。
步骤一：将 google-auth-library 添加到我们的Express.js 应用中
我们将通过 npm 安装 google-auth-library 库来与 Google 进行通信。打开我们的终端，切换到我们的项目目录，并输入以下命令来安装该库：
--- ------- ------------------- ------
步骤二：在 Google API Console 中创建客户端ID
我们需要在 Google API Console 中创建我们的 OAuth2.0 客户端 ID。首先，转到 API Console 并登录。然后单击“创建项目”并为该项目命名。接下来，我们要启用 Google+ API，以便我们的应用程序与 Google 进行通信。在“库”选项卡中搜索“Google+ API”并启用此API即可。
创建项目后，选择左侧导航菜单中的“凭据”选项卡，并单击“创建凭据”按钮。在弹出的下拉菜单中选择“OAuth客户端ID”。选择“网页应用程序”选项和应用名称后，您将需要在“授权重定向URIs”下为您的应用程序添加重定向URL。这应该是您希望将授权令牌发送回的网址。如果不知道，可以在本地计算机上为调试URL使用“http://localhost:/auth/google/callback”。在此处，我们可以使用第三方平台提供的详细信息设置好客户端ID和秘钥等信息。
步骤三：在我们的应用程序中设置授权流程
在我们的应用程序中，我们将创建路由器，以便能够处理与 OAuth2.0 授权有关的交易。添加以下代码来设置我们的 Passport.js 包括 Google 策略：
----- -------- - --------------------
----- -------------- - --------------------------------------------
---------------- ----------------
--------- -------------------
------------- -------------------
------------ -----------------------
--
------------- ------------- -------- ----- -- -
-- ----------------------------------------
-
---在这个简单的代码块中，我们使用 Passport.js 和 GoogleStrategy，作为我们与 Google进行 OAuth2.0 交流的策略。在此处，我们使用Google提供的“Client ID”和“Client Secret”信息。还提供一个回调URL以在授权结果发生时执行。
步骤四：设置我们的路由器，以处理我们的认证过程
我们现在需要设置Express.js路由器，并将其映射到我们的Google认证过程。这是我们路由器的代码，包括两个端点：一个用于开始认证，另一个用于在完成认证后接受回调。
----- ------ - ----------------------------
----- -------- - --------------------
--------------------- ------------------------------- -
------ -----------
----
-- ------------------------------------- --
------------------------------
------------------------------- - ---------------- --- ---
----- ---- -- -
---------------------------
-
--
-------------- - -------在这个代码块中，我们定义了两个路由器。第一个，作为开始第三方认证的初始端点，将重定向到 Google 登录页面向用户提供 Google 认证的服务。我们还向 Passport.js 提供了我们希望在授权过程中访问的任何特定权限，这里是我们希望访问的用户“profile”。
第二个路由器则是在完成认证后接受回调，该路由器将被传递返回的授权令牌，然后将我们的授权过程完成并在我们的本地发送授权令牌。
步骤五：向路由器添加新的端点
我们将添加一个新的端点，以便在成功从 Google 返回授权令牌时显示用户信息。使用以下代码在我们的路由文件中添加它：
----------------------------- ----- ---- -- -
-------------------
---当用户成功授权时，我们将返回一个 JSON 对象，其中包含您从 Google 收到的所有相关信息，例如如下所示：
-
----- ----------
----------- ---------
-------------- ----- -----
------- -
------------- ------
------------ ------
--
--------- -------
---------- -----------------------------------------------------------------------------------------------------
-------- -------------------
-运行以上代码会在你的默认端口上启动一个 web 服务器，现在可以访问“http://localhost:3000/auth/google”了。打开该网址并完成Google授权过程，再打开“http://localhost:3000/auth/google/success”即可查看授权结果。
总结
在本篇文章中，我们介绍了如何使用 Express.js 和 OAuth2.0 来实现第三方登录功能。通过使用 Passport.js 与 Google 进行通信，我们可以轻松地实现 OAuth2.0 的授权流程，实现更灵活的登录方式。
虽然这个流程看似简单，但当我们真正实现时，往往需要多次调试。开发者只有真正的理解了 OAuth2.0 的授权流程，才能够更好地实现第三方登录功能。希望这篇文章能够为你提供帮助和指导，在实现第三方登录方面有所裨益。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6488689648841e98946e545a