vue使用HMAC-SHA256签名算法

在 Vue.js 应用中生成签名算法通常涉及以下几个步骤:

  • 收集数据:获取需要签名的数据。
  • 整理数据:根据协议或需求对数据进行排序、拼接、编码等处理。
  • 计算签名:使用密钥和算法(如 HMAC-SHA256)计算签名。
  • 附加签名:将签名附加到请求中(如 HTTP Header、URL 参数、Request Body)。
  • 常用的签名算法有 HMAC、RSA 等,下面主要介绍如何在 Vue.js 中使用 HMAC-SHA256 生成签名。

在 Vue.js 中生成 HMAC-SHA256 签名

安装

npm install crypto-js

vue2使用方式

<template><div><h1>签名示例</h1><button @click="generateSignature">生成签名</button><p>签名:{{ signature }}</p></div>
</template><script>
import CryptoJS from "crypto-js";export default {data() {return {signature: "",};},methods: {generateSignature() {// 示例数据const data = {message: "Hello, World!",timestamp: 111,};// 密钥(在真实场景中,应保密,随便写都行,一般是后端返回给前端)const secretKey = "111";// 将数据排序并拼接成字符串const sortedData = Object.keys(data).sort().map((key) => `${key}=${data[key]}`).join("&");// 计算 HMAC-SHA256 签名const hash = CryptoJS.HmacSHA256(sortedData, secretKey);// 转换成字符串格式this.signature = CryptoJS.enc.Hex.stringify(hash);},},
};
</script><style scoped>
h1 {font-size: 1.5em;
}
</style>

解释

  • 数据排序与拼接:Object.keys(data).sort().map(…).join(‘&’); 对数据的键进行排序,并拼接成 key=value&key=value 的格式。
  • 计算 HMAC-SHA256:CryptoJS.HmacSHA256(sortedData, secretKey) 生成 HMAC-SHA256 签名。
  • 转换成字符串:CryptoJS.enc.Hex.stringify(hash); 将签名转换为十六进制字符串。

实际应用
在实际应用中,签名生成往往需要考虑以下几点:

  • 安全性:密钥应保密,不应暴露在前端代码中。通常在后端生成签名,前端只负责发送数据。
  • 编码处理:有些 API 要求对数据进行 URL 编码或其他特定格式处理。
  • 时间戳或随机数:为了防止重放攻击,通常需要在数据中包含时间戳或随机数。

完整HTTP请求示例

<template><div><h1>签名请求示例</h1><button @click="sendSignedRequest">发送签名请求</button><p>响应:{{ response }}</p></div>
</template><script>
import axios from 'axios';
import CryptoJS from 'crypto-js';export default {data() {return {response: ''};},methods: {generateSignature(data, secretKey) {// 将数据排序并拼接成字符串const sortedData = Object.keys(data).sort().map(key => `${key}=${data[key]}`).join('&');// 计算 HMAC-SHA256 签名const hash = CryptoJS.HmacSHA256(sortedData, secretKey);// 转换成字符串格式return CryptoJS.enc.Hex.stringify(hash);},async sendSignedRequest() {const data = {message: 'Hello, API!',timestamp: Math.floor(Date.now() / 1000)};const secretKey = 'your_secret_key';const signature = this.generateSignature(data, secretKey);try {const response = await axios.post('https://api.example.com/data', data, {headers: {'X-Signature': signature}});this.response = response.data;} catch (error) {this.response = error.message;}}}
};
</script><style scoped>
h1 {font-size: 1.5em;
}
</style>

HTML生成签名算法的示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>签名示例</title><style>h1 {font-size: 1.5em;}.container {padding: 20px;}.button {display: inline-block;margin: 10px 0;padding: 10px 20px;background-color: #007bff;color: #fff;border: none;cursor: pointer;border-radius: 5px;}.button:hover {background-color: #0056b3;}.signature {font-family: monospace;margin-top: 10px;}</style><!-- 引入 CryptoJS 库 --><script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script></head><body><div class="container"><h1>签名示例</h1><button class="button" onclick="generateSignature()">生成签名</button><p class="signature">签名:<span id="signature"></span></p></div><script>function generateSignature() {// 示例数据const data = {message: "Hello, World!",timestamp: Math.floor(Date.now() / 1000),};// 密钥(在真实场景中,应保密)const secretKey = "your_secret_key";// 将数据排序并拼接成字符串const sortedData = Object.keys(data).sort().map((key) => `${key}=${data[key]}`).join("&");// 计算 HMAC-SHA256 签名const hash = CryptoJS.HmacSHA256(sortedData, secretKey);// 转换成字符串格式const signature = CryptoJS.enc.Hex.stringify(hash);// 显示签名document.getElementById("signature").textContent = signature;}</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/42919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务通信方式详解

引言 随着互联网应用的不断发展和用户需求的多样化&#xff0c;传统的单体架构已经无法满足现代应用的灵活性和扩展性需求。微服务架构因其模块化、松耦合、易于扩展和部署等优势&#xff0c;逐渐成为现代软件开发的重要趋势。在微服务架构中&#xff0c;各个服务相互独立、自…

公司可以拿监控辞退员工吗?有什么法律依据?

李经理&#xff1a;小张&#xff0c;我听说最近人力资源部打算使用我们新安装的安企神软件来监控员工的工作行为&#xff0c;以提高工作效率和确保公司信息安全。不过&#xff0c;我有点担心这会不会触及法律红线&#xff0c;比如如果我们发现某位员工严重违反公司规定&#xf…

virtualbox和docker的区别和优缺点以及如何选择

使用 Docker 和 VirtualBox 各有优缺点&#xff0c;具体取决于你的需求和使用场景。以下是两种方法的详细对比&#xff1a; Docker 使用 CentOS 7 优点 轻量级&#xff1a; Docker 容器共享主机操作系统内核&#xff0c;启动速度快&#xff0c;占用资源少。适合开发、测试和部…

ElasticSearch学习篇14_《检索技术核心20讲》进阶篇之大倒排索引

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 内容 主要是海量数据的大倒排索引的一些原理设计思想&#xff0c;ES底层就是基于这些设计思想以及原理&#xff0c;主要涉及读写分离、索引分层等…

什么是离散化?

离散化 题目 你会这个题 吗&#xff1f; 题目 假定有一个无限长的数轴&#xff0c;数轴上每个坐标上的数都是 0 0 0。 现在&#xff0c;我们首先进行 n n n 次操作&#xff0c;每次操作将某一位置 x x x 上的数加 c c c。 接下来&#xff0c;进行 m m m 次询问&#x…

第十二节 设置默认文本提示

原型中我们常会用到文本框默认提示一些文本&#xff0c;获取焦点后消失文本提示&#xff0c;那如何实现呢&#xff1f;请看下面这个简单案例。 一、添加文本框也可以是矩形或者其他元件 二、添加文本样式 三、设置提示文本 四、元件获取焦点时将以隐藏提示 五、看效果 默认提示…

ShardingSphereConnection@4691d] will not be managed by Spring

boot整合分库分表后启动执行&#xff0c;提示链接不被spring管理&#xff0c; 应该看自己需要&#xff0c; 解决&#xff1a;

vue3+ts 重复参数提取成方法多处调用以及字段无值时不传字段给后端

参数提取前的写法&#xff0c;此写法值为空的时候也会传空字段给后端 会把无值的空字段传给后端 修改后的写法&#xff0c;不会把没有值的字段传给后端 // 列表和导出需要传给后端的公共参数&#xff08;加 || undefined即可过滤空字段&#xff09; const getCurentParam () …

【Cesium开发实战】电子围栏功能的实现,可自定义高度

Cesium有很多很强大的功能&#xff0c;可以在地球上实现很多炫酷的3D效果。今天给大家分享一个可自定义高度的电子围栏。 1.话不多说&#xff0c;先展示。 电子围栏 2.设计思路 点击绘制&#xff0c;在地图上可绘制多个点位&#xff0c;双击结束绘制&#xff0c;可对电子围栏…

债券一级市场、二级市场介绍

债券市场可以分为一级市场和二级市场&#xff0c;它们分别在债券发行和交易中扮演着不同的角色。 债券一级市场 一级市场是指债券的初级发行市场。在这个市场上&#xff0c;债券发行人&#xff08;如政府、企业等&#xff09;通过中介机构&#xff08;如银行、证券公司等&…

昇思25天学习打卡营第14天|Pix2Pix实现图像转换

Pix2Pix是基于条件生成对抗网络&#xff08;cGAN, Condition Generative Adversarial Networks &#xff09;实现的一种深度学习图像转换模型&#xff0c;该模型是由Phillip Isola等作者在2017年CVPR上提出的&#xff0c;可以实现语义/标签到真实图片、灰度图到彩色图、航空图到…

leetcode--二叉搜索子树的最大键值和

leetcode地址&#xff1a;二叉搜索子树的最大键值和 给你一棵以 root 为根的 二叉树 &#xff0c;请你返回 任意 二叉搜索子树的最大键值和。 二叉搜索树的定义如下&#xff1a; 任意节点的左子树中的键值都 小于 此节点的键值。 任意节点的右子树中的键值都 大于 此节点的键值…

IOC、DI<4> Unity

IOC&#xff08;&#xff09;&#xff1a;控制反转&#xff0c;把程序上层对下层的依赖&#xff0c;转移到第三方的容器来装配 是程序设计的目标&#xff0c;实现方式包含了依赖注入和依赖查找&#xff08;.net里面只有依赖注入&#xff09; DI&#xff1a;依赖注入&#xff0c…

基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程(一)一些样式的调整使用

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、比如下面的发起人双击后出现的界面不正常&#xff0c; 看它的样式主要是这个里面的margin-left应该太小了&#xff0c; [data-v-45b533d5] .el-tabs__content { margin-top: 50px;mar…

多商户酒店预定SAAS系统(APP):云端革新引领行业未来

在数字化转型的浪潮中&#xff0c;酒店行业正经历着前所未有的变革。多商户酒店预定SAAS系统&#xff08;APP&#xff09;作为一种创新的解决方案&#xff0c;为酒店提供了一个集中化、高效、灵活的在线预订和管理平台。 SAAS系统的核心价值 SAAS系统通过云端服务&#xff0c…

7.1作业6

uart4.h #ifndef __UART4_H__ #define __UART4_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_uart.h" //rcc/gpio/uart4初始化 void hal_uart4_init(); //发送一个字符 void hal_put_char(const char s…

在C++中暂停程序的几种方法

在开发C应用程序时&#xff0c;有时需要让程序暂停一段时间。例如&#xff0c;你可能需要等待某个操作完成&#xff0c;或是为用户提供某种延迟。在C中&#xff0c;有多种方法可以实现这一需求。 1. 使用 std::this_thread::sleep_for (C11及以上版本) std::this_thread::sle…

【JavaScript脚本宇宙】XML和HTML解析库大揭秘:快速选出最适合你的工具

解析XML和HTML文档&#xff1a;六大常用库功能对比 前言 在现代的Web开发中&#xff0c;处理XML和HTML文档是一个常见的任务。为了更加高效地解析和操作这些文档&#xff0c;开发人员通常会使用各种库和工具。本文将介绍几个流行的XML和HTML解析库&#xff0c;分别对其功能、…

wzoi.cc基数排序AC代码(含链接)

题目描述: 基数排序是一种并不基于关键字间比较和移动操作的排序算法。基数排序是一种借助多关键字排序的思想对单逻辑关键字进行排序的方法。 通过对每一个关键字分别依次进行排序&#xff0c;可以令整个关键字序列得到完整的排序。 在本题中&#xff0c;读入一串16位&…

react native中依赖@react-native-clipboard/clipboard库实现文本复制以及在app中获取复制的文本内容

react native中依赖react-native-clipboard/clipboard库实现文本复制以及在app中获取复制的文本内容 第三方库 第三方库 react-native-clipboard 我的项目react native0.72 我使用react-native-clipboard/clipboard1.13.2 npm install --save react-native-clipboard/clipboa…