经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » Java相关 » Spring Boot » 查看文章
SpringBoot接入微信JSSDK,看这篇妥妥的
来源：cnblogs　　作者：JavaDog程序狗　　时间：2023/3/24 9:09:29　　对本文有异议

先给猴急的客官上干货代码

GitHub

接入微信JSSDK GitHub地址

Gitee

接入微信JSSDK GitHub地址

前言

事情的起因是因为疫情严重，领导要求做一个专题页，能够尽可能帮助所需要的人。
于是乎本狗与同事挑灯奋战，加班加点赶工出来。
部署上线完成，用微信内置浏览器分享后，理想状态应该是这样的，如下图??


但是，结果却不是理想的这样，默默地留下了没有技术的泪水，如下图??

竟然没有关键字和展示图片，在本菜狗的不懈努力下，终于承认技术不行，去请教了大佬，得出如下结论。

  • 1.微信内置浏览器分享若需要自定义展示描述及右侧封面图，必须接入微信JSSDK,并且一定需要有配合本站的微信公众号（appId和appSecret）才可自定义分享，切记小程序（appId和appSecret）的不可以
  • 2.非微信分享，如QQ浏览器，UC浏览器等各大厂商，会根据自身定义获取HTML页面中的TDK(title，description，keyword)，举例UC浏览器分享??

    在这里插入图片描述
    所以，对接微信JSSDK,势在必行！

Tip

史上最详细的接入微信JSSDK菜鸟教程，本文全面的记录了接入微信JSSDK的步骤，具体的代码及遇到的坑，并且展示发布最终效果,并将代码发布GitHub。随篇幅较长，但史上最全。大佬勿喷，新手入门，亲测可用！！！

本文试用人群

  • 需要接入微信JSSDK却看不懂文档的同学
  • 看懂文档但是实操不知如何下手的同学
  • 下了手但是出错不知道如何调试修改的同学
  • 成功接入过但是想重温具体流程的同学

本文目标

  • 实战进行H5网站微信自定义分享
  • 实战进行H5网站调取相册选取图片

放松心态，慢慢来看

正文

官方文档

任何平台接入，官方文档是标杆，虽有些关键点一笔带过，我们也要通读有个印象，点击微信官方文档打开文档，如下??
在这里插入图片描述

总览
  • 1.x是接入关键步骤，需仔细品读，与接入有关
  • 2.x - 12.x 具体接口接入，需要对接时具体参考
  • 13.x 需要注意下，api_ticket 微信临时票据，与接入有关
  • 16-22 均是附录，可查阅错误列表对应含义，及接口菜单列表等描述

实操步骤

