快捷導(dǎo)航

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

更新時(shí)間：2024年07月09日 15:02:34 作者：蕭寂173

這篇文章主要介紹了vue使用HMAC-SHA256簽名算法的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

收集數(shù)據(jù)：獲取需要簽名的數(shù)據(jù)。
整理數(shù)據(jù)：根據(jù)協(xié)議或需求對(duì)數(shù)據(jù)進(jìn)行排序、拼接、編碼等處理。
計(jì)算簽名：使用密鑰和算法（如 HMAC-SHA256）計(jì)算簽名。
附加簽名：將簽名附加到請(qǐng)求中（如 HTTP Header、URL 參數(shù)、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() {
      // 示例數(shù)據(jù)
      const data = {
        message: "Hello, World!",
        timestamp: 111,
      };
      // 密鑰（在真實(shí)場(chǎng)景中，應(yīng)保密,隨便寫都行,一般是后端返回給前端）
      const secretKey = "111";
      // 將數(shù)據(jù)排序并拼接成字符串
      const sortedData = Object.keys(data)
        .sort()
        .map((key) => `${key}=${data[key]}`)
        .join("&");
      // 計(jì)算 HMAC-SHA256 簽名
      const hash = CryptoJS.HmacSHA256(sortedData, secretKey);
      // 轉(zhuǎn)換成字符串格式
      this.signature = CryptoJS.enc.Hex.stringify(hash);
    },
  },
};
</script>
<style scoped>
h1 {
  font-size: 1.5em;
}
</style>

解釋

數(shù)據(jù)排序與拼接：Object.keys(data).sort().map(…).join(‘&’); 對(duì)數(shù)據(jù)的鍵進(jìn)行排序，并拼接成 key=value&key=value 的格式。
計(jì)算 HMAC-SHA256：CryptoJS.HmacSHA256(sortedData, secretKey) 生成 HMAC-SHA256 簽名。
轉(zhuǎn)換成字符串：CryptoJS.enc.Hex.stringify(hash); 將簽名轉(zhuǎn)換為十六進(jìn)制字符串。

實(shí)際應(yīng)用

在實(shí)際應(yīng)用中，簽名生成往往需要考慮以下幾點(diǎn)：

安全性：密鑰應(yīng)保密，不應(yīng)暴露在前端代碼中。通常在后端生成簽名，前端只負(fù)責(zé)發(fā)送數(shù)據(jù)。
編碼處理：有些 API 要求對(duì)數(shù)據(jù)進(jìn)行 URL 編碼或其他特定格式處理。
時(shí)間戳或隨機(jī)數(shù)：為了防止重放攻擊，通常需要在數(shù)據(jù)中包含時(shí)間戳或隨機(jī)數(shù)。

完整HTTP請(qǐng)求示例

<template>
  <div>
    <h1>簽名請(qǐng)求示例</h1>
    <button @click="sendSignedRequest">發(fā)送簽名請(qǐng)求</button>
    <p>響應(yīng)：{{ response }}</p>
  </div>
</template>
<script>
import axios from 'axios';
import CryptoJS from 'crypto-js';
export default {
  data() {
    return {
      response: ''
    };
  },
  methods: {
    generateSignature(data, secretKey) {
      // 將數(shù)據(jù)排序并拼接成字符串
      const sortedData = Object.keys(data)
        .sort()
        .map(key => `${key}=${data[key]}`)
        .join('&');
      // 計(jì)算 HMAC-SHA256 簽名
      const hash = CryptoJS.HmacSHA256(sortedData, secretKey);
      // 轉(zhuǎn)換成字符串格式
      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() {
        // 示例數(shù)據(jù)
        const data = {
          message: "Hello, World!",
          timestamp: Math.floor(Date.now() / 1000),
        };
        // 密鑰（在真實(shí)場(chǎng)景中，應(yīng)保密）
        const secretKey = "your_secret_key";
        // 將數(shù)據(jù)排序并拼接成字符串
        const sortedData = Object.keys(data)
          .sort()
          .map((key) => `${key}=${data[key]}`)
          .join("&");
        // 計(jì)算 HMAC-SHA256 簽名
        const hash = CryptoJS.HmacSHA256(sortedData, secretKey);
        // 轉(zhuǎn)換成字符串格式
        const signature = CryptoJS.enc.Hex.stringify(hash);
        // 顯示簽名
        document.getElementById("signature").textContent = signature;
      }
    </script>
  </body>
</html>

到此這篇關(guān)于vue使用HMAC-SHA256簽名算法的文章就介紹到這了,更多相關(guān)vue HMAC-SHA256簽名算法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: