SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤

梦里梦外; 2022-02-24 08:20 408阅读 0赞

##        SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤 ##

# #

**一、登录微信平台**

name： your name

pwd： password

**二、步骤 获取 access\_token**

1、登录平台

2、获取基本配置信息： 开发 --- 基本配置 ， 获取信息如下：

*  开发者ID(AppID) ： xxx。 （直接获取）
 *  开发者密码(AppSecret)：若忘记，需重置。 且需要管理员身份验证。 （xx）
 *  IP白名单：设置IP白名单后，获取 [access\_token接口][access_token]才可调用成功。
 *

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70][]

3、获取 acccess\_token： （ [获取文档][access_token] ， [调试工具 ][Link 1]）

*  请求方式： GET
 *  url： [获取URL][URL]
 *  参数说明如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>参数</p> </td> 
   <td> <p>是否必须</p> </td> 
   <td> <p>说明</p> </td> 
  </tr> 
  <tr> 
   <td> <p>grant_type</p> </td> 
   <td> <p>是</p> </td> 
   <td> <p>获取access_token填写 client_credential</p> </td> 
  </tr> 
  <tr> 
   <td> <p>appid</p> </td> 
   <td> <p>是</p> </td> 
   <td> <p>第三方用户唯一凭证</p> </td> 
  </tr> 
  <tr> 
   <td> <p>secret</p> </td> 
   <td> <p>是</p> </td> 
   <td> <p>第三方用户唯一凭证密钥，即appsecret</p> </td> 
  </tr> 
 </tbody> 
</table>

**三、设置 JS 接口安全域名 （[文档][Link 2] ）**

1、路径： 设置 --- 公众号设置 --- 功能设置 --- JS接口安全域名 。

2、需要先将 **MP\_verify\*\*\*** 开头的文件上传到服务器，才能保存成功。

3、图片参考如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 1][]

**四、获取 jsapi\_ticket**

1、[文档 ][Link 3]： 【 附录1-JS-SDK使用权限签名算法】

2、请求方式： GET

3、url ：[ 获取URL ][_URL]

4、参数： access\_token 。 （获取方式： 【二-3】）

**五、签名算法**

1、[文档][Link 3] ： 【签名算法】

2、签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi\_ticket, timestamp（时间戳）, url（当前网页的URL，不包含\#及其后面部分） 。**对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后**，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

3、步骤1：

**jsapi\_ticket**=xxxx&**noncestr**=Wm3WZYTPz0wzccnW&**timestamp**=1414587457&**url**=http://mp.weixin.qq.com?params=value

4、对string1进行sha1签名，得到 signature： （服务端实现）

5、注意事项如下：

*   签名用的noncestr和timestamp必须与 wx.config 中的nonceStr和timestamp相同。
 *  签名用的url必须是调用JS接口页面的完整URL。
 *  出于安全考虑，开发者必须在服务器端实现签名的逻辑。
 *  如出现invalid signature 等错误详见附录5常见错误及解决办法。

6、微信 JS 接口签名校验工具： [签名校验][Link 4]

**六、java版加密参考**

1、定义 WeiXinConfig.java 存储相关配置信息 --- 主要字段参考

/**
     * description: 微信配置相关 信息
     * @version v1.0
     * @author w
     * @date 2019年2月22日下午3:12:11
     **/
    public class WeiXinConfig {
    	private String timestamp = DateUtils.getDate("yyyyMMdd"); // 生成签名的时间戳
    	private String noncestr = "HaHa_Sir" ; // 生成签名的随机串
    	private String signature ; // 签名
    	private String ticket ; // 
    	private String url ; // 当前页面 url 
    	// ============= getter , setter ================= // 
    }

2、定义WeiXinUtils.java 实现 微信 signature 签名算法 sha-1 加密

