什么是 OAuth2？
OAuth2 是一种被广泛应用的授权协议，用于授权第三方应用访问用户的受保护资源。在 Web 应用中，OAuth2 通常用于允许用户将自己的社交媒体、电子邮件或云存储等帐户与其他应用程序关联在一起。
OAuth2 授权流程
在 OAuth2 的授权流程中，有以下几个参与方：
- 资源拥有者：即用户，拥有需要被保护的资源；
- 客户端：即第三方应用，希望获得用户的授权访问资源；
- 授权服务器：即资源拥有者信任的服务，用于确认客户端身份，并提示用户授权；
- 资源服务器：即存储和提供资源的服务器。
OAuth2 的授权流程可以归纳为以下几个步骤：
- 客户端向授权服务器发送授权请求，请求访问用户的资源；
- 授权服务器验证客户端身份，并向用户提示授权请求；
- 用户同意授权请求，并向授权服务器授权；
- 授权服务器颁发访问令牌给客户端；
- 客户端携带访问令牌向资源服务器请求访问受保护资源；
- 资源服务器验证访问令牌，并返回请求的资源。
实现 OAuth2 授权的步骤
下面将分步骤介绍在 Express.js 中实现 OAuth2 授权的具体实现。
步骤一：安装依赖库
在 Express.js 应用中实现 OAuth2 授权，我们需要使用以下依赖库：
- express：用于创建 Web 应用程序和路由；
- passport（以及相关 Passport strategy）：用于认证和授权。
通过 npm 安装这些依赖库：
npm install express passport passport-google-oauth20 express-session connect-mongo
步骤二：配置应用程序
在 Express.js 应用程序中，打开 app.js 文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - --------------------------- ----- ---------- - ---------------------------------- ----- -------- - -------------------- ----- -------------- - -------------------------------------------- ----- --- - ---------- ----------------- ------- ---------------- ------- ------ ------------------ ----- ------ --- ------------ ---- ------------------------------------------ --- ---- ------------------------------- ---------------------------- ---------------- ---------------- --------- ----------------- ------------- --------------------- ------------ ----------------------- -- ------------- ------------- -------- ----- -- - -- ---------- ---- ----------------------------- ----- -- - ---------- ------ --- ------------------------------ ----- -- - ---------- ----- --- ------------ ----- ---- -- - ---------------- --------- --- ---------------- -- -- - ------------------- -- --------- -- ---- ------- --
在这里，我们创建了一个 Express.js 应用程序，并应用了 express-session、connect-mongo、passport 以及 passport-google-oauth20 中间件。express-session 中间件用于管理会话数据，并存储到会话存储中，以便于客户端之间可以共享存储。connect-mongo 用于将会话数据存储到 MongoDB 数据库中。
passport 中间件用于处理认证和授权，在这里我们使用了 passport-google-oauth20 strategy，以便于用户可以使用 Google 帐户授权登录应用程序。让我们继续撰写 GoogleStrategy 的回调函数，并在这里实现授权和认证的逻辑。
步骤三：实现 GoogleStrategy 回调函数
GoogleStrategy 是一个 Passport.js 的策略，用于识别和验证 Google 身份，并通过 OAuth2 协议授权访问 Google 资源。在我们的示例中，我们通过调用 GoogleStrategy 的 configuration 方法，配置 Google 授权服务。请注意，在这里，我们将 clientID 和 clientSecret 硬编码到代码中，这并不是一个好的实践。应该将它们存储到环境变量中，或将其放在一个配置文件中并将其忽略到版本控制系统中。
passport.use(new GoogleStrategy({
clientID: 'YOUR_CLIENT_ID',
clientSecret: 'YOUR_CLIENT_SECRET',
callbackURL: '/auth/google/callback'
}, (accessToken, refreshToken, profile, done) => {
// 在这里处理授权和认证
}));我们可以在 GoogleStrategy 回调函数中获取 accessToken、refreshToken、profile 等信息。在这里，我们可以将这些信息存储到会话存储中，并在回调函数中调用 done 方法以实现授权和认证。
-- -------------------- ---- -------
---------------- ----------------
--------- -----------------
------------- ---------------------
------------ -----------------------
-- ------------- ------------- -------- ----- -- -
-- -------- ------- -
---------------- - -
--- -----------
----- --------------------
------ -----------------------
--
-- -- ---- ----------
---------- ------------------
----步骤四：实现授权和认证的路由
现在我们已经基本完成了 OAuth2 授权服务的实现。让我们继续代码示例，并为我们应用程序创建授权和认证的路由。
-- -------------------- ---- ------- ----------------------- ------------------------------- - ------ --------- ---------- ---- -------------------------------- -------------------------------- ----- ---- -- - ------------------ --- ------------------ ----- ---- -- - ---------------------- ------------------ ---
我们在 /auth/google 路由中，使用 passport.authenticate 中间件进行授权，调用 GoogleStrategy，在这里，我们向 Google 身份验证服务请求访问 Google 电子邮件和个人资料。在此之后，我们将授权令牌存储到会话存储中，以备后续验证。
在 /auth/google/callback 路由中，当用户确认授权后我们会重定向到这个路由，我们便可以用 Passport.js 的 authenticate 方法，检查这个令牌，并在成功验证之后通过回调函数进行通知。在本示例中，我们仅仅重定向到主页。
最后，我们可以为应用程序创建路由，以监听 /logout 路径，以销毁会话数据和登出用户。
步骤五：实现模板引擎
接下来，我们需要为我们的应用程序实现模板引擎。在这个示例中，我们将使用 Handlebars 模板引擎。
首先，在应用程序中安装 Handlebars。
npm install handlebars --save
接下来，在 app.js 中引入 Handlebars，并用 res.render() 方法替换 res.send() 方法：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------- - ---------------------------
----- ---------- - ----------------------------------
----- -------- - --------------------
----- -------------- - --------------------------------------------
----- ------ - ------------------------------
----- --- - ----------
------------------------ -------- -------------- ------ ----
------------- -------- --------------
-----------------
------- ----------------
------- ------
------------------ -----
------ --- ------------ ---- ------------------------------------------ ---
----
-------------------------------
----------------------------
------------ ----- ---- -- -
-- ----------- -
-----------------------
- ---- -
------------------- - ----- -------- ---
-
---
----------------- ----- ---- -- -
------------------- - ----- -------- ---
---
----------------------- ------------------------------- -
------ --------- ----------
----
-------------------------------- -------------------------------- ----- ---- -- -
------------------
---
------------------ ----- ---- -- -
----------------------
-----------------------
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
--在这里，我们使用 express-handlebars 中间件来处理模板渲染，并将 / 路由中的 res.send() 方法替换为 res.render() 方法，进行模板引擎的视图渲染。
我们还为应用程序添加了 /login 路由，在这里用于呈现登录页面和处理身份验证请求。
现在我们已经实现了可以通过 Google 帐户授权登录的 Express.js 应用程序。完成以上步骤后，运行应用程序，并在浏览器中访问 http://localhost:3000。应用程序将重定向到 Google 登录页面，之后，应用程序将重定向回应用程序首页，视图将显示用户的帐户信息，并且已授权访问其他受保护的资源。
总结
通过 Passport.js 中间件，我们可以很方便地为 Express.js 应用程序实现 OAuth2 授权服务。在本文中，我们介绍了如何使用 express-session、connect-mongo、passport 和 passport-google-oauth20 中间件来实现 OAuth2 授权。我们还介绍了使用 GitHub OAuth2 授权服务的步骤。最后，我们还演示了如何使用 Handlebars 模板引擎呈现受保护资源。
在实施 OAuth2 授权时，注意保护客户端凭据的安全性。通常最好将凭据存储在环境变量中，而不是硬编码到代码中，以防止凭据泄漏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ebfc65f6b2d6eab3647e1a