在 Deno 中使用 JSON Web Tokens 实现用户认证

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

JSON Web Tokens (JWT) 是一种用于客户端和服务端之间安全传输信息的开放标准 (RFC 7519)。它使用 JSON 对象来在双方之间安全地传递声明信息，并且该对象是嵌入到一个签名的字符串中。在本文中，我们将会学习如何在 Deno 中使用 JWT 实现用户认证。

什么是 Deno？

Deno 是一个基于 TypeScript 和 V8 的 JavaScript/TypeScript 运行时环境，可以在安全的沙盒中运行 JavaScript 和 TypeScript。相比 Node.js，Deno 更加安全、现代化和高效，特别是在模块管理和安全方面有很大的改进。

引用依赖

在使用 JWT 实现用户认证之前，我们需要引入以下两个 Deno 模块:

  • base64url
  • jwt

我们可以使用以下命令将它们添加到我们的应用程序中:

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

用户认证流程

在 JWT 中，用户认证流程分为以下几个步骤:

  1. 用户使用其用户名和密码登录
  2. 服务器验证用户的凭证是否正确
  3. 如果凭证正确，则根据该用户生成一个 JWT，并将其返回给客户端
  4. 客户端将 JWT 存储在本地，并在每个 HTTP 请求的 Authorization 标头中发送它
  5. 服务器使用 JWT 中的信息来验证客户端的请求是否合法
  6. 如果 JWT 有效，则服务器执行请求

生成和验证 JWT

以下是一个生成和验证 JWT 的示例代码：

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

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

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

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

在这里，我们使用密钥 “mysecret” 来创建一个 JWT，并将它存储在变量 jwt 中。随后，我们使用密钥来验证 JWT，并将验证结果存储在变量 verifiedJwt 中。

JWT 的结构

一个 JWT 由三部分组成，它们使用点号 "." 分隔，包括:

  1. Header(头部)：包含了 typ(类型) 和 alg(算法) 两个属性，分别用于指定 JWT 的类型和使用的签名算法
  2. Payload(载荷)：包含了实际需要传递的信息 (例如用户 ID)，并可以添加自定义的声明属性
  3. Signature(签名)：使用密钥和 Header/Payload 中的信息生成，并用于验证 JWT 的有效性和完整性

例如下面是一个 JWT 长这个样子的：

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

实现用户认证

下面是一个示例代码，演示了如何在 Deno 中使用 JWT 实现用户认证:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在这个示例代码中，我们定义了三个函数:

  • validateUser()：用于验证登录凭证是否正确。如果是，则返回包含用户 ID 和用户名的对象；否则返回 null。
  • generateJWT()：用于根据用户信息生成一个 JWT，并将其返回。
  • validateJWT()：用于验证 JWT 是否有效。如果是，则返回一个包含 JWT Payload 中声明的信息的对象；否则返回 null。

随后，我们定义了两个 API：

  • login()：用于处理用户登录请求。如果凭证正确，则生成一个 JWT，并将其返回客户端。
  • getUser()：用于获取用户信息请求。如果 JWT 有效，则返回包含 JWT Payload 中声明的信息的对象；否则返回一个 HTTP 401 错误。注意，我们在它的前面提取并验证了 JWT。

如何使用本地存储保存 JWT

在实际生产中，我们很可能需要将 JWT 存储在客户端的本地存储中，以便在应用程序的不同部分中使用它。在浏览器环境中，我们可以将其存储在 localStorage 中，代码如下:

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

在 Deno 应用程序中，我们可以使用 Deno 的写入和读取文件系统函数来将其存储在本地文件中，并在需要时读取它:

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

结论

在 Deno 中使用 JWT 实现用户认证是非常简单和安全的。我们只需要使用 Deno 模块中的 JWT 有关函数，实现一个 JWT 的基本逻辑，即可以完成用户认证流程。在实际开发中，应该根据实际应用场景，增强应用程序的稳定性和安全性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671610e5ad1e889fe21a85a4

阅读全文

