JS-SDK获取微信接口权限

最新推荐文章于 2022-09-03 11:35:20 发布

Murruy

最新推荐文章于 2022-09-03 11:35:20 发布

阅读量846

点赞数 1

文章标签： JS-SDK 微信公众号权限

本文链接：https://blog.csdn.net/weixin_43619368/article/details/103923639

版权

微信的JS-SDK通过config接口注入权限验证配置：

前端页面JS代码：


wx.config({  
    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    debug: true,   
    appId: '', // 必填，公众号的唯一标识  
    timestamp: , // 必填，生成签名的时间戳  
    nonceStr: '', // 必填，生成签名的随机串  
    signature: '',// 必填，签名  
    jsApiList: [] // 必填，需要使用的JS接口列表  
});

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。

正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。

由于获取jsapi_ticket的api调用次数有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，

开发者必须在自己的服务全局缓存jsapi_ticket 。

1、获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）

2、用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）

成功返回如下JSON：

{  
"errcode":0,  
"errmsg":"ok",  
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",  
"expires_in":7200  
}

获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了

签名算法

签名生成规则如下：

参与签名的字段包括：

noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。

对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。

这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。

步骤2. 对string1进行sha1签名，得到signature。

注意事项：

1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2、签名用的url必须是调用JS接口页面的完整URL。

3、出于安全考虑，开发者必须在服务器端实现签名的逻辑。

以上的东西加起来就是四步：

* : 必须将服务器的外网IP地址添加到公众号的IP白名单上

1、使用APPID和APPSecret获取access_token；

2、使用access_token获取jsapi_ticket ；

3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串；

4、对第三步的字符串进行SHA1加密，得到签名。

Java代码实现：

第一步、获取access_token

public static String getAccessToken() {  
    String access_token = "";  
    String grant_type = "client_credential";//获取access_token填写client_credential
    //APPID和APPSECRET可以去微信公众平台---“开发----基本配置”中查找。
    String AppId="APPID";//第三方用户唯一凭证  
    String secret="APPSECRET";//第三方用户唯一凭证密钥，即appsecret   
    //这个url链接地址和参数皆不能变  
    String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret;  
       
    try {  
        URL urlGet = new URL(url);  
        HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
        http.setRequestMethod("GET"); // 必须是get方式请求  
        http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
        http.setDoOutput(true);  
        http.setDoInput(true);  
        System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒  
        System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒  
        http.connect();  
        InputStream is = http.getInputStream();  
        int size = is.available();  
        byte[] jsonBytes = new byte[size];  
        is.read(jsonBytes);  
        String message = new String(jsonBytes, "UTF-8");  
        JSONObject demoJson = JSONObject.fromObject(message);  
        System.out.println("JSON字符串："+demoJson);  
        access_token = demoJson.getString("access_token");  
        is.close();  
    } catch (Exception e) {  
            e.printStackTrace();  
    }  
    return access_token;  
}

第二步、获取jsapi_ticket

public static String getTicket(String access_token) {  
    String ticket = null;  
    String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//这个url链接和参数不能变  
    try {  
        URL urlGet = new URL(url);  
        HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
        http.setRequestMethod("GET"); // 必须是get方式请求  
        http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
        http.setDoOutput(true);  
        http.setDoInput(true);  
        System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒  
        System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒  
        http.connect();  
        InputStream is = http.getInputStream();  
        int size = is.available();  
        byte[] jsonBytes = new byte[size];  
        is.read(jsonBytes);  
        String message = new String(jsonBytes, "UTF-8");  
        JSONObject demoJson = JSONObject.fromObject(message);  
        System.out.println("JSON字符串："+demoJson);  
        ticket = demoJson.getString("ticket");  
        is.close();  
    } catch (Exception e) {  
            e.printStackTrace();  
    }  
    return ticket;  
}

拿到了jsapi_ticket之后就要参数名排序和拼接字符串，并加密了。以下为sha1的加密算法：

