vue如何實現(xiàn)對請求參數(shù)進行簽名

更新時間：2023年01月19日 10:38:44 作者：溫冬＇＇123

這篇文章主要介紹了vue如何實現(xiàn)對請求參數(shù)進行簽名問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前端實現(xiàn)請求簽名

前端對請求參數(shù)進行加密作為簽名。

1、思路

一般請求參數(shù)種類

1.路徑參數(shù)

會出現(xiàn)在url上

2.params參數(shù)

會出現(xiàn)在url上
所以可以將url一起進行簽名

3.post的請求體參數(shù)（body）

可以將post請求的data數(shù)據(jù)進行排序、然后拼接成一個字符串然后與其他參數(shù)一起進行簽名

防止重復請求

可以添加時間戳，1分鐘內相同的請求為重復請求不給予放行
將每個請求添加唯一id，存入redis設置1分鐘過期

密鑰

因為加密算法是公開的，所以我們可以添加密鑰進入簽名，這樣即使對方知道簽名的加密算法，但是沒有密鑰也是無法串改請求的

RSA 加密算法（非對稱加密算法）
通過公鑰加密私鑰解密，來增加安全性。
簡化：也可以使用隨機數(shù)作為密鑰，這樣安全系數(shù)較低，但容易實現(xiàn)

加密

選擇MD5算法對參數(shù)進行加密，會使用到js-md5庫

經(jīng)過以上的梳理，我們可以大致明白，需要將可以被修改的參數(shù)進行加密成簽名。

簽名：MD5( postData ? + url + 時間戳 + 請求唯一id + 密鑰 )

2、Vue實現(xiàn)添加請求簽名

代碼如下：

3、axios請求攔截器實現(xiàn)

import axios from 'axios"
import {signatureGenerate} from "../utils/signatureUtil"

const request = new axios.create({
? ? timeout: 3000
})

// 請求攔截器
request.interceptors.request.use((config) => {

? // 獲取請求頭參數(shù)
? const {signature, timestamp, secret} = signatureGenerate(config)
? // 分別將簽名、密鑰、時間戳 至請求頭?
? if(signature) config.headers["signature"] = signature
? if(secret) config.headers["key"] = secret
? if(timestamp) config.headers["timestamp"] = timestamp?
? // 這里未添加請求唯一id 各位可以自己實現(xiàn)以下，作者偷下懶 ~ ~
? ??
? return config
});

export default request

4、生成簽名工具類

// signatureUtil.js
import md5 from "js-md5";
export function signatureGenerate({data, url, headers}){
? ? // 參數(shù)簽名 密鑰 + 時間戳 + header參數(shù) + url

? ? // 密鑰
? ? let secret = Math.random().toString(36).substr(2)
? ? // 時間戳
? ? let timestamp = new Date().getTime() ? ??
? ? // token
? ? let token = headers.Authorization
? ? // post參數(shù)
? ? let dataStr = dataSerialize(dataSort(data))
? ? // 生成簽名
? ? let str = dataStr + "secret=" + secret + "&timestamp=" + timestamp + "&url=" + url
? ??
? ? const sign = md5(str)
? ??
? ? return {
? ? ? ? signature: sign.toUpperCase(), // 將簽名字母轉為大寫
? ? ? ? timestamp,
? ? ? ? secret
? ? }
}

// 參數(shù)排序
function dataSort(obj){
? ? if (JSON.stringify(obj) == "{}" || obj == null) {
? ? ? ? return {}
? ? }
? ? let key = Object.keys(obj)?.sort()
? ? let newObj = {}
? ? for (let i = 0; i < key.length; i++) {
? ? ? ? newObj[key[i]] = obj[key[i]] ? ? ? ?
? ? }
? ? return newObj
}

// 參數(shù)序列化
function dataSerialize(sortObj){
? ? let strJoin = ''
? ? for(let key in sortObj){
? ? ? ? strJoin += key + "=" + sortObj[key] + "&"
? ? }

? ? // return strJoin.substring(0, strJoin.length - 1)
? ? return strJoin
}

小結：

其實前端實現(xiàn)起來比較簡單，但是還可以繼續(xù)對axios進行封裝，其實并不是所有的請求都需要簽名。大家可以自行思考~~

我的問題就是卡在后端獲取這些參數(shù)的時候浪費了很多時間。

后端API接口校驗簽名的實現(xiàn)也會陸續(xù)發(fā)布！

