使用 Passport.js 实现 Express.js 应用的身份验证与授权

在现代 Web 应用中,身份验证和授权是非常重要的安全机制。Passport.js 是一个 Node.js 的身份验证中间件,它可以轻松地与 Express.js 应用集成,提供了多种身份验证策略,包括本地验证、OAuth、OpenID 等。

本文将介绍如何使用 Passport.js 实现 Express.js 应用的身份验证和授权,包括使用本地验证策略和第三方 OAuth2.0 验证策略。

安装 Passport.js

首先,我们需要安装 Passport.js 和相关的策略。可以使用 npm 来安装:

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

使用本地验证策略

本地验证是最基本的身份验证方式,用户只需要提供用户名和密码即可登录。Passport.js 提供了 passport-local 策略来实现本地验证。

配置 Passport.js

首先,我们需要在 Express.js 应用中配置 Passport.js。在 app.js 或者 index.js 中添加以下代码:

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

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

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

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

以上代码中,我们使用 passport-local 策略创建了一个本地验证策略,其中的回调函数用于验证用户提供的用户名和密码。在这个例子中,我们只是简单地将用户名和密码设置为 'admin',但是在实际应用中,我们需要连接数据库并查询用户信息来进行验证。

我们还需要配置序列化和反序列化用户信息的方法,这两个方法用于在用户登录后将用户信息存储到 session 中,以及在用户每次请求时从 session 中获取用户信息。

配置 Express.js

在 Express.js 中,我们需要使用 session 中间件和 Passport.js 中间件来处理身份验证和授权。在 app.js 或者 index.js 中添加以下代码:

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

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

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

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

以上代码中,我们使用 express-session 中间件来处理 session,并使用 Passport.js 中间件来处理身份验证和授权。

创建登录和登出路由

接下来,我们需要创建登录和登出路由。在 routes 目录下创建 auth.js 文件,并添加以下代码:

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

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

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

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

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

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

以上代码中,我们创建了三个路由:/login、/logout 和 /login POST。/login 路由用于渲染登录页面,/login POST 路由用于处理用户登录请求,/logout 路由用于处理用户退出登录请求。

在 /login POST 路由中,我们使用 passport.authenticate 方法来进行身份验证,其中第一个参数是验证策略的名称,这里我们使用了 passport-local 策略。如果验证成功,则重定向到首页;如果验证失败,则重定向到登录页面,并显示错误信息(使用了 connect-flash 中间件来实现)。

在 /logout 路由中,我们使用 req.logout 方法来退出登录,并重定向到首页。

创建首页路由

最后,我们需要创建首页路由,用于显示用户信息和授权状态。在 routes 目录下创建 index.js 文件,并添加以下代码:

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

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

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

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

以上代码中,我们创建了一个 / 路由,用于渲染首页。在渲染页面时,我们使用了 req.user 对象来获取当前登录用户的信息。

创建视图

最后,我们需要创建视图文件。在 views 目录下创建 login.ejs、index.ejs 文件,并添加以下代码:

login.ejs:

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

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

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

index.ejs:

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

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

以上代码中,我们创建了两个视图文件:login.ejs 和 index.ejs。login.ejs 用于渲染登录页面,index.ejs 用于渲染首页。在 index.ejs 中,我们使用了 req.user 对象来判断当前用户是否已经登录,并显示相应的内容。

使用 OAuth2.0 验证策略

OAuth2.0 是一种常用的第三方身份验证和授权机制,它可以让用户使用第三方账号登录我们的应用。Passport.js 提供了多种 OAuth2.0 验证策略,包括 Google、Facebook、Twitter 等。

配置 Passport.js

在 Passport.js 中配置 OAuth2.0 策略非常简单,只需要调用 passport.use 方法,并传入相应的策略即可。以 Google OAuth2.0 策略为例:

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

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

以上代码中,我们创建了一个 Google OAuth2.0 策略,并传入了相应的参数。在回调函数中,我们可以获取到用户的访问令牌、刷新令牌和用户信息,并进行相应的处理和验证。

