在 Express.js 中使用 JWT 进行身份验证的完整指南

身份验证是web应用程序开发中的关键问题之一。在传统的基于session的验证中,每个用户在访问应用程序时都会为他们创建一个新的session。但是使用JWT(JSON Web Token)可以大大简化身份验证过程并提高应用程序的安全性。

这篇文章将介绍如何在Express.js中使用JWT进行身份验证。我们将详细讲解JWT、在Express中如何使用JWT、JWT如何工作以及如何保护JWT免受攻击。

什么是 JSON Web Token (JWT)?

JSON Web Token(JWT)是一种开放标准(RFC 7519),定义了一种紧凑且自包含的方式,在各方之间作为JSON对象共享信息。它可以用于身份验证和授权。

JWT包含三个部分:头部、载荷和签名。头部包含指定算法和令牌类型(例如,JWT)的信息。载荷包含应用程序需要使用的有关用户的信息。这些信息是像名称、电子邮件地址和角色等信息。签名用于验证令牌的完整性。

JWT的优点包括:

  1. JWT是自包含的,因此可以完全按照开发人员的意愿定制它。

  2. JWT包含有关用户的信息(称为载荷)。大多数情况下,您不需要查询数据库来验证用户的身份。

  3. 由于JWT是独立于服务器的,因此您可以跨多个域框架使用JWT。

现在我们已经了解了JWT的基本知识,让我们进入如何在Express.js中使用它。

在 Express.js 中使用 JWT 进行身份验证

我们将按步骤演示如何在Express.js中使用JWT进行身份验证。

安装依赖项

首先,您需要安装下面两个依赖项:

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

第一个依赖项将帮助您创建和验证JWT,而第二个依赖项将验证JWT并将载荷附加到请求对象上。

创建 JWT

让我们从使用JSON Web Token(JWT)为认证创建令牌开始。

以下代码显示如何在Node.js中创建一个JWT:

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

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

接下来,继续使用Express.js:

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

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

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

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

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

该代码从JSON Web Token(JWT)生成身份验证令牌(access token)。在这种情况下,我们使用了createToken函数生成令牌。但是,您可以使用任何其他标准库(例如,Passport.js)来创建和验证JWT。

访问受保护的路由

现在我们已经生成了JWT,请考虑如何保护Express.js应用程序中的路由以确保只有经过身份验证的用户才能访问它们。

下面是如何在路由中检查令牌并启用访问控制:

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

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

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

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

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

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

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

在这个示例中,我们使用React.js实现了一个客户端应用程序。该应用程序发送POST请求来进行身份验证和接收access token。如果用户成功登录,则我们将为用户提供一个JWT。

JWT 保护

让我们讨论安全性方面的一些事情以及恶意用户可能会如何访问我们的API。

避免 XSS 攻击

在使用JWT时,请注意避免发生跨站脚本漏洞(XSS)。要做到这一点,请将HTML转义并在输出到浏览器之前从HTML标记中删除输入。

避免 CSRF 攻击

您可以通过以下方式通过CSRF(跨站请求伪造)保护您的应用程序:

  • 使用cookie作为JWT
  • 将JWT作为请求头

使用Cookie作为JWT时,此方法会为Cookie设置'same-site'功能。

以下是一些Express.js的代码片段,可用于设置Cookie,并将它们发送给客户端:

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

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

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

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

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

在上面的代码中,我们使用jsonwebtoken库创建了JWT(access_token)。我们还将Cookie设置为:

  • maxAge:设置Cookie有效期(以毫秒为单位)
  • httpOnly:确保Cookie不是通过脚本访问的。
  • secure:仅在安全连接上发送Cookie
  • sameSite:设置此选项,以确保只有在客户端访问此应用程序时才会将cookie发送到站点。

以下是获取Cookie的示例代码,以及如何将Cookie作为JWT发送到请求头:

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

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

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

    --- -

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

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

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

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

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

    -

  -

---

总结

本文中,我们讨论了如何在Node.js应用程序中实施JWT身份验证。JWT是一种简单有效的身份验证方法,并可用于各种不同的语言和框架中。

在下一篇文章中,我们将深入了解更多安全方面的事情以及如何防止一些基本安全漏洞。

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


