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前端项目部署IIS的实现
这篇文章主要介绍了Vue前端项目部署IIS的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
vue better-scroll插件使用详解
本篇文章主要介绍了vue better-scroll插件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue插件mescroll.js实现移动端上拉加载和下拉刷新
这篇文章主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Vue专属状态管理库Pinia的使用与实践分享
在 Vue 的开发中,状态管理是一个不可或缺的部分,尤其是在复杂的应用中,组件之间的状态共享和管理变得至关重要,Pinia 作为 Vue 的专属状态管理库,本文将深入介绍 Pinia 的基础知识、核心功能以及实际使用场景,需要的朋友可以参考下
2024-11-11
基于Vue2实现动态折扣表格
这篇文章主要为大家详细介绍了如何基于Vue2实现动态折扣表格,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
这篇文章主要介绍了vue+vuex+axio从后台获取数据存入vuex，组件之间共享数据,非常具有实用价值，需要的朋友可以参考下
2017-04-04
Vue+penlayers实现多边形绘制及展示
这篇文章主要为大家详细介绍了Vue+penlayers实现多边形绘制及展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
vue实现计数器简单制作
这篇文章主要为大家详细介绍了vue实现计数器简单制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue router demo详解
这篇文章主要为大家详细介绍了vue router demo演示代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue中使用better-scroll实现滑动效果及注意事项
这篇文章主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11

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

目录

完整HTTP请求示例

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具