使用IDEA工具，新建SpringBoot项目，项目名为springboot-wexin，目录结构如下
在这里插入图片描述
AjaxJson.java - 自定义接口返回前台数据格式的封装类

  1. /**
  2.  * Copyright &copy; 2005-2020 <a href="http://www.jhmis.com/">jhmis</a> All rights reserved.
  3.  */
  4. package net.javadog.springbootwexin.common;
  6. import com.fasterxml.jackson.annotation.JsonIgnore;
  8. import java.util.LinkedHashMap;
  9. import java.util.List;
  12. /**
  13.  * $.ajax后需要接受的JSON
  14.  *
  15.  */
  16. public class AjaxJson {
  18. 	private boolean success = true;// 是否成功
  19. 	private String errorCode = "-1";//错误代码
  20. 	private String msg = "操作成功";// 提示信息
  21.     private Long count;             //返回表格记录数量
  22.     private List<?> data;           //返回表格数据
  23. 	private LinkedHashMap<String, Object> body = new LinkedHashMap<String, Object>();//封装json的map
  25. 	public static AjaxJson ok(){
  26. 		AjaxJson j = new AjaxJson();
  27. 		return j;
  28. 	}
  30. 	public static AjaxJson ok(String msg){
  31. 		AjaxJson j = new AjaxJson();
  32. 		j.setMsg(msg);
  33. 		return j;
  34. 	}
  36. 	public static AjaxJson ok(String msg, Object object){
  37. 		AjaxJson j = new AjaxJson();
  38. 		j.setMsg(msg);
  39. 		j.setResult(object);
  40. 		return j;
  41. 	}
  43. 	public static AjaxJson ok(Object object){
  44. 		AjaxJson j = new AjaxJson();
  45. 		j.setResult(object);
  46. 		return j;
  47. 	}
  49. 	public static AjaxJson fail(String errorMsg){
  50. 		AjaxJson j = new AjaxJson();
  51. 		j.setSuccess(false);
  52. 		j.setErrorCode("999");//默认错误码
  53. 		j.setMsg(errorMsg);
  54. 		return j;
  55. 	}
  57. 	public static AjaxJson fail(String errorCode,String errorMsg){
  58. 		AjaxJson j = new AjaxJson();
  59. 		j.setSuccess(false);
  60. 		j.setErrorCode(errorCode);
  61. 		j.setMsg(errorMsg);
  62. 		return j;
  63. 	}
  64. 	//返回不分页的layui表数据
  65.     public static AjaxJson layuiTable(List<?> list){
  66.         AjaxJson j = new AjaxJson();
  67.         j.setSuccess(true);
  68.         j.setCount(Long.valueOf(list.size()));
  69.         j.setData(list);
  70.         return j;
  71.     }
  72. 	public LinkedHashMap<String, Object> getBody() {
  73. 		return body;
  74. 	}
  76. 	public void setBody(LinkedHashMap<String, Object> body) {
  77. 		this.body = body;
  78. 	}
  80. 	public void put(String key, Object value){//向json中添加属性，在js中访问，请调用data.map.key
  81. 		body.put(key, value);
  82. 	}
  83. 	
  84. 	public void remove(String key){
  85. 		body.remove(key);
  86. 	}
  88. 	/**
  89. 	 * 直接设置result内容
  90. 	 * @param result
  91. 	 */
  92. 	public void setResult(Object result){
  93. 		body.put("result", result);
  94. 	}
  95. 	@JsonIgnore//返回对象时忽略此属性
  96. 	public Object getResult(){
  97. 		return body.get("result");
  98. 	}
  100. 	public String getMsg() {
  101. 		return msg;
  102. 	}
  104. 	public void setMsg(String msg) {//向json中添加属性，在js中访问，请调用data.msg
  105. 		this.msg = msg;
  106. 	}
  109. 	public boolean isSuccess() {
  110. 		return success;
  111. 	}
  113. 	public void setSuccess(boolean success) {
  114. 		this.success = success;
  115. 	}
  116. 	
  118. 	public void setErrorCode(String errorCode) {
  119. 		this.errorCode = errorCode;
  120. 	}
  122. 	public String getErrorCode() {
  123. 		return errorCode;
  124. 	}
  126.     public Long getCount() {
  127.         return count;
  128.     }
  130.     public void setCount(Long count) {
  131.         this.count = count;
  132.     }
  134.     public List<?> getData() {
  135.         return data;
  136.     }
  138.     public void setData(List<?> data) {
  139.         this.data = data;
  140.     }
  141. }

WxInitController.java - 微信初始化接入Controller控制器

  1. package net.javadog.springbootwexin.controller;
  2. import net.javadog.springbootwexin.common.AjaxJson;
  3. import net.javadog.springbootwexin.service.WxService;
  4. import net.javadog.springbootwexin.utils.WxUtil;
  5. import org.slf4j.Logger;
  6. import org.slf4j.LoggerFactory;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RequestParam;
  10. import org.springframework.web.bind.annotation.RestController;
  11. import java.util.Map;
  13. /**
  14.  * 一个低端小气没档次的程序狗 JavaDog
  15.  * blog.javadog.net
  16.  *
  17.  * @BelongsProject: springboot-wexin
  18.  * @BelongsPackage: net.javadog.springbootwexin.controller
  19.  * @Author: hdx
  20.  * @CreateTime: 2020-02-14 14:52
  21.  * @Description: 微信初始化接入Controller控制器
  22.  */
  23. @RestController
  24. @RequestMapping("/weixin")
  25. public class WxInitController {
  26.     protected Logger logger = LoggerFactory.getLogger(getClass());
  28.     @Autowired
  29.     private WxService wxService;
  31.     /**
  32.     *@Author: hdx
  33.     *@CreateTime: 20:39 2020/2/14
  34.     *@param:  shareUrl 分享url地址
  35.     *@Description: 初始化微信JSSDK Config信息
  36.      1.先通过appId和appSecret参数请求指定微信地址 获取AccessToken
  37.      2.在通过第一步中的AccessToken作为参数请求微信地址 获取jsapi_ticket临时票据(此处不考虑调用频率，使用者根据情况放入缓存或定时任务)
  38.      3.通过第二步的JssdkGetticket和timestamp,nonceStr,url作为参数请求微信地址，获取签名signature
  39.      4.将第三步获得的signature和jsapi_ticket,nonceStr,timestamp,url返回给前端，作为Config初始化验证的信息
  40.     */
  41.     @RequestMapping("/initWXJSSDKConfigInfo")
  42.     public AjaxJson initWXJSConfig (@RequestParam(required = false) String url) throws Exception{
  43.         logger.info("url=" + url);
  44.         String json = "";
  45.         try {
  46.             Map map = wxService.initJSSDKConfig(url);
  47.             json = WxUtil.mapToJson(map);
  48.         }catch (Exception e){
  49.             AjaxJson.fail(e.getMessage());
  50.         }
  51.         return AjaxJson.ok(json);
  52.     }
  54. }