猜你喜欢

  • Hapi 实践：如何进行 API 接口安全性设计

    在构建现代 Web 应用程序时，安全性常常是一个至关重要的问题。对于 API 接口的安全性设计也同样如此。Hapi 是一个流行的 Node.js Web 框架，提供了丰富的工具和功能，帮助我们构建安全...

    18 天前
  • 如何优化 Kubernetes 集群的网络性能

    前言 Kubernetes 是一个非常流行的容器编排系统，已经被越来越多的企业所使用。其中网络性能是 Kubernetes 集群中一个非常重要的方面，影响着整个集群的稳定性和响应速度。

    18 天前
  • Material Design 如何应用于在线电影院设计中

    介绍 Material Design 是谷歌推出的一种设计语言，它是基于材料的设计理念，强调几何形状、排版、颜色和动画效果，为用户提供灵活、多样和统一的体验。在前端开发中，Material Desig...

    18 天前
  • RxJS 中的 bufferTime 操作符详解

    RxJS 是一个函数式的响应式编程库，它让事件组合变得很简单。bufferTime 是 RxJS 中的一个强大的操作符，它允许我们 collect 和 emit 一定时间窗口内的事件流。

    18 天前
  • ES11 异步追踪器：通往异步堆栈的完整路径

    ES11 异步追踪器：通往异步堆栈的完整路径 在前端开发中，异步编程是必不可少的一部分。然而，异步代码容易出现错误，因为它们的执行顺序不像同步代码那样可预测。ES11 异步追踪器提供了一个解决方案，它...

    18 天前
  • 在 LESS 中如何调用其他 LESS 文件中的混合和变量

    在LESS中如何调用其他LESS文件中的混合和变量 LESS是一种CSS预处理器，它允许您使用CSS未能提供的特性和语法扩展。它还提供了许多组织和简化代码的功能，例如变量和混合。

    18 天前
  • Vue.js SPA 应用的 SEO 优化探究

    Vue.js 是当今最受欢迎的前端框架之一，许多开发团队都选择了 Vue.js 作为他们的主要技术栈。Vue.js 的单页应用（SPA）模式可以创建出高度交互且极富动感的应用，但由于搜索引擎优化（SE...

    18 天前
  • JVM 调优：使用 GC 来提高 Java 应用程序性能

    随着 Java 应用程序的不断扩展和复杂化，JVM （Java 虚拟机）调优变得越来越重要。其中，GC （垃圾收集器） 是影响 JVM 性能的主要因素之一。优化 GC 的设置和使用可以显著提高 Jav...

    18 天前
  • Angular 应用中的用户行为分析实践

    前言 随着互联网和移动设备的普及，越来越多的企业开始关注用户行为分析。用户行为分析旨在通过收集和分析用户行为数据，为企业提供有关用户行为特征、用户需求、产品推广等方面的见解，以指导企业的决策和优化。

    18 天前
  • 如何为普通用户提供无障碍性体验？

    无障碍性（Accessibility）是指通过设计和开发技术产品和服务，让所有人都能访问和使用它们的能力。在现代社会中，无障碍性已成为不可或缺的功能之一，因为它可以让更多的人参与到互联网中来，包括那些...

    18 天前
  • Headless CMS 自动化测试：最新实践

    作为前端开发者，我们经常会与各种 CMS（内容管理系统）打交道。CMS 可以帮助我们管理网站的内容，博客、新闻、产品信息等等。而 Headless CMS（无头 CMS）则可以让我们更灵活地管理这些内...

    18 天前
  • React 教程：如何用 enzyme 测试 React 应用程序

    React 是一种流行的前端框架，它为开发人员提供了许多灵活性和可定制性。但是，测试是一个必不可少的步骤，以确保您的 React 应用程序按预期工作。 enzyme 是一个旨在帮助您轻松编写 Reac...

    18 天前
  • Deno 应用如何进行性能调优

    Deno 是一个新兴的 JavaScript 和 TypeScript 运行时环境，它被设计为更安全、更简单、更高效的 Node.js 的替代品。在 Deno 中进行性能调优，可以优化应用程序的运行速...

    18 天前
  • Cypress 在 Jenkins 中集成自动化测试的实现方法详解

    自动化测试是现代软件开发的必要环节，它可以帮助开发者提升开发效率和测试覆盖率。而 Cypress 是一款强大的前端自动化测试框架，它可以帮助开发者轻松实现自动化测试流程。

    18 天前
  • 解决 Next.js 编译错误：Uncaught Error: Can’t resolve ‘fs’ in ‘/’

    引言 Next.js 是一个非常流行的 React 应用程序框架，它带来了很多便利，包括服务器渲染、静态导出、数据预获取等等。但是，有时候我们在使用 Next.js 时，可能会遇到一些编译错误，其中最...

    18 天前
  • 使用 Node.js 和 Express 构建 RESTful API 的最佳实践（二）

    在上一篇文章中，我们学习了如何使用 Node.js 和 Express 构建 RESTful API，并实现了基本的 GET 和 POST 请求。在本篇文章中，我们将继续深入探讨 RESTful AP...

    18 天前
  • RxJS 中的 bufferCount 操作符使用方法

    RxJS 是一个基于 Observable 的响应式编程框架，它提供了许多操作符来处理异步事件流，其中之一就是 bufferCount 操作符。本文将介绍 bufferCount 操作符的使用方法，并...

    18 天前
  • SSE 推送消息过多如何优化

    引言 SSE（Server-Sent Events），中文名为服务器推送事件，是一种服务器向客户端推送流式数据的技术。在一些实时信息更新的应用中，SSE 能够很好地解决客户端轮询的性能问题。

    18 天前
  • 如何在 Web Components 中实现对 IE11 的支持

    Web Components 是一种新型的技术标准，可以帮助前端开发人员构建可重用、可维护和可移植的组件。然而，在实践中，我们会发现 Web Components 在 Internet Explore...

    18 天前
  • ES7 中的 Array.prototype.reduce 方法的使用示例

    什么是 Array.prototype.reduce() 方法？ reduce() 方法是 Array.prototype 的一个内置方法，它允许您同时迭代和操作来自数组的每个元素。

    18 天前

相关推荐

    暂无文章