大家好，又见面了，我是你们的朋友全栈君。
微信网页开发JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
绑定域名登录微信公众平台进入“公众号设置”->“功能设置”，填写“JS接口安全域名”；设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口；
引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。
通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
代码语言：javascript复制wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});通过ready接口处理成功验证代码语言：javascript复制wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});通过error接口处理失败验证代码语言：javascript复制wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});接口调用说明所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
success：接口调用成功时执行的回调函数。fail：接口调用失败时执行的回调函数。complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
调用成功时：”xxx:ok” ，其中xxx为调用的接口名
用户取消时：”xxx:cancel”，其中xxx为调用的接口名
调用失败时：其值为具体错误信息
基础接口判断当前客户端版本是否支持指定JS接口代码语言：javascript复制wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});示例html及js调用微信jsapi接口代码语言：javascript复制
后台获取ACCESS_TOKEN和JSAPI_TICKET JS-SDK使用权限签名算法
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。
参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下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 转义。
即signature=sha1(string1)。 示例：
noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名，得到signature：
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事项
签名用的noncestr（js中驼峰标准大写S）和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL(请在当前页面alert(location.href.split(‘#’)[0])确认)，包括’http(s)://’部分，以及’？’后面的GET参数部分,但不包括’#’hash后面的部分。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。
第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。
后端java获取签名代码语言：javascript复制Map
//appId
result.put("appId", WX_APP_ID);
//时间戳
long timeStampSec = System.currentTimeMillis() / 1000;
String timestamp = String.format("%010d", timeStampSec);
result.put("timestamp", timestamp);
//随机串
String nonceStr = getRandomStr(8);
result.put("nonceStr", nonceStr);
//签名
result.put("signature", getWXSignature(url,timestamp,nonceStr));
//1.获取access_token,格式：{"access_token":"ACCESS_TOKEN","expires_in":7200}，参考地址：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
private static String getWXaccessToken(){
//获取access_token缓存到redis，设置缓存时间为7000秒
JedisCache jedis = JedisCache.getInstance();
jedis.setLocalAlias(JedisKeys.JEDIS_ALIAS1);
if(!jedis.exists(JedisKeys.ACCESS_TOKEN)){
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+WX_APP_ID+"&secret="+WX_SECRET;//获取access_token时grant_type参数填写client_credential
String tokenResult = HttpUtil.httpsGet(url);
if (StringUtils.isNotBlank(tokenResult)) {
System.out.println("获取access_token请求结果：" + tokenResult);
JSONObject tokenObj = JSON.parseObject(tokenResult);
String accessToken = tokenObj.getString("access_token");
System.out.println("获取到的access_token：" + accessToken);
//缓存ticket值，设置有效时间
jedis.set(JedisKeys.ACCESS_TOKEN, accessToken);
jedis.expire(JedisKeys.ACCESS_TOKEN, 7000);
}
}
return jedis.get(JedisKeys.ACCESS_TOKEN);
}
//2.使用access_token 采用http GET方式请求获得jsapi_ticket
private static String getWXJsapiTicket() {
JedisCache jedis = JedisCache.getInstance();
jedis.setLocalAlias(JedisKeys.JEDIS_ALIAS1);
if(!jedis.exists(JedisKeys.JSAPI_TICKET)){
//获取ticket的地址
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + getWXaccessToken() + "&type=jsapi";
String resp = HttpUtil.httpsGet(url);
if(StringUtils.isNotBlank(resp)){
System.out.println("获取jsapi_ticket请求结果：" + resp);
JSONObject resJson = JSONObject.parseObject(resp);
//请求结果ticket值
String ticket = resJson.getString("ticket");
System.out.println("获取到的ticket：" + ticket);
//缓存ticket值，设置有效时间
jedis.set(JedisKeys.JSAPI_TICKET, ticket);
jedis.expire(JedisKeys.JSAPI_TICKET, 7000);
}
}
return jedis.get(JedisKeys.JSAPI_TICKET);
}
//3.生成签名
private static String getWXSignature(String url,String timestamp,String nonceStr) {
//时间戳 timestamp
//随机字符串 nonceStr
//分享的网页的URL，不包含#及其后面部分
String[] urls = url.split("#");
String newUrl = urls[0];
if(newUrl.indexOf("http") != 0){
newUrl = "http://" + newUrl;
}
//对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）
String[] signArr = new String[]{"url=" + newUrl, "jsapi_ticket=" + getWXJsapiTicket(), "noncestr=" + nonceStr, "timestamp=" + timestamp};
Arrays.sort(signArr);
String signStr = StringUtils.join(signArr, "&");
//对signStr作sha1加密
return DigestUtils.sha1Hex(signStr);
}
//获取随机8位字符串
public static String getRandomStr(int length) {
String base = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
int randomNum;
char randomChar;
Random random = new Random();
// StringBuffer类型的可以append增加字符
StringBuffer str = new StringBuffer();
for (int i = 0; i < length; i++) {
// 可生成[0,n)之间的整数，获得随机位置
randomNum = random.nextInt(base.length());
// 获得随机位置对应的字符
randomChar = base.charAt(randomNum);
// 组成一个随机字符串
str.append(randomChar);
}
return str.toString();
}http get请求
代码语言：javascript复制import org.apache.commons.httpclient.protocol.Protocol;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.methods.GetMethod;
import org.apache.commons.httpclient.params.HttpMethodParams;
import org.apache.commons.httpclient.HttpException;
import java.io.IOException;
public class HttpUtil {
private HttpUtil(){}
public static String httpsGet(String url){
HttpClient client = new HttpClient();
Protocol myhttps = new Protocol("https", new MySSLProtocolSocketFactory(), 443);
Protocol.registerProtocol("https", myhttps);
GetMethod getMethod = new GetMethod(url);
getMethod.setFollowRedirects(true);
getMethod.addRequestHeader("Content-Type","text/html;charset=UTF-8");
HttpMethodParams params = new HttpMethodParams();
params.setContentCharset("UTF-8");
getMethod.setParams(params);
try {
client.executeMethod(getMethod);
return getMethod.getResponseBodyAsString();
} catch (HttpException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}常见错误及解决方法 调用config 接口的时候传入参数 debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法：
invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号（一个appid可以绑定三个有效域名，见 ]目录1.1.1）。
invalid signature签名错误。建议按如下顺序检查：
确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认)，包括’http(s)://’部分，以及’？’后面的GET参数部分,但不包括’#’hash后面的部分。
确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
确保一定缓存access_token和jsapi_ticket。
确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#’hash部分的链接（可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查：
确认config正确通过。
如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
确认config的jsApiList参数包含了这个JSAPI。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/139523.html原文链接：https://javaforall.cn