WxService.java - 初始化JSSDKConfig

  1. package net.javadog.springbootwexin.service;
  3. import lombok.Getter;
  4. import net.javadog.springbootwexin.utils.WxUtil;
  5. import org.springframework.beans.factory.annotation.Value;
  6. import org.springframework.stereotype.Service;
  7. import java.util.HashMap;
  8. import java.util.Map;
  9. import java.util.UUID;
  11. /**
  12.  * 一个低端小气没档次的程序狗 JavaDog
  13.  * blog.javadog.net
  14.  *
  15.  * @BelongsProject: springboot-wexin
  16.  * @BelongsPackage: net.javadog.springbootwexin.service
  17.  * @Author: hdx
  18.  * @CreateTime: 2020-02-14 20:43
  19.  * @Description: 微信相关service
  20.  */
  21. @Service
  22. public class WxService {
  23.     @Getter
  24.     private static String AppId;
  25.     @Value("${wx.appId}")
  26.     public void setAppId(String appId) {
  27.         AppId = appId;
  28.     }
  29.     /**
  30.     *@Author: hdx
  31.     *@CreateTime: 20:46 2020/2/14
  32.     *@param:  shareUrl 分享的url
  33.     *@Description: 初始化JSSDKConfig
  34.     */
  35.     public Map initJSSDKConfig(String url) throws Exception {
  36.         //获取AccessToken
  37.         String accessToken = WxUtil.getJSSDKAccessToken();
  38.         //获取JssdkGetticket
  39.         String jsapiTicket = WxUtil.getJssdkGetticket(accessToken);
  40.         String timestamp = Long.toString(System.currentTimeMillis() / 1000);
  41.         String nonceStr = UUID.randomUUID().toString();
  42.         String signature = WxUtil.buildJSSDKSignature(jsapiTicket,timestamp,nonceStr,url);
  43.         Map<String,String> map = new HashMap<String,String>();
  44.         map.put("url", url);
  45.         map.put("jsapi_ticket", jsapiTicket);
  46.         map.put("nonceStr", nonceStr);
  47.         map.put("timestamp", timestamp);
  48.         map.put("signature", signature);
  49.         map.put("appid", AppId);
  50.         return map;
  51.     }
  52. }

