基于 JSON Web Token 的身份认证系统

JSON Web Token

JSON Web Token 是一种基于 JSON 的开放标准(RFC 7519),用于在各个层面上向用户提供身份验证。

以下内容中将简称为 JWT 或 Token

JWT 由三部分组成:

  • Header
  • Payload
  • Signature

其中,Header 和 Payload 都是 JSON 对象,Signature 是 Header 和 Payload 的签名,用于验证 Token 的完整性。

Header 部分包含了 Token 的类型以及签名所用的算法。

json 复制代码
{
  "alg": "HS256",
  "typ": "JWT"
}
ts 复制代码
export interface JWTHeader {
  alg: string;
  typ: string;
}

Payload

Payload 部分包含了用户的身份信息,例如用户 ID、用户名、权限等。

json 复制代码
{
  "userId": "1234567890",
  "username": "admin",
  "write": true,
  "exp": 1516239022
}
ts 复制代码
export interface JWTPayload {
  userId: string;   # 用户ID
  username: string; # 用户名
  write?: boolean;  # 管理界面权限
  exp?: number;     # 过期时间(暂未用到)
}

Signature

Signature 部分是 Header 和 Payload 的签名,用于验证 Token 的完整性。

ts 复制代码
function sign(payload: JWTPayload, secret: string): string {
  const header = { alg: "HS256", typ: "JWT" };

  const headerString = JSON.stringify(header);
  const payloadString = JSON.stringify(payload);
  const signatureString = crypto
    .createHmac("sha256", secret)
    .update(`${headerString}.${payloadString}`)
    .digest("hex");

  // 使用 `.` 拼接三个部分,这就是一个完整的 JSON Web Token
  return `${headerString}.${payloadString}.${signatureString}`;
}

验证 Token

ts 复制代码
function verify(token: string, secret: string): JWTPayload {
  const parts = token.split(".");

  const header = JSON.parse(Buffer.from(parts[0], "base64").toString());
  const payload = JSON.parse(Buffer.from(parts[1], "base64").toString());
  const signatureString = parts[2];

  // 验证算法
  if (header.alg !== "HS256") {
    throw new Error("无效算法");
  }

  // 验证签名
  // 通过对解析后的 header 和 payload 再次进行签名,比对两个签名是否一致
  const signature = crypto
    .createHmac("sha256", secret)
    .update(`${parts[0]}.${parts[1]}`)
    .digest("hex");
  if (signature !== signatureString) {
    throw new Error("无效签名");
  }

  // 验证过期时间
  if (payload.exp && payload.exp < Date.now()) {
    throw new Error("身份认证已过期");
  }

  return payload;
}

认证流程

1. 用户登录/注册

用户在登录/注册页面输入用户名和密码,点击登录/注册按钮,服务端将用户名和密码在数据库中进行验证/创建,验证通过后使用用户身份信息生成一个 Token,并将 Token 返回给客户端。

注意:Token 只应该包含可用与验证用户身份的信息,千万不要包含诸如密码之类的敏感信息,因为 Token 并不是加密的,在浏览器中使用函数 atob(token.split('.')[1]) 即可解析到 payload 对象的完整内容。

2. 客户端保存并使用 Token

客户端将 Token 保存在 Cookie 中。

客户端每次请求都会自动带上 Cookie,服务端可以通过验证 Cookie 中 Token 的有效性来判断用户的身份。

3. 服务端验证 Token

服务端首先检查请求的 Cookie 中是否有 Token,如果没有则返回错误信息。

如果有 Token,则通过解析 Token 验证它的有效性,没有通过验证则返回错误信息。

验证 Token 的有效性包括但不限于:

  • Token 是否被篡改
  • Token 是否过期

如果验证通过,则继续返回用户需要的资源。

权限控制

目前实现比较简单,通过解析 JWT Payload 对象,获取并校验 write 字段来判断用户是否有权限访问管理界面。

ts 复制代码
if (!payload.write) {
  // 处理没有权限的情况
}

常见问题

1. 如何防止 Token 被篡改?

在生成 JSON Web Token 时,服务端会使用一个只存在于服务端的密钥 secret 来生成每个 Token 的第三段的签名。

当客户端使用 Token 时,服务端会使用相同的密钥根据 Token 的第一段和第二段重新生成 Token 的签名,如果两个签名不一致,则说明 Token 被篡改了。

所以存在服务端的密钥 secret 很关键,一定不要泄漏它!

相关推荐
Mintopia8 小时前
Next.js自建部署:Docker + PM2 + Nginx
前端·javascript·全栈
艾醒1 天前
探索大语言模型(LLM):Open-WebUI的安装
人工智能·算法·全栈
Mintopia1 天前
🚀 Next.js 自建部署全家桶:Docker + PM2 + Nginx
前端·javascript·全栈
北桥苏2 天前
Audition 入门教程:音频降速
全栈
Mintopia2 天前
🚀 Next.js 企业级文件上传方案全解
前端·javascript·全栈
Mintopia3 天前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
susnm4 天前
组件生命周期
rust·全栈
励扬程序8 天前
Cloudflare workers 构建和部署无服务器功能、站点和全栈应用程序。
前端·全栈
子兮曰9 天前
🚀别再被JSON.parse坑了!这个深度克隆方案解决了我3年的前端痛点
前端·javascript·全栈
susnm10 天前
使用 RSX 构建用户界面
rust·全栈