請求參數(shù)按照ASCII碼從小到大排序后追加秘鑰再進行加密得到簽名值

最近在和銀行對接一些就接口，甲方對于我們接口數(shù)據(jù)要求如下：

1、雙方需要采用https雙向認證方式傳輸數(shù)據(jù)

2、請求參數(shù)采用全報文加密方式

3、請求參數(shù)按照ASCII碼從小到大排序后追加秘鑰再進行加密得到簽名值

本文主要介紹一下簽名的生成工具類代碼；

Step 1：

對所有傳入?yún)?shù)按照字段名的 ASCII 碼從小到大排序(字典序)后,使用 URL 鍵值對的格式(即 key1=value1&key2=value2...) 拼接成字符 string1 。
注意：為空的參數(shù)不參與簽名。

Step 2：

在第一步中 string1 最后拼接上 key=Key(密鑰)得到 stringSignTemp 字符串,并對 stringSignTemp 進行 md5 運算,再將得到的字符串所有字符轉換為大寫,得到 sign 值 signValue。
注意：KEY 最多 32 個字符(不包含特殊符號)

代碼實現(xiàn)

1、將對應的model轉換為map

public static Map<String, Object> objectToMap(Object obj) throws Exception {
        if (obj == null)
            return null;
 
        TreeMap<String, Object> map = new HashMap<String, Object>();
 
        BeanInfo beanInfo = Introspector.getBeanInfo(obj.getClass());
        PropertyDescriptor[] propertyDescriptors = beanInfo.getPropertyDescriptors();
        for (PropertyDescriptor property : propertyDescriptors) {
            String key = property.getName();
            if (key.compareToIgnoreCase("class") == 0) {
                continue;
            }
            Method getter = property.getReadMethod();
            Object value = getter != null ? getter.invoke(obj) : null;
            map.put(key, value);
        }
 
        return map;
    }

注意：將實體經(jīng)過上面工具類轉換完成以后，已經(jīng)按照參數(shù)的ACII碼排序了

2、生成簽名工具類

package com.jack.common.utils;
 
import java.math.BigInteger;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
 
/**
 * @author zhenghao
 * @description:
 * @date 2019/7/3014:33
 */
public class SignatureUntils {
    /**
     * 生成簽名；
     *
     * @param params
     * @return
     */
    static public String signForInspiry(Map params, String key) {
 
        StringBuffer sbkey = new StringBuffer();
        Set es = params.entrySet();
        Iterator it = es.iterator();
 
        while (it.hasNext()) {
            Map.Entry entry = (Map.Entry) it.next();
            String k = (String) entry.getKey();
            Object v = entry.getValue();
            //空值不傳遞，不參與簽名組串
            if (null != v && !"".equals(v)) {
                sbkey.append(k + "=" + v + "&");
            }
        }
        System.out.println(sbkey);
        sbkey = sbkey.append("key=" + key);
 
        //MD5加密,結果轉換為大寫字符
        String sign = toMD5(sbkey.toString()).toUpperCase();
        return sign;
    }
    /**
     * 對字符串進行MD5加密
     *
     * @param str 需要加密的字符串
     * @return 小寫MD5字符串 32位
     */
    public static String toMd5(String str) {
        String re = null;
        byte encrypt[];
        try {
            byte[] tem = str.getBytes();
            MessageDigest md5 = MessageDigest.getInstance("md5");
            md5.reset();
            md5.update(tem);
            encrypt = md5.digest();
            StringBuilder sb = new StringBuilder();
            for (byte t : encrypt) {
                String s = Integer.toHexString(t & 0xFF);
                if (s.length() == 1) {
                    s = "0" + s;
                }
                sb.append(s);
            }
            re = sb.toString();
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return re;
    }
 
}

3、測試代碼

 public static void testSingn(){
        try {
            Row row = new Row();
            row.setISINUSE("1");
            row.setCALLTIME("2019");
            row.setSERIALNO("123");
            row.setTALKTIME("344");
 
            Map<String, Object> map = ObjectMapConvert.objectToMap(row);
            String qwertyu = SignatureUntils.signForInspiry(map, "123456");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

4、如果參數(shù)直接采用map方式，則需要采用有序的map

SortedMap<Object,Object> params = new TreeMap<Object,Object>(); ?
params.put("id",appid);
params.put("name",name);
params.put("age",age);
params.put("sign",signForInspiry(params,"123456"));?

到這獲得簽名的方法完成。