WxUtil.java - 微信工具类

  1. package net.javadog.springbootwexin.utils;
  3. import com.google.gson.Gson;
  4. import com.google.gson.reflect.TypeToken;
  5. import lombok.Getter;
  6. import org.springframework.beans.factory.annotation.Value;
  7. import org.springframework.http.ResponseEntity;
  8. import org.springframework.stereotype.Component;
  9. import org.springframework.web.client.RestTemplate;
  10. import java.security.MessageDigest;
  11. import java.util.Map;
  13. /**
  14.  * 一个低端小气没档次的程序狗 JavaDog
  15.  * blog.javadog.net
  16.  *
  17.  * @BelongsProject: springboot-wexin
  18.  * @BelongsPackage: net.javadog.springbootwexin.utils
  19.  * @Author: hdx
  20.  * @CreateTime: 2020-02-14 21:19
  21.  * @Description: 微信工具类
  22.  */
  23. @Component
  24. public class WxUtil {
  25.     @Getter
  26.     protected static String AppId;
  27.     @Getter
  28.     protected static String AppSecret;
  29.     @Getter
  30.     protected static String JssdkAccesstokenUrl;
  31.     @Getter
  32.     protected static String JssdkGetticketUrl;
  34.     @Value("${wx.appId}")
  35.     public void setAppId(String appId) {
  36.         AppId = appId;
  37.     }
  39.     @Value("${wx.appSecret}")
  40.     public void setAppSecret(String appSecret) {
  41.         AppSecret = appSecret;
  42.     }
  44.     @Value("${wx.jssdk_accesstoken_url}")
  45.     public void setJssdkAccesstokenUrl(String jssdkAccesstokenUrl) {
  46.         JssdkAccesstokenUrl = jssdkAccesstokenUrl;
  47.     }
  49.     @Value("${wx.jssdk_getticket_url}")
  50.     public void setJssdkGetticketUrl(String jssdkGetticketUrl) {
  51.         JssdkGetticketUrl = jssdkGetticketUrl;
  52.     }
  54.     /**
  55.     *@Author: hdx
  56.     *@CreateTime: 21:31 2020/2/14
  57.     *@param:  * @param null
  58.     *@Description:
  59.     
  60.     */
  61.     public static String getJSSDKAccessToken() {
  62.         String token = null;
  63.         String url = JssdkAccesstokenUrl.replaceAll("APPID",
  64.                 AppId).replaceAll("APPSECRET",
  65.                 AppSecret);
  66.         String json = postRequestForWeiXinService(url);
  67.         Map map = jsonToMap(json);
  68.         if (map != null) {
  69.             token = (String) map.get("access_token");
  70.         }
  71.         return token;
  72.     }
  74.     /**
  75.     *@Author: hdx
  76.     *@CreateTime: 21:40 2020/2/14
  77.     *@param:  * @param null
  78.     *@Description: 根据accessToken获取JssdkGetticket
  80.     */
  81.     public static String getJssdkGetticket(String accessToken) {
  82.         String url = JssdkGetticketUrl.replaceAll("ACCESS_TOKEN", accessToken);
  83.         String json = postRequestForWeiXinService(url);
  84.         Map map = jsonToMap(json);
  85.         String jsapi_ticket = null;
  86.         if (map != null) {
  87.             jsapi_ticket = (String) map.get("ticket");
  88.         }
  89.         return jsapi_ticket;
  90.     }
  92.     /**
  93.     *@Author: hdx
  94.     *@CreateTime: 21:41 2020/2/14
  95.     *@param:ticket 根据accessToken生成的JssdkGetticket
  96.     *@param:timestamp 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  97.     *@param:nonceStr 随机字符串
  98.     *@param:url 当前网页的URL
  99.     *@Description: 构建分享链接的签名
  101.     */
  102.     public static String buildJSSDKSignature(String ticket,String timestamp,String nonceStr ,String url) throws Exception {
  103.         String orderedString = "jsapi_ticket=" + ticket
  104.                 + "&noncestr=" + nonceStr + "&timestamp=" + timestamp
  105.                 + "&url=" + url;
  107.         return sha1(orderedString);
  108.     }
  110.     /**
  111.      * sha1 加密JSSDK微信配置参数获取签名。
  112.      *
  113.      * @return
  114.      */
  115.     public static String sha1(String orderedString) throws Exception {
  116.         String ciphertext = null;
  117.         MessageDigest md = MessageDigest.getInstance("SHA-1");
  118.         byte[] digest = md.digest(orderedString.getBytes());
  119.         ciphertext = byteToStr(digest);
  120.         return ciphertext.toLowerCase();
  121.     }
  122.     /**
  123.      * 将字节数组转换为十六进制字符串
  124.      *
  125.      * @param byteArray
  126.      * @return
  127.      */
  128.     private static String byteToStr(byte[] byteArray) {
  129.         String strDigest = "";
  130.         for (int i = 0; i < byteArray.length; i++) {
  131.             strDigest += byteToHexStr(byteArray[i]);
  132.         }
  133.         return strDigest;
  134.     }
  135.     /**
  136.      * 将字节转换为十六进制字符串
  137.      *
  138.      * @param mByte
  139.      * @return
  140.      */
  141.     private static String byteToHexStr(byte mByte) {
  142.         char[] Digit = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' };
  143.         char[] tempArr = new char[2];
  144.         tempArr[0] = Digit[(mByte >>> 4) & 0X0F];
  145.         tempArr[1] = Digit[mByte & 0X0F];
  147.         String s = new String(tempArr);
  148.         return s;
  149.     }
  150.     /**
  151.     *@Author: hdx
  152.     *@CreateTime: 21:49 2020/2/14
  153.     *@param:  map
  154.     *@Description:  mapToJson
  156.     */
  157.     public static String mapToJson(Map map){
  158.         Gson gson = new Gson();
  159.         String json = gson.toJson(map);
  160.         return json;
  161.     }
  163.     /**
  164.     *@Author: hdx
  165.     *@CreateTime: 21:37 2020/2/14
  166.     *@param:  json
  167.     *@Description: jsonToMap
  169.     */
  170.     private static Map jsonToMap(String json) {
  171.         Gson gons = new Gson();
  172.         Map map = gons.fromJson(json, new TypeToken<Map>(){}.getType());
  173.         return map;
  174.     }
  176.     /**
  177.     *@Author: hdx
  178.     *@CreateTime: 21:36 2020/2/14
  179.     *@param:  * @param null
  180.     *@Description: 调取微信接口
  182.     */
  183.     private static String postRequestForWeiXinService(String getAccessTokenUrl) {
  184.         RestTemplate restTemplate = new RestTemplate();
  185.         ResponseEntity<String> postForEntity = restTemplate.postForEntity(getAccessTokenUrl, null, String.class);
  186.         String json = postForEntity.getBody();
  187.         return json;
  188.     }
  190. }

