微信的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+"×tamp="+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,这就说明配置成功。