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

 更新时间:2023年01月19日 10:38:44   作者:溫冬''123  
这篇文章主要介绍了vue如何实现对请求参数进行签名问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前端实现请求签名

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

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")); 

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决在el-dialog中无法正确获取DOM的问题

    解决在el-dialog中无法正确获取DOM的问题

    这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • mpvue构建小程序的方法(步骤+地址)

    mpvue构建小程序的方法(步骤+地址)

    mpvue是一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心,这篇文章主要介绍了mpvue构建小程序的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue.js 添加 fastclick的支持方法

    vue.js 添加 fastclick的支持方法

    今天小编就为大家分享一篇vue.js 添加 fastclick的支持方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue+elementUI实现表格关键字筛选高亮

    vue+elementUI实现表格关键字筛选高亮

    这篇文章主要为大家详细介绍了vue+elementUI实现表格关键字筛选高亮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 2分钟实现一个Vue实时直播系统的示例代码

    2分钟实现一个Vue实时直播系统的示例代码

    这篇文章主要介绍了2分钟实现一个Vue实时直播系统的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue实现可复用轮播组件的方法

    Vue实现可复用轮播组件的方法

    这篇文章主要为大家详细介绍了Vue实现可复用轮播组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue中的按钮绑定事件小案例

    vue中的按钮绑定事件小案例

    这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • elementui 开始结束时间可以选择同一天不同时间段的实现代码

    elementui 开始结束时间可以选择同一天不同时间段的实现代码

    这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下
    2024-02-02
  • 使用vue的v-for生成table并给table加上序号的实例代码

    使用vue的v-for生成table并给table加上序号的实例代码

    这篇文章主要介绍了使用vue的v-for生成table并给table加上序号的相关资料,需要的朋友可以参考下
    2017-10-10
  • vue cli 局部混入mixin和全局混入mixin的过程

    vue cli 局部混入mixin和全局混入mixin的过程

    这篇文章主要介绍了vue cli 局部混入mixin和全局混入mixin的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论