在前端爬虫或者插件中，淘宝API/接口调用里签名算法sign是如何实现的？

淘宝API/接口调用里签名算法 sign

在做插件或者爬虫调用淘宝接口或者淘宝API 的时候，都需要一个叫 sign 的签名字段，淘宝叫他API输入参数签名结果，一般是一个 md5 加密之后的签名。

为了防止API调用过程中被黑客恶意篡改，调用任何一个API都需要携带签名，TOP服务端会根据请求参数，对签名进行验证，签名不合法的请求将会被拒绝。 TOP目前支持的签名算法有三种：MD5(sign_method=md5)，HMAC_MD5(sign_method=hmac)，HMAC_SHA256（sign_method=hmac-sha256)

一、查找 sign 签名算法流程

1. 首先可以淘宝页面打开一个包含 sign 签名的接口页面；
2. 打开控制台；
3. 在 Sources 里面全局查找 sign;
4. 找到对应的签名算法流程

从淘宝代码里面我们可以看到 sign 签名算法的具体流程。

二、断点查看具体的值

在此打一个断点，进行调试，可以看到具体的每一个字段的值；

三、封装自己的 sign 签名算法

从上面图可以看到，四个参数都能知道什么意思以及内容，s 也能找到对应的内容，一般为 md5。

1. 封装 getSign

// common.js
import md5 from 'js-md5'
//获取发送请求必须的授权 sign
function getSign(token, t, appKey, data) {
  return md5(token + '&' + t + '&' + appKey + '&' + data)
}
//从 cookie 里获取 h5token
function getH5Token() {
  let token = getCookie('_m_h5_tk') || ''
  return token.split('_')[0]
}
// 获取对应的 cookie
function getCookie(name) {
  var matches = document.cookie.match(
    new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)')
  )
  return matches ? decodeURIComponent(matches[1]) : undefined
}

2. 使用 getSign

eg：

淘宝发送优惠券接口： https://h5api.m.taobao.com/h5/mtop.tblive.right.config.create/1.0/

参数为：

const data = {
    display: true,
    liveId: window.pageData?.liveDO?.id || '',
    rightType: 'UMP',
    sendType: 'NOW',
    source: 'ZKT'
}
let t = new Date().getTime() // 时间戳
let token = getH5Token() // token
let appKey = '12*****8' // 自己的 appKey
let sign = getSign(token, t, appKey, data) // 获取 sign 值

四、总结

1. 前端基本上不能隐藏消息；
2. 再复杂的逻辑在前端里面都有迹可循；
3. 断点的使用；
4. 多次的尝试；
5. 交流和分享。