SpringbootWexinApplication.java - SpringBoot启动类

  1. package net.javadog.springbootwexin;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6. @SpringBootApplication
  7. public class SpringbootWexinApplication {
  9.     public static void main(String[] args) {
  10.         SpringApplication.run(SpringbootWexinApplication.class, args);
  11.     }
  13. }

config/application.yml - 基础配置文件

  1. spring:
  2.   profiles:
  3.     #激活配置文件
  4.     active: prod
  5.   #配置静态资源路径
  6.   resources:
  7.     static-locations: classpath:/static/
  9. #日志相关
  10. logging:
  11.   #配置文件日志路径
  12.   config: classpath:logback-spring.xml
  14. #微信相关配置
  15. wx:
  16.   #appId （到时候换成自己公众号的）
  17.   appId: wx4ad618620f8c3528
  18.   #appSecret（到时候换成自己公众号的）
  19.   appSecret: b772c7863b29e270aa86e40f9b9e6215
  20.   #参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）
  21.   jssdk_accesstoken_url: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
  22.   #用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）
  23.   jssdk_getticket_url: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

application-dev.yml -开发配置文件（可选）

  1. # 开发环境配置
  2. spring:
  3.   profiles: dev
  5. #端口设置
  6. server:
  7.   port: 8000

application-prod.yml -生产配置文件（因JS接口安全域名限制，则采取正式生产配置）

  1. # 生产环境配置
  2. spring:
  3.   profiles: prod
  5. #端口设置
  6. server:
  7.   port: 8002

application-test.yml -测试配置文件（可选）

  1. # 生产环境配置
  2. spring:
  3.   profiles: prod
  5. #端口设置
  6. server:
  7.   port: 8002

**demo.html ** - 测试h5页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>测试jssdk</title>
  8.     <!--引入微信JS文件-->
  9.     <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
  10.     <!--引入jquery-->
  11.     <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
  12. <script>
  13.     //获取当前页面地址
  14.     var url = (window.location.href).split('#')[0];
  15.     //调取后台接口获取权限验证配置
  16.     $.ajax({
  17.         type : "get",
  18.         /*！！！切记到时候改成自己的*/
  19.         url : "http://wxjssdk.javadog.net/weixin/initWXJSSDKConfigInfo?url="+url,//替换网址，xxx根据自己jssdk文件位置修改
  20.         success : function(data){
  21.             console.log("返回值为=" + data);
  22.             var msg = "";
  23.             if(data.success){
  24.                 msg = JSON.parse(data.msg);
  25.             }
  26.             //通过config接口注入权限验证配置
  27.             wx.config({
  28.                 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  29.                 appId: msg.appid,
  30.                 timestamp: msg.timestamp,
  31.                 nonceStr: msg.nonceStr,
  32.                 signature: msg.signature,
  33.                 /*！！！切记到时候按需自己选择，参考文档填写*/
  34.                 jsApiList: [
  35.                     "onMenuShareAppMessage",//分享给好友
  36.                     "chooseImage"
  37.                 ]
  38.             });
  39.         },
  40.         error:function(data){
  41.             alert(JSON.stringify(data));
  42.         }
  43.     });
  45.     //通过ready接口处理成功验证
  46.     wx.ready(function (){
  47.         wx.checkJsApi({
  48.             jsApiList: ['chooseImage','onMenuShareAppMessage'],
  49.             success: function (res) {JSON.stringify(res)}
  50.         });
  51.         var shareData = {
  52.             title: '标题',
  53.             desc: '简介',//这里请特别注意是要去除html
  54.             link: url,
  55.             imgUrl: 'http://b2b.haier.com/shop/userfiles/sys/1/files/201912/af656b3a-8c2c-424d-937b-a8035deb78f5.jpg'
  56.         };
  57.         wx.onMenuShareAppMessage(shareData);
  60.     });
  61.     //从相册选取图片
  62.     function wxchooseImage(){
  63.         wx.chooseImage({
  64.             count: 1, // 默认9
  65.             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  66.             sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  67.             success: function (res) {
  68.                 var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  69.             }
  70.         });
  71.     }
  72. </script>
  73. </head>
  74. <body>
  75. <button onclick="wxchooseImage();">点我选取相册</button>
  76. </body>
  77. </html>