import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    import org.slf4j.Logger;
    /**
     * description: 微信 signature 签名算法  sha-1 加密
     * @version v1.0
     * @author w
     * @date 2019年2月25日下午5:24:53
     **/
    public class WeiXinUtils {
    	private static final Logger logger = org.slf4j.LoggerFactory.getLogger(WeiXinUtils.class);
    	
    	/**
    	 * description: 获取微信签名加密后的字符串
    	 * @return String
    	 * @version v1.0
    	 * @author w
    	 * @date 2019年2月25日 下午5:26:39
    	 */
    	public  static String signature( String str) {
    		MessageDigest messageDigest = null ; 
    		logger.info("signature str :" + str);
    		try {
    			messageDigest = MessageDigest.getInstance("SHA-1");
    			byte[] digest =  messageDigest.digest(str.getBytes());
    			return byteToStr(digest).toLowerCase();
    		} catch (NoSuchAlgorithmException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    	
    	/**
    	 * description: 微信 sha-1 加密后字符串返回
    	 * @param config
    	 * @return String
    	 * @version v1.0
    	 * @author w
    	 * @date 2019年2月25日 下午5:35:14
    	 */
    	public  static String signature(WeiXinConfig config) {
    		String str = concatStr(config);
    		return signature(str);
    	}
    	
    	/**
    	 * description: 需要加密的参数，字符串拼接
    	 * @param config
    	 * @return String
    	 * @version v1.0
    	 * @author w
    	 * @date 2019年2月25日 下午5:42:28
    	 */
    	public static String concatStr(WeiXinConfig config) {
    		StringBuffer sb = new StringBuffer();
    		sb.append("jsapi_ticket=").append(config.getTicket()).append("&");
    		sb.append("noncestr=").append(config.getNoncestr()).append("&");
    		sb.append("timestamp=").append(config.getTimestamp()).append("&");
    		sb.append("url=").append(config.getUrl());
    		return sb.toString();
    	}
    	
    	 /** 
         * 将字节数组转换为十六进制字符串 
         * @param byteArray 
         * @return 
         */  
        private static String byteToStr(byte[] byteArray) {  
            String strDigest = "";  
            for (int i = 0; i < byteArray.length; i++) {  
                strDigest += byteToHexStr(byteArray[i]);  
            }  
            return strDigest;  
        }  
      
        /** 
         * 将字节转换为十六进制字符串 
         * @param mByte 
         * @return 
         */  
        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;  
        }  
    }

**七、SpringMVC提供微信配置相关信息**

1、提供微信配置相关信息

/**
    * description: 获取微信 config 相关的配置信息
    * @param config
    * @return WeiXinConfig
    * @version v1.0
    * @author w
    * @date 2019年2月26日 上午11:49:27
    */
    @RequestMapping(value = { "/weixin/config"})
    @ResponseBody
    public WeiXinConfig configInfo(WeiXinConfig config) {
    	config.setTicket(JsapiTicketUtil.getJsapiTicket());
    	String signature = WeiXinUtils.signature(config);
    	config.setSignature(signature);
    	return config;
    }

**八、前端调用相关配置信息**

1、引入依赖 js 文件

2、前端调用相关配置信息

**九、功能测试**

1、功能开发完成后，需部署到 【三-设置 JS 接口安全域名】的服务器下。

2、将已经配置分享功能页面URL粘贴到 [微信web开发者工具][web] 、或使用 [扫一扫 二维码][Link 5]、或将URL发送到微信中打开。

3、微信web开发者工具 调试截图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 3][]

4、微信使用JS-SDK分享前后对比

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 5][]

**十、总结**

1、主要步骤如下：

*  获取 AppID 、 AppSecret 、添加IP白名单
 *  获取access\_token ， 获取 jsapi\_ticket
 *  实现 signature sha-1 签名算法加密
 *  前端调用配置信息
 *  功能测试

2、获取 access\_token 、jsapi\_ticket 可在java服务端封装对应工具类进行获取。 如： [HttpClient ][HttpClient] , [java原生的 HttpURLConnection][java_ HttpURLConnection] 等等。

3、微信开发文档中要求缓存 access\_token，可使用 Redis , Ehcache 来实现，或者自行定义 静态全局变量也可以。 为了便于理解，本示例中没有提供。

4、调试过程中遇到错误请参考： [附录5-常见错误及解决方法][Link 2] （tips： Ctrl+F ，快速定位）

5、上一操作错误都排除后，还是遇到 invalid signature 错误，请参考：[invalid signature 签名无效 解决思路][invalid signature _] 。

**十一、参考资料**

1、 [官方文档][Link 6]

2、[孤傲苍狼： 微信开发入门 ][Link 7]

3、[微信web开发者工具][web] 、[Windows 64位版本][Windows 64] 、 [Windows 32位版本][Windows 32] 、 [Mac版本][Mac]

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[access_token]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70]: /images/20220224/af023c3fb6d6467db90583e1e1dcada4.png
[Link 1]: https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token
[URL]: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
[Link 2]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 1]: /images/20220224/503f19284e484c95af29afb8d6d9e835.png
[Link 3]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.9601504819612376#62
[_URL]: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
[Link 4]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
[web]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
[Link 5]: https://blog.csdn.net/HaHa_Sir/article/details/82469395
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 2]: /images/20220224/30d4ccd2d3f24ff696244933808f1c7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 3]: /images/20220224/99c6c35d687e4e12b0a57212a31df51b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 4]: /images/20220224/756051addf7d49d48ab026140ff9abac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 5]: /images/20220224/8a8c65eb118b45fc843ce1362e12bcfa.png
[HttpClient]: https://blog.csdn.net/HaHa_Sir/article/details/79402839
[java_ HttpURLConnection]: https://blog.csdn.net/HaHa_Sir/article/details/87908319
[invalid signature _]: https://blog.csdn.net/HaHa_Sir/article/details/88064916
[Link 6]: https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
[Link 7]: https://www.cnblogs.com/xdp-gacl/p/5149171.html#4191252
[Windows 64]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x64
[Windows 32]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x86
[Mac]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=darwin