vue如何实现对请求参数进行签名_Vue.js

前端实现请求签名

前端对请求参数进行加密作为签名。

1、思路

一般请求参数种类

1.路径参数

会出现在url上

2.params参数

会出现在url上
所以可以将url一起进行签名

3.post的请求体参数（body）

可以将post请求的data数据进行排序、然后拼接成一个字符串然后与其他参数一起进行签名

防止重复请求

可以添加时间戳，1分钟内相同的请求为重复请求不给予放行
将每个请求添加唯一id，存入redis设置1分钟过期

密钥

因为加密算法是公开的，所以我们可以添加密钥进入签名，这样即使对方知道签名的加密算法，但是没有密钥也是无法串改请求的

rsa 加密算法（非对称加密算法）
通过公钥加密私钥解密，来增加安全性。
简化：也可以使用随机数作为密钥，这样安全系数较低，但容易实现

加密

选择md5算法对参数进行加密，会使用到js-md5库

经过以上的梳理，我们可以大致明白，需要将可以被修改的参数进行加密成签名。

签名：md5( postdata ? + url + 时间戳 + 请求唯一id + 密钥 )

2、vue实现添加请求签名

代码如下：

3、axios请求拦截器实现

import axios from 'axios"
import {signaturegenerate} from "../utils/signatureutil"

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

// 请求拦截器
request.interceptors.request.use((config) => {

  // 获取请求头参数
  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 各位可以自己实现以下，作者偷下懒 ~ ~
    
  return config
});

export default request

4、生成签名工具类

// signatureutil.js
import md5 from "js-md5";
export function signaturegenerate({data, url, headers}){
    // 参数签名 密钥 + 时间戳 + header参数 + url

    // 密钥
    let secret = math.random().tostring(36).substr(2)
    // 时间戳
    let timestamp = new date().gettime()     
    // token
    let token = headers.authorization
    // post参数
    let datastr = dataserialize(datasort(data))
    // 生成签名
    let str = datastr + "secret=" + secret + "&timestamp=" + timestamp + "&url=" + url
    
    const sign = md5(str)
    
    return {
        signature: sign.touppercase(), // 将签名字母转为大写
        timestamp,
        secret
    }
}

// 参数排序
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
}

// 参数序列化
function dataserialize(sortobj){
    let strjoin = ''
    for(let key in sortobj){
        strjoin += key + "=" + sortobj[key] + "&"
    }

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

小结：

其实前端实现起来比较简单，但是还可以继续对axios进行封装，其实并不是所有的请求都需要签名。大家可以自行思考~~

我的问题就是卡在后端获取这些参数的时候浪费了很多时间。

后端api接口校验签名的实现也会陆续发布！

请求参数按照ascii码从小到大排序后追加秘钥再进行加密得到签名值

最近在和银行对接一些就接口，甲方对于我们接口数据要求如下：

1、双方需要采用https双向认证方式传输数据

2、请求参数采用全报文加密方式

3、请求参数按照ascii码从小到大排序后追加秘钥再进行加密得到签名值

本文主要介绍一下签名的生成工具类代码；

step 1：

对所有传入参数按照字段名的 ascii 码从小到大排序(字典序)后,使用 url 键值对的格式(即 key1=value1&key2=value2...) 拼接成字符 string1 。
注意：为空的参数不参与签名。

step 2：

在第一步中 string1 最后拼接上 key=key(密钥)得到 stringsigntemp 字符串,并对 stringsigntemp 进行 md5 运算,再将得到的字符串所有字符转换为大写,得到 sign 值 signvalue。
注意：key 最多 32 个字符(不包含特殊符号)

代码实现

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;
    }

注意：将实体经过上面工具类转换完成以后，已经按照参数的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、如果参数直接采用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"));

到这获得签名的方法完成。