微信公众号JSSDK获取signature签名以及config配置

痛定思痛。 2022-02-24 02:36 1096阅读 0赞

Js代码

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

其中主要获取signature这个参数,官方文档地址 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

获取signature主要分四部
1、使用APPID和APPSecret获取access_token;

2、使用access_token获取jsapi_ticket ;

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

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

注意事项:

1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2、签名用的url必须是调用JS接口页面的完整URL。
3、出于安全考虑,开发者必须在服务器端实现签名的逻辑。

第一步:获取access_token(需要在服务器上 )

  1. /** * 微信小程序获取accessToken * * @author Mr.Wen * @time 2017年8月28日 */
  2. public class GetAccessTokenUtil {
  3. // 网页授权接口
  4. public final static String GetPageAccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";
  5. public static Map<String, String> getAccessToken(String appid, String appsecret) {
  6. String requestUrl = GetPageAccessTokenUrl.replace("APPID", appid).replace("SECRET", appsecret);
  7. HttpClient client = null;
  8. Map<String, String> result = new HashMap<String, String>();
  9. String accessToken = null;
  10. try {
  11. client = new DefaultHttpClient();
  12. HttpGet httpget = new HttpGet(requestUrl);
  13. ResponseHandler<String> responseHandler = new BasicResponseHandler();
  14. String response = client.execute(httpget, responseHandler);
  15. JSONObject OpenidJSONO = JSONObject.fromObject(response);
  16. accessToken = String.valueOf(OpenidJSONO.get("access_token"));
  17. result.put("accessToken", accessToken);
  18. } catch (Exception e) {
  19. e.printStackTrace();
  20. } finally {
  21. client.getConnectionManager().shutdown();
  22. }
  23. return result;
  24. }
  25. }

第二步:获取jsapi_ticket

  1. /** * @author Mr.Wen * @description 获取ticket * @date 2018/3/29 */
  2. public class JsapiTicketUtil {
  3. // 网页授权接口
  4. public final static String GetPageAccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
  5. public static Map<String, String> JsapiTicket(String accessToken) {
  6. String requestUrl = GetPageAccessTokenUrl.replace("ACCESS_TOKEN", accessToken);
  7. HttpClient client = null;
  8. Map<String, String> result = new HashMap<String, String>();
  9. try {
  10. client = new DefaultHttpClient();
  11. HttpGet httpget = new HttpGet(requestUrl);
  12. ResponseHandler<String> responseHandler = new BasicResponseHandler();
  13. String response = client.execute(httpget, responseHandler);
  14. JSONObject OpenidJSONO = JSONObject.fromObject(response);
  15. String errcode = String.valueOf(OpenidJSONO.get("errcode"));
  16. String errmsg = String.valueOf(OpenidJSONO.get("errmsg"));
  17. String ticket = String.valueOf(OpenidJSONO.get("ticket"));
  18. String expires_in = String.valueOf(OpenidJSONO.get("expires_in"));
  19. result.put("errcode", errcode);
  20. result.put("errmsg", errmsg);
  21. result.put("ticket", ticket);
  22. result.put("expires_in", expires_in);
  23. } catch (Exception e) {
  24. e.printStackTrace();
  25. } finally {
  26. client.getConnectionManager().shutdown();
  27. }
  28. return result;
  29. }
  30. }

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

  1. String noncestr = WXUtil.generate();//随机字符串
  2. String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳
  3. //4获取url
  4. //5、将参数排序并拼接字符串
  5. String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;

第四部:对第三步的字符串进行SHA1加密,得到签名,并返回结果

  1. String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
  2. //6、将字符串进行sha1加密
  3. String signature = SHA1.SHA1(str);
  4. Map<String,String> map=new HashMap();
  5. map.put("timestamp",timestamp);
  6. map.put("accessToken",accessToken);
  7. map.put("ticket",ticket);
  8. map.put("noncestr",noncestr);
  9. map.put("signature",signature);

测试返回的结果为:加粗样式

  1. {
  2. "timestamp":"32132132131"
  3. "noncestr":"e543543dwdasdas34rr"
  4. "accessToken":"8_dsadYdanklndajsndjsndjas-ednsadkndls"
  5. "ticket":"dasdDFJLKDJFKDSJKAjkldjfjksdljjJKDJF"
  6. "signature":"jdksa2e3224324jkldjkjsaldjsalkjdsajdksajdsajk "
  7. }

此时前端js为:

  1. wx.config({
  2. debug: true, //调试阶段建议开启
  3. appId: "APPID",//APPID
  4. timestamp: "timestamp",//上面main方法中拿到的时间戳timestamp
  5. nonceStr: "nonceStr",//上面main方法中拿到的随机数nonceStr
  6. signature: "signature",//上面main方法中拿到的签名signature
  7. jsApiList: [
  8. //所有要调用的 API 都要加到这个列表中
  9. "chooseImage"//从本地的相册、图库选择图片
  10. ]
  11. });

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

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

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

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

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

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

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

发表评论

表情:
评论列表 (有 0 条评论,1096人围观)

还没有评论,来说两句吧...

相关阅读