在现代的 Web 开发中，OAuth 2.0 是一种重要的认证和授权协议。它可以方便地实现各种类型的授权，如用户授权、第三方 API 授权等。
在前端开发中，使用 Express.js 和 Passport.js 可以轻松实现 OAuth 2.0 认证。本文将介绍 OAuth 2.0 的原理和工作流程，并演示如何使用 Express.js 和 Passport.js 实现 OAuth 2.0 认证。
OAuth 2.0 原理和工作流程
OAuth 2.0 是基于 HTTP 协议的认证和授权协议。它允许资源提供方（也称为认证服务器）允许用户授权第三方客户端（也称为应用）访问受保护的资源，而无需暴露用户的凭据。
OAuth 2.0 认证流程主要包括以下流程：
- 用户访问客户端，客户端向认证服务器请求授权。
- 认证服务器要求用户提供身份证明，例如用户名和密码。
- 认证服务器验证用户身份，并且要求用户授权客户端访问资源。
- 用户授权认证服务器授权客户端访问资源。
- 客户端使用授权令牌向资源服务器请求访问受保护的资源。
- 资源服务器验证授权令牌，如果有效则返回资源。
实现 OAuth 2.0 认证
下面我们将使用 Express.js 和 Passport.js 实现 OAuth 2.0 认证。我们将使用 GitHub 作为 OAuth 2.0 提供者。
第一步：创建应用
在 GitHub 上创建一个新的 OAuth 应用，以便我们可以使用 GitHub 作为 OAuth 提供者。在 GitHub 上，转到“个人资料设置”>“开发人员设置”>“OAuth 应用程序”>“新 OAuth 应用程序”。
我们将需要提供以下信息：
- 应用名称
- 主页 URL
- 回调 URL
在回调 URL 中，我们将使用 http://localhost:3000/auth/github/callback。这是我们将在下一步使用的 URL。
在创建应用程序之后，您将获得以下信息：
- 客户端 ID
- 客户端密钥
请牢记这些信息，因为我们将使用它们来验证客户端身份。
第二步：设置 Express 应用程序
现在我们可以开始设置 Express 应用程序了。我们将创建一个名为 oauth-demo 的应用程序，并使用以下命令安装 Express.js 和 Passport.js：
mkdir oauth-demo cd oauth-demo npm init -y npm i express passport passport-github express-session dotenv
让我们创建一个名为 server.js 的文件，并将以下代码放入其中：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------- - ---------------------------
----- -------- - --------------------
----- -------------- - ------------------------------------
----- ------ - ------------------
-- ------
----------------
----- --- - ----------
-- -------------------- ---
------------------------------------- ----- -
---------- ------
---
--------------------------------------- ----- -
---------- ------
---
-- -- -------------------- ------
---------------- ----------------
--------- -----------------------------
------------- ---------------------------------
------------ --------------------------------------------
-- ------------- ------------- -------- ----- -- -
------ ---------- ---------
----
-- --- -------- -----
-----------------
------- ---------------------------
------- ------
------------------ -----
----
-------------------------------
----------------------------
-- -- -------- -----
-----------------------
------------------------------- - ------ - ------------ - ----
--------------------------------
------------------------------- - ---------------- -------- ---
----- ---- -- -
------------------
---
-- -----------
------------ ----- ---- -- -
-- ------------------- ------ --
-- ----------- -
------ -----------------------------
-
----------------- ---------------------------
---
------------------------- ----- ---- -- -
-- ----------------- ---
-- ----------- -
------ --------------------
-
--------------- ---------------------------
---
---------------- -- -- -
------------------- --------- -- ------------------------
---我们导入了 Express.js、Passport.js、Passport-Github 等包，并将它们添加到我们的应用中。这里，我们使用 GitHubStrategy 进行用户验证，并将其添加到 Passport.js 中。
我们还定义了两个路由：/ 和 /api/protected。前者用于欢迎用户，后者用于受保护的资源。
第三步：设置环境变量
现在，让我们在 .env 文件中设置所有必要的环境变量。这样我们就可以安全地保存我们的 OAuth 客户端 ID 和密钥。
GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET SESSION_SECRET=YOUR_SESSION_SECRET
现在我们已经准备好运行我们的服务器了！请使用以下命令运行服务器：
node server.js
现在，访问 http://localhost:3000，保证我们可以看到“欢迎 xxx”的消息。现在访问 http://localhost:3000/api/protected，因为您尚未进行身份验证，您将看到“403 Forbidden”消息。
第四步：进行身份验证
为了进行身份验证，让我们点击欢迎消息旁边的登录按钮。这将触发我们的 /auth/github 路由，将我们重定向到 GitHub 认证页面。
在那里，您将被要求授予我们的应用程序对您的 GitHub 资料的访问权限。
如果您成功授权我们的应用程序，您将被重定向到 http://localhost:3000/auth/github/callback 并启动我们的回调函数。将跳过我们的页面并重定向到主页。
现在，您应该可以看到您的 GitHub 用户名出现在欢迎消息右侧。同样，现在访问 http://localhost:3000/api/protected，你会发现现在您有权限访问受保护的资源了。
结论
在本文中，我们学习了 OAuth 2.0 的工作原理和工作流程，并演示了如何使用 Express.js 和 Passport.js 实现 OAuth 2.0 认证。这为我们的应用程序提供了受保护的服务和资源，并使我们无需暴露用户的凭据即可访问他们的数据。
虽然这只是 OAuth 2.0 的基础，但它为我们提供了构建更安全和更高级的认证和授权功能的基础。希望这篇文章对你有所帮助，并且为你在前端开发中使用 OAuth 2.0 提供了足够的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711f084ad1e889fe201b297