配置 Express.js

在 Express.js 中,我们需要创建相应的路由来处理 OAuth2.0 认证请求和回调请求。以 Google OAuth2.0 策略为例:

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

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

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

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

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

以上代码中,我们创建了两个路由:/auth/google 和 /auth/google/callback。/auth/google 路由用于发起 Google OAuth2.0 认证请求,/auth/google/callback 路由用于处理 Google OAuth2.0 回调请求。

在 /auth/google 路由中,我们使用 passport.authenticate 方法来发起 Google OAuth2.0 认证请求,并传入相应的参数。在这个例子中,我们只请求了用户的 profile 信息。

在 /auth/google/callback 路由中,我们使用 passport.authenticate 方法来处理 Google OAuth2.0 回调请求,并传入相应的参数。如果认证成功,则重定向到首页;否则重定向到登录页面。

创建视图

最后,我们需要创建相应的视图文件。在 views 目录下创建 login.ejs 文件,并添加以下代码:

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

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

以上代码中,我们创建了一个链接,用于发起 Google OAuth2.0 认证请求。

总结

本文介绍了如何使用 Passport.js 实现 Express.js 应用的身份验证和授权,包括使用本地验证策略和第三方 OAuth2.0 验证策略。身份验证和授权是 Web 应用的重要组成部分,通过使用 Passport.js,我们可以轻松地实现这些功能,并提高应用的安全性和可靠性。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6512265195b1f8cacda920f0