??nginx 配置，此处不是项目中的代码！！！
nginx.config - nginx服务器配置

  1.  server
  2.     {
  3. 	    listen   80;                           #监听端口设为 80。
  4. 	    server_name  wxjssdk.javadog.net;      #请绑定自己的前缀域名。
  5. 	    location / {
  6.         proxy_set_header HOST $host;
  7.         proxy_set_header X-Forwarded-Proto $scheme;
  8.         proxy_set_header X-Real-IP $remote_addr;
  9.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  10.         proxy_pass http://127.0.0.1:8002/;
  11.       }
  12.     }

MP_verify_B0vMQLCguxRzP1Rc.txt - JS接口安全域名验证文件（到时候替换成自己公众号上的），必须在域名根路径下可以访问

  1. #一定把自己公众号上的txt验证文件放上!!!
  2. B0vMQLCguxRzP1Rc
步骤详解

打开文档JSSDK使用步骤段落，如下??
在这里插入图片描述

1.绑定域名

在这里插入图片描述
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如下??
在这里插入图片描述
点击设置如下??
在这里插入图片描述

关键点
  • 1.只能是三个域名或路径，中文，ip，带端口等路径均不可
  • 2.域名必须是ICP备案过的，有些同学使用内网穿透花生壳之类的无法设置JS安全域名
  • 3.必须将txt文件放置安全域名所对应的目录，如wxjssdk.javadog.net/xxx.txt。可由nginx配置，只要能访问即可，如果访问不到则无法设置JS安全域名
2.引入JS文件

在这里插入图片描述
实际引用在我们的项目Demo.html页面中第9行，如

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

在这里插入图片描述

关键点

必须在后台开放一个对外获取config接口注入权限的接口
对应我们代码中WxInitController.java 中的initWXJSSDKConfigInfo()方法，会返回文档中所需的必填项appId,timestamp,nonceStr,signature验证参数
在这里插入图片描述

实现步骤
  1.  1.先通过appId和appSecret参数请求指定微信地址 获取AccessToken
  2.  2.在通过第一步中的AccessToken作为参数请求微信地址 获取jsapi_ticket临时票据(此处不考虑调用频率，使用者根据情况放入缓存或定时任务)
  3.  3.通过第二步的JssdkGetticket和timestamp,nonceStr,url作为参数请求微信地址，获取签名signature
  4.  4.将第三步获得的signature和jsapi_ticket,nonceStr,timestamp,url返回给前端，作为Config初始化验证的信息

在这里插入图片描述

  • 1.先通过appId和appSecret参数请求指定微信地址 获取AccessToken
    对应我们代码中WxUtil.java第61行getJSSDKAccessToken()方法
    在这里插入图片描述
    通过自己公众号的appId和appSecret调用微信服务器access_token接口地址获取token,地址如下
    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    将其中APPID和APPSECRET替换成自己公众号的appId和appSecret，调取后返回Json字符串结果，获取access_token

  • 2.通过第一步中的AccessToken作为参数请求微信地址 获取jsapi_ticket临时票据
    对应我们代码中WxUtil.java第81行getJssdkGetticket()方法
    在这里插入图片描述
    通过上一步获得的access_token调用微信服务器jsapi_ticket接口地址获取jsapi_ticket,地址如下
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
    将其中ACCESS_TOKEN替换成上一步获取的access_token，调取后返回Json字符串结果，获取jsapi_ticket

  • 3.通过第二步的JssdkGetticket和timestamp,nonceStr,url作为参数请求微信地址，获取签名signature
    对应我们代码中WxUtil.java第102行buildJSSDKSignature()方法
    在这里插入图片描述
    通过上一步获得的jsapi_ticket，加上timestamp(支付签名时间戳),nonceStr(随机字符串),url(当前网页的URL),按照字段名的ASCII 码从小到大排序（字典序）后通过sha1进行签名，生成最终签名数据。
    对应我们代码中WxUtil.java第115行sha1()方法
    在这里插入图片描述

  • 4.前端成功接到返回值