public static String SHA1(String decript) {  
    try {
    MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
    digest.update(decript.getBytes());
    byte[] messageDigest = digest.digest();
    // Create Hex String
    StringBuilder hexString = new StringBuilder();
    // 字节数组转换为 十六进制 数
    for (byte b : messageDigest) {
        String shaHex = Integer.toHexString(b & 0xFF);
        if (shaHex.length() < 2) {
            hexString.append(0);
        }
        hexString.append(shaHex);
    }
    return hexString.toString();
} catch (NoSuchAlgorithmException e) {
    e.printStackTrace();
}
return null;
}

加密算法转载自：http://www.open-open.com/lib/view/open1392185662160.html

第三步、获取签名：

public static void main(String[] args) {  
    //1、获取AccessToken  
    String accessToken = getAccessToken();  
      
    //2、获取Ticket  
    String jsapi_ticket = getTicket(accessToken);  
      
    //3、时间戳和随机字符串  
    String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串  
    String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳  
      
    System.out.println("accessToken:"+accessToken+"\njsapi_ticket:"+jsapi_ticket+"\n时间戳："+timestamp+"\n随机字符串："+noncestr);  
      
    //4、获取url,前端传过来当前页面的URL  
    String url="";  
    /*根据JSSDK上面的规则进行计算，这里比较简单，我就手动写啦 
    String[] ArrTmp = {"jsapi_ticket","timestamp","nonce","url"}; 
    Arrays.sort(ArrTmp); 
    StringBuffer sf = new StringBuffer(); 
    for(int i=0;i<ArrTmp.length;i++){ 
        sf.append(ArrTmp[i]); 
    } 
    */  
      
    //5、将参数排序并拼接字符串  
    String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;  
     
    //6、将字符串进行sha1加密  
    String signature =SHA1(str);  
    System.out.println("参数："+str+"\n签名："+signature);  
}

第四步、将后台获取到的时间戳（10位）、随机字符串、签名等信息返回给前端，在使用时可以获取权限。

再次回到最开始的config配置（VUE），

import wx from 'weixin-js-sdk'
import getWchartCon from '@/http/api'// 连接后台接口
// 设置 wx.config
        signInfo(){
            let sign_url;
            let ua = navigator.userAgent.toLowerCase();
            if (/iphone|ipad|ipod|ios/.test(ua)) {
                sign_url = encodeURIComponent(window.location.href.split('#')[0]);
                // eslint-disable-next-line no-console
            }else{
                sign_url = encodeURIComponent(window.location.href);
            }
            // getWchartCon是封装过的调取后台接口方法
            // import { post } from './axios';
            // export const getWchartCon = params => post('/getWxConfig', params); getWxConfig 后台接口名称
            getWchartCon({
                // 此处传到后台的url需要进行URL解码
                url : sign_url
            }).then(res => {
                wx.config({
                    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    debug: false,
                    // 必填，公众号的唯一标识
                    appId: "wx66871d0a78fd725b",
                    // 必填，生成签名的时间戳
                    timestamp: res.timestamp,
                    // 必填，生成签名的随机串
                    nonceStr: res.nonceStr,
                    // 必填，签名
                    signature: res.signature,
                    // 必填，需要使用的JS接口列表，所有JS接口列表
                    jsApiList: ['checkJsApi', 'scanQRCode']
                });
            }).catch (err => {
                return;
            })
        },
        // 扫描
        scanCode(){
            let that = this
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['scanQRCode'],
                    success: function (res) {
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                            // 添加扫描完成后的操作
                            }
                        });
                    }
                });
            });
        },

以上的时间戳、随机数、签名一定要跟main方法中获取到的一致，否则会报invalid signature错误。

另外，这个签名的有效时间为7200秒，也就是2个小时，因此当超过两个小时候，再访问也会报invalid signature错误。

另外还有一个错误：invalid url domain

这个跟生成签名时用的url有关系，官网的说法是：

invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名）

这个url必须是：“公众号设置---功能设置----JS接口安全域名”中绑定的三个域名之一

若是以上的配置没有问题，且dubug也设置为了true，那么再访问的时候，就会出现一个config:ok，这就说明配置成功。

Murruy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS-SDK获取微信接口权限

微信的JS-SDK通过config接口注入权限验证配置：前端页面JS代码：wx.config({ // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 debug: true, appId: '', // 必填，公众号的唯一标识 t...
复制链接

扫一扫