猜你喜欢

  • 使用 Server-Sent-Events 和 Django 进行实时性通信

    什么是 Server-Sent-Events? Server-Sent-Events (SSE) 是一种基于 HTTP 的协议,用于服务器向客户端推送实时事件流。SSE 通过一个单向连接,服务器可以向...

    1 年前
  • 在使用 Jest 测试框架时,如何 mock 异步组件

    随着前端技术的不断发展,测试也变得越来越重要。在前端开发中,测试框架 Jest 已成为一个备受欢迎的选择。在 Jest 中,我们可以方便地进行单元测试、集成测试、快照测试等各种测试工作。

    1 年前
  • Serverless 如何统计 API 请求日志?

    近年来,以 Serverless 架构为代表的云原生应用架构,得到了越来越多的关注和实践。Serverless 架构的一大特点就是无服务器化,它让我们无需再关注服务器的管理和配置,只需专注于业务逻辑的...

    1 年前
  • 如何在 TypeScript 中使用 React 表单

    随着前端技术日新月异,TypeScript与React已经成为了当前最受欢迎的技术。React作为一个JavaScript库,已经成为一个构建界面的热门选择。而TypeScript则为JavaScri...

    1 年前
  • Docker 容器的自动重启策略配置方法

    Docker 容器的自动重启策略配置方法 在前端开发的过程中,我们通常会使用 Docker 来部署我们的应用程序。在 Docker 中,我们经常需要配置容器的自动重启策略,以保证应用程序在出现异常情况...

    1 年前
  • 使用 Web Components 实现可拖拽排序功能的教程

    前言 随着 Web 技术的不断发展,开发者们有了越来越多的选择。Web Components 作为构建可复用定制化组件的标准,早已经被广泛应用在各类应用程序中。本文将向大家介绍如何使用 Web Com...

    1 年前
  • Express.js 应用开发的 TLS 部署实践

    随着互联网时代的不断发展,安全问题愈加重要。而在前端开发中,TLS(Transport Layer Security)则是保证数据安全的重要手段之一。本文将介绍如何在 Express.js 应用开发中...

    1 年前
  • ECMAScript 2021 (ES12) 中新增的 String.prototype.replaceAll() 方法的性能考察

    ECMAScript 2021 (ES12) 中新增的 String.prototype.replaceAll() 方法是一个非常实用的字符串处理方法,它可以替换字符串中所有与指定模式匹配的子字符串。

    1 年前
  • Material Design 中如何使用 ImageView 实现图片剪裁效果

    简介 Material Design 是谷歌在 2014 年提出的一种设计语言,旨在提供一致的用户体验,并确保应用程序在不同设备上拥有相似的外观和使用方式。在这种设计语言中,图片剪裁效果是一个重要的设...

    1 年前
  • 如何在 ES9 中处理迭代和异常,遇到问题该怎么办

    ES9(ECMAScript 2018)是最新的 JavaScript 标准,其中包含了一些新的特性,其中包括更好的迭代和异常处理。 在本篇文章中,我们将深入探讨如何在 ES9 中处理迭代和异常,并提...

    1 年前
  • Sequelize ORMbug 解决攻略:如何处理 “SequelizeConnectionError: self signed certificate” 的错误?

    在使用 Sequelize ORM 进行 Node.js 开发时,可能会遇到一个错误:SequelizeConnectionError: self signed certificate。

    1 年前
  • React 项目中使用全局错误处理的方案

    在 React 项目中,错误处理是一个重要的主题。无论是在开发阶段还是在上线后的用户反馈中,我们都需要能够迅速定位并解决错误。而且,由于 JavaScript 是一种动态类型语言,很难在编译时发现全部...

    1 年前
  • Webpack 使用技巧:使用 Webpack 打包出不同环境的代码

    前言 Webpack 是一个常用的前端打包工具,可以将 JavaScript、CSS、图片等资源进行打包,在项目中起到了重要的作用。在实际项目中,我们需要针对不同的环境(如开发环境、测试环境、生产环境...

    1 年前
  • iOS 性能优化总结

    前言 随着移动互联网的发展,iOS 已经成为了一个不可或缺的移动平台,iOS 应用也越来越多。然而,在开发 iOS 应用时,我们时常会遇到性能问题,如卡顿、闪退等。

    1 年前
  • ECMAScript 2020: 如何使用 Proxy 和 Reflect 简化属性操作

    ECMAScript 2020: 如何使用 Proxy 和 Reflect 简化属性操作 在前端开发中,我们经常需要对对象的属性进行操作,例如设置、读取、删除等。而在 ECMAScript 2020 ...

    1 年前
  • Tailwind 与 Angular 集成时如何避免样式冲突

    什么是 Tailwind? Tailwind 是一个 CSS 框架,它提供了一套基础样式库,使得编写页面时无需手写样式,只需在 HTML 标签中加入对应的 CSS 类即可快速布局和样式。

    1 年前
  • 在 Angular 中使用管道进行排序数据

    管道是 Angular 中非常强大的工具之一,可以用来格式化、转换和筛选数据。除此之外,管道还可以用来对数据进行排序。在本文中,我们将深入探讨如何在 Angular 中使用管道进行数据排序,并通过一个...

    1 年前
  • 如何将 Mocha 与 Karma 结合使用以进行跨浏览器测试?

    前端开发中,测试是一项非常重要的任务。为了保证我们的代码在各种浏览器环境下都能正常工作,并且确保我们的代码质量,测试是必不可少的。 Mocha 是一款功能强大的 JavaScript 测试框架,它提供...

    1 年前
  • 「问题解决」如何解决 Socket.io 卡死问题?

    Socket.io 是一种 WebSocket 库,已成为实时通信的常用工具之一。但是,在使用 Socket.io 时,你可能会遇到 Socket.io 卡死的问题,导致客户端无法连接到服务器,这是一...

    1 年前
  • Next.js 项目中如何使用组件库来提高开发效率?

    Next.js 项目中如何使用组件库来提高开发效率? 随着技术的发展,前端开发也变得越来越复杂。Next.js 作为一种 Serverless 架构的 React 框架,可以让开发者在开发过程中更加专...

    1 年前

相关推荐

    暂无文章