微信网页JSSDK开发流程

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/A632189007/article/details/75099234

1、绑定域名

这里写图片描述

这里写图片描述

  • 登录微信公众后台之进入公众号设置的功能设置,填写JS接口安全域名。

2、引入JS文件

<link rel="stylesheet" type="text/css" href="front/css/weui.css"/>
<script type="text/javascript" src="front/js/jweixin-1.0.0.js"></script>

3、通过config接口注入权限验证配置

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

4、通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确 执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

5、通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
  • 这其中,最主要的部分就是config接口注入权限验证配置,后台需要进行相关操作来生成这些权限验证配置,下面就讲一下这些权限验证配置参数的生成过程:

6、获取jsapi_ticket

jsapi_ticket介绍

jsapi_ticket是公众号用于调用微信JS接口的临时票据,正常情况下,jsapi_ticket的有效期为7200秒,通过access_token获取。jsapi_ticket的api调用次数非常有限(100000次/日),因此为了不影响自身业务,开发者必须在自己服务全局缓存jsapi_ticket。通过下面这个链接可以获取到jsapi_ticket信息。

签名算法

签名生成规则如下:参与签名的字段包括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
  • imestamp=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&timestamp=1414587457&url=http://mp.weixin.qq.com ?params=value

步骤2、对string1进行sha1签名,得到signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed
  • 注意事项:
    1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
    2、签名用的url必须是调用JS接口页面的完整URL。

下面给出Java版的权限信息获取代码:

主操作类:

//公众号用于调用微信JS接口的临时票据
String jsApiTicket = JsapiTicketService.getInstance().queryJsapiTicket();
//调用微信JSApi的当前网页URL(当前链接)   
String url = "www.baidu.com 此处是当前访问的URL全链接";
//随机字符串
String nonceStr = UUID.randomUUID().toString();
//当前时间
String timestamp = Long.toString(System.currentTimeMillis() / 1000);    

StringBuilder str = new StringBuilder();
str.append("jsapi_ticket=").append(jsApiTicket)
   .append("&noncestr=").append(nonceStr)
   .append("&timestamp=").append(timestamp)
   .append("&url=").append(url);

String signature = SignUtil.sha1(str.toString());       //获取到的数字签名  

request.setAttribute("appId", WechatConstant.app_id);
request.setAttribute("timestamp", timestamp);
request.setAttribute("nonceStr", nonceStr);
request.setAttribute("signature", signature);

SignUtil校验工具类

 /**
  * 对给定字符串内容进行sha1数字签名
  */
public static String sha1(String content) {
    MessageDigest md = null;  
    String tmpStr = null;  
    try {  
         md = MessageDigest.getInstance("SHA-1");  
         // 将三个参数字符串拼接成一个字符串进行sha1加密  
         byte[] digest = md.digest(content.getBytes());  
         tmpStr = byteToStr(digest);  
    } catch (NoSuchAlgorithmException e) {  
         e.printStackTrace();  
    }

    return tmpStr.toLowerCase();
} 

/** 
  * 将字节数组转换为十六进制字符串 
  */  
 private static String byteToStr(byte[] byteArray) {  
     String strDigest = "";  
     for (int i = 0; i < byteArray.length; i++) {  
         strDigest += byteToHexStr(byteArray[i]);  
     }  
     return strDigest;  
 }

 /** 
  * 将字节转换为十六进制字符串 
  */  
 private static String byteToHexStr(byte mByte) {  
     char[] Digit = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' };  
     char[] tempArr = new char[2];  
     tempArr[0] = Digit[(mByte >>> 4) & 0X0F];  
     tempArr[1] = Digit[mByte & 0X0F];  

     String s = new String(tempArr);  
     return s;  
 }
展开阅读全文

没有更多推荐了,返回首页