vue如何使用HMAC-SHA256签名算法

更新时间：2024年07月09日 15:02:34 作者：萧寂173

这篇文章主要介绍了vue使用HMAC-SHA256签名算法的相关知识,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

收集数据：获取需要签名的数据。
整理数据：根据协议或需求对数据进行排序、拼接、编码等处理。
计算签名：使用密钥和算法（如 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>

到此这篇关于vue使用HMAC-SHA256签名算法的文章就介绍到这了,更多相关vue HMAC-SHA256签名算法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue实现Dialog封装
在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单，常用的交互就是把表单以弹窗的形式展示，本文主要介绍了Vue实现Dialog封装，感兴趣的可以了解一下
2021-07-07
Vue.js条件渲染和列表渲染以及Vue中key值的内部原理
这篇文章主要介绍了Vue.js条件渲染和列表渲染，以及Vue中key值的内部原理，文中有详细的代码示例，感兴趣的同学可以参考阅读
2023-04-04
解决Antd 里面的select 选择框联动触发的问题
这篇文章主要介绍了解决Antd 里面的select 选择框联动触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue3通过hooks方式封装节流和防抖的代码详解
vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,本文给大家介绍了Vue3通过hooks方式封装节流和防抖,需要的朋友可以参考下
2024-10-10
vue+bpmn.js实现自定义流程图的完整代码
这篇文章主要介绍了vue+bpmn.js实现自定义流程图的完整代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借价值,需要的朋友参考下吧
2024-03-03
解决Element组件的坑:抽屉drawer和弹窗dialog
这篇文章主要介绍了解决Element组件的坑:抽屉drawer和弹窗dialog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue.js分页组件实现：diVuePagination的使用详解
这篇文章主要介绍了Vue.js分页组件实现：diVuePagination的使用详解,需要的朋友可以参考下
2018-01-01
vue中的事件触发(emit)及监听(on)问题
这篇文章主要介绍了vue中的事件触发(emit)及监听(on)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue实现表单数据的增删改功能
这篇文章主要为大家详细介绍了vue实现表单数据的增删改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue自定义开发滑动图片验证组件
这篇文章主要为大家详细介绍了vue自定义开发滑动图片验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03

vue如何使用HMAC-SHA256签名算法

目录

完整HTTP请求示例

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具