当前位置： 首页 > news >正文

令牌和签名详细介绍+开发使用教程

news 来源：原创 2024/9/19 6:05:37

令牌和签名简介

1. 令牌（Token）

概念

令牌（Token）是一个用于身份验证的小段数据，通常在用户登录时由服务器生成，并返回给客户端。客户端在后续的请求中将令牌附加到请求头中，服务器通过验证令牌来确认用户身份，并决定是否授权访问请求的资源。

常见类型
  • JWT（JSON Web Token）：JWT 是一种非常常见的令牌形式，它以 JSON 格式存储信息，并使用签名来确保其内容的完整性。
  • OAuth 令牌：在 OAuth 2.0 授权框架中，令牌（如访问令牌、刷新令牌）用于授权和认证。
令牌的结构

以 JWT 为例，它由三个部分组成，用点号（.）分隔：

  1. Header（头部）：定义了令牌的类型（通常是 “JWT”）和所使用的签名算法（如 HMAC SHA256）。
    {"alg": "HS256","typ": "JWT"
}
  2. Payload（负载）：包含声明（Claims），可以包括用户信息、令牌的颁发时间和过期时间等数据。
    {"sub": "1234567890","name": "John Doe","iat": 1516239022
}
  3. Signature（签名）：对前两个部分（头部和负载）进行签名，确保其未被篡改。
    HMACSHA256(base64UrlEncode(header) + "." +base64UrlEncode(payload),secret)
令牌的用途
  • 身份验证：用户在成功登录后获取令牌，并在每次请求时将令牌附加到请求头中（通常是 Authorization: Bearer <token>），服务器通过验证令牌来确认用户身份。
  • 授权：服务器可以通过解析令牌中的信息决定用户是否有权访问特定资源。
令牌的优势
  • 无状态：服务器不需要存储用户的会话信息，因为所有的身份验证信息都包含在令牌中。
  • 安全性：令牌通过签名确保其内容未被篡改，并且可以设置过期时间，限制令牌的有效期。

2. 签名（Signature）

概念

签名（Signature）是通过加密算法生成的，用于确保数据的完整性和来源的真实性。签名通常是对消息的散列值（哈希值）进行加密得到的。签名可以防止数据在传输过程中被篡改。

签名的用途
  • 数据完整性：签名可以验证数据在传输过程中是否被篡改。如果接收到的数据与签名验证结果不匹配，说明数据已被修改。
  • 数据来源验证：签名可以用来确认数据的来源，因为只有拥有签名密钥的实体才能生成正确的签名。
  • 请求保护：在一些系统中，每次请求都会生成一个新的签名，用于保护请求数据不被篡改。
签名的生成

签名的生成过程通常包括以下步骤：

  1. 选择密钥和算法：签名的生成需要一个密钥和算法（如 HMAC、RSA、ECDSA 等）。
  2. 生成散列值：对数据（如请求的参数、时间戳等）生成散列值。
  3. 加密散列值：使用选择的算法和密钥对散列值进行加密，从而生成签名。
签名的验证

签名的验证过程如下：

  1. 提取签名：从请求或数据包中提取签名。
  2. 生成散列值：使用与生成签名时相同的数据生成一个新的散列值。
  3. 加密并比较：将生成的散列值与提取的签名进行加密并比较，如果匹配，则签名有效，数据未被篡改。
签名的应用场景
  • API 请求签名：为了确保 API 请求的完整性，服务器会对每个请求生成签名，客户端发送的请求中包含这个签名，服务器验证签名是否有效。
  • 消息签名：在消息传递系统中，签名用于确保消息未被篡改，并且来自可信来源。

3. 结合令牌和签名的安全机制

在一个系统中，为了确保用户身份验证和数据传输的安全性，可以结合使用令牌和签名：

  • 令牌认证：每次客户端发送请求时，附带上已生成的令牌，服务器通过验证令牌确认用户身份。
  • 签名认证：在访问敏感资源或请求页面时，生成一个签名并发送给服务器，服务器通过验证签名确保请求未被篡改且合法。
流程总结
  1. 用户登录：服务器生成令牌并返回给客户端，客户端存储令牌。
  2. 访问资源：客户端每次访问资源时，发送存储的令牌，并生成一个签名附加到请求中。
  3. 服务器验证：服务器验证令牌和签名，如果验证成功，返回资源数据，否则拒绝请求。

这种机制能够同时确保用户身份的合法性和请求数据的完整性，大大提升了系统的安全性。