对应我们代码中demo.html第16行$.ajax方法
在这里插入图片描述
接口返回值为
在这里插入图片描述
JSON.parse(msg)转化一下JSON对象，对应我们代码中的Demo.html中24行，转化后数据做wx.config接口注入权限验证，对应我们代码demo.html第37行
在这里插入图片描述

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

在这里插入图片描述

关键点

所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行
在我们代码在demo.html第46行，自定义分享接口，需要在页面初始化加载时就放入ready才可生效
在这里插入图片描述
反之不需要初始化加载的即可通过用户事件触发执行即可
在我们代码在demo.html第63行，用户点击按钮触发-拍照或从手机相册中选图接口
在这里插入图片描述

发布

我采用的IDEA插件Alibaba Cloud Toolkit工具一键部署本地应用到ECS服务器，可百度或等我下篇文章详解一下这个插件的用法。
在这里插入图片描述
在这里插入图片描述
Target ECS：目标服务器，我买的是阿里的服务器，则直接可以搜索到。
Target Directory: 目标目录，需要把打成的jar包上传至哪个路径下 如：/usr/local/hdx/web/
Command: 上传后执行的操作命令 如：nohup java -jar /usr/local/hdx/web/springboot-wexin.jar

发布成功后会在终端出现成功提示信息
在这里插入图片描述
然后大功告成，访问一下试试 http://wxjssdk.javadog.net/demo.html
如果调试推荐使用微信开发者工具，也就是
在这里插入图片描述
切记配置nginx和服务器安全端口访问权限！！！否则会404哦！！！

测试

  • 1.先来测试下拍照或从手机相册中选图接口
    在这里插入图片描述
    调试正常

  • 2.再来测试微信内置分享
    在这里插入图片描述
    调试报错，这是个小坑。本狗在这调试了好久，原因出在个人的订阅号是没有自定义分享权限的！！
    在这里插入图片描述

小坑总结

  1. 订阅号和服务号所涉及权限不同，需详细查看微信开发文档，查询公众号权限
  2. IP白名单未设置,会报40164
    在这里插入图片描述
    IP白名单需要在公众号安全中心设置
    在这里插入图片描述
  3. invalid signature 签名异常
    建议使用微信JSSDK签名验证工具验证是否有误

我是JavaDog，谢谢博友耐心看完, 抽空来我狗窝??瞅瞅呗 blog.javadog.net

原文链接：https://www.cnblogs.com/javadog-net/p/17245344.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Spring Boot热门文章

  • 史上最详 Thymeleaf 使用教程
  • Spring Boot如何通过java -jar启动
  • Spring Boot 2.x（六）：优雅的统一返回值
  • Springboot使用Logback实现日志配置与异常记录
  • 使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解
  • spring boot上传文件超出大小异常无法捕获问题
  • paging组件的用法和意义
  • springboot2.0集成rabbitmq的示例代码
  • Spring MVC学习step1——框架熟悉
  • spring boot ${}占位符不起作用的解决方案

    • Spring Boot推荐文章

  • 3分钟带你搞定Spring Boot中Schedule
  • 不单独部署注册中心，又要具备注册中心的功能，我能上天！
  • 从零开始学Spring Boot系列-集成Spring Security实现用户认证与授权
  • 不单独部署注册中心，又要具备注册中心的功能，咋不让我上天？
  • EasyExcel 无法读取图片？用poi写了一个工具类
  • 【进阶篇】使用 Stream 流对比两个集合的常用操作分享
  • 关于DDD和COLA的一些总结和思考
  • SnakeYaml反序列化分析
  • RestTemplate进行https请求时适配信任证书
  • Kryo反序列化链分析

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号