实现 HMAC 生成器 工具

分类：developer ｜ 标签：HMAC、签名、SHA、Webhook 使用带密钥的 HMAC（SHA-1/256/384/512）对消息签名

2.1 功能说明

使用带密钥的 HMAC（SHA-1/256/384/512）对消息签名

2.1.1 使用指南

使用指导

使用带密钥的 HMAC 算法（SHA 系列）对消息签名，常用于 Webhook 校验、API 请求签名。计算在浏览器本地完成。

注意

Web Crypto 不提供 MD5，故此处仅支持 SHA-1/256/384/512。密钥与消息均需正确填写。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• bufToHex()
• bufToB64()
• run()
• copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const algo = ref('SHA-256')
const key = ref('')
const msg = ref('')
const outFmt = ref('hex')
const result = ref('')
const err = ref('')

function bufToHex(buf) { return [...new Uint8Array(buf)].map((b) => b.toString(16).padStart(2, '0')).join('') }
function bufToB64(buf) {
  let s = ''
  const u = new Uint8Array(buf)
  for (let i = 0; i < u.length; i++) s += String.fromCharCode(u[i])
  return btoa(s)
}

async function run() {
  err.value = ''
  if (key.value === '' || msg.value === '') { result.value = ''; return }
  try {
    const cryptoKey = await crypto.subtle.importKey(
      'raw',
      new TextEncoder().encode(key.value),
      { name: 'HMAC', hash: algo.value },
      false,
      ['sign']
    )
    const sig = await crypto.subtle.sign('HMAC', cryptoKey, new TextEncoder().encode(msg.value))
    result.value = outFmt.value === 'hex' ? bufToHex(sig) : bufToB64(sig)
  } catch (e) {
    err.value = '计算失败：' + e.message
  }
}
function copy() { navigator.clipboard?.writeText(result.value).then(() => ElMessage.success('已复制')) }
run()

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/hmac