使用案例

在前端使用 HTML 或 JavaScript 实现结合令牌和签名的安全验证流程，以下是一个基本的实现方案。

1. 用户登录流程

前端：

  1. 用户输入并提交登录信息：

    <form id="loginForm"><input type="text" id="username" placeholder="Username"><input type="password" id="password" placeholder="Password"><button type="submit">Login</button>
</form>
<script>document.getElementById('loginForm').addEventListener('submit', async function(event) {event.preventDefault();const username = document.getElementById('username').value;const password = document.getElementById('password').value;// 向服务器发送登录请求const response = await fetch('/api/login', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ username, password })});const result = await response.json();if (result.token) {// 将令牌存储在本地localStorage.setItem('authToken', result.token);} else {alert('Login failed!');}});
</script>

  2. 服务器返回令牌并存储：

    • 令牌成功返回后，存储在 localStorage 中，方便后续请求使用。

2. 访问页面资源的流程

前端：

  1. 生成签名并发出请求：

    function generateSignature(data, secretKey) {// 这里用的是一个简单的加密算法，如有需要可使用更复杂的加密逻辑return btoa(data + secretKey);
}async function fetchProtectedResource(url) {const token = localStorage.getItem('authToken');if (!token) {alert('Not authenticated!');return;}// 数据可以包括请求URL、时间戳等const requestData = url + new Date().toISOString();const secretKey = 'your_secret_key'; // 注意：实际应用中，密钥不会存在前端const signature = generateSignature(requestData, secretKey);const response = await fetch(url, {method: 'GET',headers: {'Authorization': `Bearer ${token}`,'X-Signature': signature}});const data = await response.json();console.log(data);
}// 例子：访问受保护资源
fetchProtectedResource('/api/protected-resource');

  2. 服务器验证请求：

    • 服务器收到请求后，从请求头中获取 Authorization 和 X-Signature，然后验证令牌和签名。

3. 签名的生成与验证

签名在前端生成，并随请求发送到服务器。服务器使用相同的算法和密钥验证签名。

前端：
function generateSignature(data, secretKey) {return btoa(data + secretKey); // Base64编码
}
服务器：
function verifySignature(receivedSignature, data, secretKey) {const expectedSignature = generateSignature(data, secretKey);return receivedSignature === expectedSignature;
}

4. 关键点

  • 令牌存储安全： 在前端使用 localStorage 或 sessionStorage 存储令牌，但要注意 XSS 攻击。
  • 签名的动态生成： 每次请求都动态生成签名，避免重放攻击。
  • 服务器端验证： 服务器端必须验证令牌和签名的有效性，确保安全。

5. 流程总结

  1. 用户登录： 用户提交用户名和密码，服务器验证后返回令牌，前端存储令牌。
  2. 访问页面资源： 前端在发出请求前，生成签名并携带令牌，服务器验证后返回数据。

通过这种方式，结合令牌和签名，前端和服务器可以共同确保用户的身份验证和请求的完整性，增强系统的安全性。

前端生成签名时，秘钥如何获取？

在前端生成签名时，使用的密钥（secret key）不能直接存储在前端代码中，因为前端代码是公开可见的，任何用户都可以查看源代码。因此，密钥的处理需要特别注意，以确保系统的安全性。

秘钥的获取和使用方法

  1. 使用短期有效的临时密钥：

    • 方案： 当用户成功登录后，服务器生成一个临时密钥并随令牌一起返回给客户端。这个密钥的有效期较短（例如 15 分钟或 1 小时），客户端在生成签名时使用这个临时密钥。
    • 优点： 临时密钥即使被泄露，由于有效期短，攻击者的利用时间也会被大大缩短。
    • 实现： 服务器生成一个随机的、加密的密钥，发送给客户端。客户端存储在 localStorage 或 sessionStorage 中，并在每次请求时使用。

    示例：

    // 登录时获取临时密钥和令牌
localStorage.setItem('authToken', result.token);
localStorage.setItem('temporaryKey', result.temporaryKey);

  2. 通过 API 动态获取密钥：

    • 方案： 前端在需要生成签名时，通过一个专门的 API 从服务器请求密钥。服务器根据请求内容、令牌等验证信息，生成并返回一个短期有效的密钥。
    • 优点： 密钥只在生成签名时短暂存储，降低了被泄露的风险。
    • 实现： 每次请求前，先通过 API 获取密钥，然后立即生成签名。

    示例：

    async function fetchTemporaryKey() {const token = localStorage.getItem('authToken');const response = await fetch('/api/get-temp-key', {method: 'GET',headers: {'Authorization': `Bearer ${token}`}});const result = await response.json();return result.temporaryKey;
}async function fetchProtectedResource(url) {const temporaryKey = await fetchTemporaryKey();const requestData = url + new Date().toISOString();const signature = generateSignature(requestData, temporaryKey);// 继续请求过程...
}

  3. 使用服务器端签名：

    • 方案： 前端不生成签名，而是将请求数据发送到服务器，服务器生成签名并返回。前端在后续请求中使用这个签名。
    • 优点： 密钥完全保存在服务器端，安全性最高。
    • 实现： 请求中包含所有需要生成签名的数据，服务器返回签名。

    示例：

    async function fetchSignature(data) {const token = localStorage.getItem('authToken');const response = await fetch('/api/generate-signature', {method: 'POST',headers: {'Authorization': `Bearer ${token}`,'Content-Type': 'application/json'},body: JSON.stringify(data)});const result = await response.json();return result.signature;
}

关键点总结

  • 短期有效性： 临时密钥的有效期应足够短，以防止长期存储导致的安全风险。
  • 动态获取： 密钥的动态获取可以防止密钥在前端的长期暴露。
  • 服务器端控制： 最安全的方式是将签名逻辑放在服务器端处理，前端只负责发送数据和接受签名结果。

通过这些措施，可以有效减少密钥暴露的风险，同时确保请求的完整性和安全性。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 聚星文社下载地址
  • 光性能 -- OSNR，BER与Q值
  • Nginx 405 not allowed
  • WPS宏实现Sheet页合并功能
  • 区间预测|基于灰狼优化最小二乘支持向量机的多变量回归区间预测Matlab程序GWO-LSSVM-ABKDE
  • 做项目过程中问题小汇总 | vue3 elementplus js
  • DDoS攻击导致服务器宕机的技术解析
  • PXE-Kickstart高效批量装机
  • 32 - III. 从上到下打印二叉树 III
  • 回答评论：使用流遍历文件 list
  • EmguCV学习笔记 VB.Net 6.5 凸包和凸缺陷
  • laravel发送邮件的使用方法？有哪些技巧？
  • 计算机毕业设计选题推荐-游戏比赛网上售票系统-Java/Python项目实战
  • 【MySQL数据库管理问答题】第2章 安装和升级MySQL
  • python markdown vuejs前端：如何正确处理多行字符串的缩进问题
  • 《深入 React 技术栈》
  • JS专题之继承
  • Netty源码解析1-Buffer
  • PHP那些事儿
  • React 快速上手 - 07 前端路由 react-router
  • use Google search engine
  • Wamp集成环境 添加PHP的新版本
  • 不上全站https的网站你们就等着被恶心死吧
  • 多线程 start 和 run 方法到底有什么区别？
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 回流、重绘及其优化
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 简单数学运算程序（不定期更新）
  • 设计模式走一遍---观察者模式
  • 深入体验bash on windows，在windows上搭建原生的linux开发环境，酷！
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 数据结构java版之冒泡排序及优化
  • 腾讯大梁：DevOps最后一棒，有效构建海量运营的持续反馈能力
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • 你学不懂C语言，是因为不懂编写C程序的7个步骤 ...
  • 树莓派用上kodexplorer也能玩成私有网盘
  • ​​快速排序（四）——挖坑法，前后指针法与非递归
  • ​TypeScript都不会用，也敢说会前端？
  • $(this) 和 this 关键字在 jQuery 中有何不同？
  • （ 用例图）定义了系统的功能需求，它是从系统的外部看系统功能，并不描述系统内部对功能的具体实现
  • （19）夹钳(用于送货)
  • （2）空速传感器
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • （附源码）ssm航空客运订票系统 毕业设计 141612
  • (回溯) LeetCode 78. 子集
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • （七）MySQL是如何将LRU链表的使用性能优化到极致的？
  • （十七）devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (转)详解PHP处理密码的几种方式
  • ./configure,make,make install的作用(转)
  • .mat 文件的加载与创建 矩阵变图像？ ∈ Matlab 使用笔记
  • .NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.
  • .NET处理HTTP请求
  • .net连接MySQL的方法
  • .net企业级架构实战之7——Spring.net整合Asp.net mvc