猜你喜欢

  • Fastify 框架中如何处理子路由

    Fastify 是一个快速、低开销和极简的 Web 框架,它具有出色的性能和可扩展性。在 Fastify 中,可以通过子路由来组织和管理路由,这使得应用程序更加模块化和易于维护。

    1 年前
  • RxJS 中的 timeInterval 操作符的使用方法及作用

    RxJS 是一个流式编程库,可以帮助我们更方便地处理异步数据流。其中,timeInterval 操作符是 RxJS 中的一个重要操作符,它可以帮助我们对流中的数据进行时间间隔的处理。

    1 年前
  • 使用 Flask 和 Server-Sent Events 实现服务器实时监控

    在前端开发中,我们常常需要对服务器进行实时监控,以便及时发现问题并进行处理。本文介绍如何使用 Flask 和 Server-Sent Events 来实现服务器的实时监控。

    1 年前
  • ECMAScript 2019:如何在 JavaScript 中使用元编程

    元编程是一种编程范式,它允许程序在运行时修改自身的结构和行为。在 JavaScript 中,元编程可以通过一些特殊的语法和 API 实现。在本文中,我们将探讨 ECMAScript 2019 中新增的...

    1 年前
  • CSS Flexbox 铺满浏览器窗口的几种方法

    在前端开发中,我们经常需要将元素铺满浏览器窗口,以达到更好的交互效果和用户体验。而使用 CSS Flexbox 技术,可以轻松实现这一目标。本文将介绍几种使用 CSS Flexbox 铺满浏览器窗口的...

    1 年前
  • Mocha 断言库如何高效通过 try catch 捕获错误?

    Mocha 是一个流行的 JavaScript 测试框架,它提供了强大的断言库来帮助开发人员编写测试用例。在测试过程中,我们经常需要断言函数是否能够正确地处理各种输入,并且能够正确地处理错误情况。

    1 年前
  • GraphQL 查询中 totalCount 一直为 0 的解决方案

    在使用 GraphQL 进行数据查询时,我们经常会遇到 totalCount 始终为 0 的情况。这种情况通常发生在分页查询中,我们需要获取总记录数以便进行分页。本文将介绍这种情况的原因,以及如何解决...

    1 年前
  • Babel-polyfill 可能导致 rollup 编译失败

    在前端开发中,Babel-polyfill 是一个非常常用的工具,它可以让我们在使用一些新的 JavaScript API 或者语法时,使其在旧的浏览器中也能够正常运行。

    1 年前
  • 使用 Chai 和 JSDOM 编写前端测试

    前端测试是保证网站稳定性和代码质量的重要手段之一。而 Chai 和 JSDOM 是前端测试中常用的两个工具,Chai 是一个断言库,可以用来编写测试用例,而 JSDOM 则是一个模拟浏览器环境的工具,...

    1 年前
  • Custom Elements 中的数据绑定技巧与实现方法

    在前端开发中,数据绑定是一项非常重要的技术。它可以将数据与页面元素进行绑定,使得数据的变化可以自动反映在页面上,从而提高开发效率和用户体验。而在 Custom Elements 中,数据绑定更是必不可...

    1 年前
  • 解决 JVM 性能问题的调试代码技巧

    JVM 性能问题是前端开发中常见的问题之一。在开发过程中,我们经常会遇到应用程序运行缓慢、卡顿等问题,这些问题往往都与 JVM 的性能有关。本文将介绍一些解决 JVM 性能问题的调试代码技巧,帮助开发...

    1 年前
  • ES11 中错误类 (Error classes): Error、ReferenceError、SyntaxError 和 TypeError

    在前端开发中,我们经常会遇到各种各样的代码错误,例如变量未定义、语法错误、类型错误等。这些错误不仅会导致程序运行出错,还会影响用户体验和开发效率。为了方便排查代码错误,ES11 引入了错误类 (Err...

    1 年前
  • 如何使用 ESLint 和 Prettier 完美格式化代码?

    在前端开发中,代码规范和格式化是非常重要的,它不仅可以提高代码的可读性和可维护性,还可以避免一些潜在的 bug。本文将介绍如何使用 ESLint 和 Prettier 来完美格式化代码。

    1 年前
  • 使用 React 实现响应式布局的技巧

    在现代 Web 开发中,响应式布局已经成为了一个必备的功能。而 React 作为一个流行的前端框架,也提供了一些技巧来实现响应式布局。在本文中,我们将介绍一些使用 React 实现响应式布局的技巧,并...

    1 年前
  • 使用 Enzyme 测试 React 组件:处理异步测试的复杂性

    在现代前端开发中,React 已成为最受欢迎的 UI 库之一。由于 React 组件的复杂性和异步操作的频繁使用,测试成为了开发过程中不可或缺的一部分。本文将介绍如何使用 Enzyme 测试 Reac...

    1 年前
  • 如何在 Webpack 中配置多页面应用?

    Webpack 是目前前端开发中最流行的打包工具之一,它可以将多个 JavaScript 模块打包成一个或多个 bundle,也可以将 CSS、图片等资源进行处理和打包。

    1 年前
  • Express.js 中间件使用详解:原理、机制与实践

    前言 在 Web 开发中,中间件是一个非常重要的概念。它可以帮助开发者处理请求、响应、错误等各种情况,使得代码更加模块化和易于维护。在 Express.js 中,中间件更是被广泛应用。

    1 年前
  • Sass 实现基于 BEM 命名规范的 CSS 库及常见问题解决

    在前端开发中,CSS 是不可或缺的一部分。而在大型项目中,CSS 的管理和维护就变得尤为重要。BEM(Block-Element-Modifier)是一种命名规范,它可以帮助我们更好地组织和管理 CS...

    1 年前
  • Promise 中错误信息的正确处理方式

    Promise 是 JavaScript 中用于异步编程的重要概念之一,它可以让我们更好地处理异步操作,以及避免回调地狱。在使用 Promise 的过程中,我们经常需要处理错误信息。

    1 年前
  • ES6 的 Symbol 类型及其应用

    介绍 ES6 引入了 Symbol 类型,它是一种新的原始数据类型,用于表示独一无二的值。每个 Symbol 值都是唯一的,不可变的,且可以用作对象属性的键。 Symbol 类型的引入,为 JavaS...

    1 年前

相关推荐

    暂无文章