解析微信JS-SDK配置授权,实现分享接口

时间：2021-09-07 来源：互联网编辑：宝哥软件园浏览：次

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包，最直接的好处就是我们可以使用微信分享、扫一扫、卡券、支付等微信特有的能力。7月份的时候，因为这个分享的证书获取问题深深的栽了一坑，后面看到" config:ok "的时候真的算是石头落地，瞬间感觉世界很美好.

这篇文章是微信开发的很多前置条件，包括了服务端基于爪哇岛的获取和缓存全局的访问令牌，获取和缓存全局的jsapi_ticket，以及前端配置授权组件封装，调用分享组件封装。

配置授权思路：首先根据访问令牌获取jsapi_ticket，在通过获取到的jsapi_ticket以及随机生成的字符串、时间戳，再加上需要授权的页面地址url，进行SHA-1加密，返回加密字符串，最后根据加密串调用微信提供的配置接口。

配置射流研究…接口安全域名

公众平台-公众号设置-功能设置射流研究…接口安全域名

获取、缓存全局的访问令牌

/** * 微信全局票据-ACCESS _ TOKEN * @ return * @抛出ClientProtocolException * @抛出IOException */public String getbasaccesstoken()抛出ClientProtocolException，IOException { try { String value=redis service。get(' WEIXIN _ BASE _ ACCESS _ TOKEN ')；if(！斯特林格尔斯。isempty(value)){ LOGGER。信息('从redis获取基本访问令牌成功。value:{} '，value)；返回值；}else{ synchronized (this) { //缓存中没有、或已经失效字符串网址='https://api.weixin.qq.com/cgi-bin/token？grant _ type=client _ credential APPID=' WX _ APPID ' secret=' WX _ APPSECRET；字符串RS=ApiServiCe。DoGet(网址)；JSON object obj _ content=JSON object。解析对象；字符串访问令牌=obj _ content。getString(' access _ token ')；整数时间=整数。解析器(obj _ content。getstring(' expires _ in ').toString())；//写缓存redis服务。set(' WEIXIN _ BASE _ ACCESS _ TOKEN '，accessToken，time-3600)；LOGGER.info('将基本访问令牌设置为redis成功。参数time:{}，实时'，时间，时间-3600)；返回accessToken} } } catch(异常e){ LOGGER。错误(“”从redis获取基本访问令牌是错误。');}返回null}先从缓存中取键为“WX _基地_访问_令牌",如果命中直接返回值，反之通过httpclient发送得到请求调用微信提供的接口获取全局的访问令牌，同时将取到的值写入缓存。

获取、缓存全局的jsapi_ticket

/** * jsapi_ticket是公众号用于调用微信射流研究…接口的临时票据* @返回* @抛出IOException * @抛出clientprotocoleexception */public String getjsapticket()抛出ClientProtocolException，IOException { try { String value=redis service。get(' WEIXIN _ JS _ API _ TICKET ')；if(！stringutils . isempty(value)){ 0返回值；}else{ synchronized (this) { //缓存中没有、或已经失效//获取全局的访问令牌，唯一票据字符串访问令牌=GetBaseAccessToken()；字符串网址='https://api.weixin.qq.com/cgi-bin/ticket/getticket？access _ token=“访问令牌”类型=jsapistring RS=ApiServiCe。DoGet(网址)；JSON object obj _ content=JSON object。解析对象；string jsapi _ ticket=obj _ content。GetString('票证')；整数时间=整数。解析器(obj _ content。getstring(' expires _ in ').toString())；//写缓存redis服务。set(' WEIXIN _ JS _ API _ TICKET '，jsapi_ticket，时间-3600)；返回jsapi _ ticket } } } catch(Exception e){ LOGGER。错误(“”从redis获取js_api_ticket为错误： } } '，e)；}返回null}由于获取jsapi_ticket微信有100000次限制，所以必须用上缓存。同理获取访问令牌，我这里为了保险起见缓存失效时间设置为官方提供的时间再减去一个小时。

jssdk加密串获取安静的

1.控制器

/** * 微信分享证书获取* @ param * @返回签名* @抛出IOException */@RequestMapping(值='/签名'，方法=RequestMethod .获取)公共@响应正文字符串创建签名(@请求参数字符串网址)引发IOException { LOGGER。创建签名的信息(' RestFul参数URL : } '，URL)；请尝试{字符串rs=微信服务。创建签名(网址)；LOGGER.info('签名的安静的成功，RS)；返回RS；} catch(异常e) { LOGGER.error('签名的安静的为错误. e)；}返回null}2。服务

/** * 根据jsapi_ticket等参数进行SHA1加密* @ param nonceStr随机字符串* @param时间戳当前时间戳* @param url当前页面URL */公共字符串创建签名(字符串网址)抛出ClientProtocolException，IOException { String non crest=create _ nonce _ str()；字符串时间戳=create _ timestamp()；字符串签名=' jsapi _ ticket=' getJsapiTicket()；签名=' noncestr=' nonceStr签名='时间戳='时间戳；签名=' url=' url尝试{ MessageDigest crypt=MessageDigest。getinstance(' SHA-1 ')；地穴。reset()；地穴。更新(签名。getbytes(' UTF-8 ')；signature=Bytetohex(crypt。digest())；} catch(异常e){ LOGGER。错误(' SHA-1的签名是error:{} '，e)；} MapString，String map=new HashMapString，String()；map.put('时间戳，时间戳)；地图。put('非estr '，非estr)；map.put('签名，签名);map.put('appid '，WX _ APPID)；返回JSON.toJSONString(map，true)；}私有静态字符串字节十六进制（最终字节[]哈希){ Formatter Formatter=new Formatter()；用于(字节b : hash){ formatter.format('x',b)；}字符串结果=格式化程序。tostring()；格式化程序。close()；返回结果；}WX_APPID为公众号appid，通过[电子邮件保护]注解从配置文件获取，这里不细说。

3.生成随机字符串

私有静态字符串create _ nonce _ str(){返回uuid。randomuuid().toString()；}4.时间格式化

私有静态String create _ timestamp(){返回long类型。tostring(系统。current itememillis()/1000)；}到此为止后台全部完成，其实没有太多的解释，仔细读一遍代码，可读性应该还行！

封装获取授权组件，实现分享方法

要求。config({ urlargs 3360 ' v=20161116 '，baseUrl : '/static '，路径： { jweixin : '组件/jweixin/jweixin-1。0 .0 '，共享： '组件/微信/share//微信分享组件}})首先通过调用后台接口获取加密字符串，调用微信提供的wx.config()方法

//jsSDK授权$.signature=function(wx，opts，currentUrl，callback){ $ .Ajax({ data : { URL :当前URL }，类型： 'GET '，url: WX_ROOT '微信/签名，成功：函数(JSON){ if(JSON){ var data=JSON。解析(JSON)；wx.config({ debug: false，appId: data.appid，timestamp: data.timestamp，non crest : data。非波峰，签名环：数据。签名，jsaplist :[' onmenusharedimeline '，' onMenuShareAppMessage '，' onMenuShareQQ '，' onMenuShareWeibo '，' onMenuShareQZone '])；微信共享。微信共享. options.isSignature=true回调回调(opts，wx)；} } });}建议：开发环境建议开启调式模式，方便打印日志定位问题debug: true

所有接口调用都必须在配置接口获得结果之后，配置是一个客户端的异步操作，我这里用一个全局变量是签名缓存了是否已经配置授权，然后执行回调。如实现分享接口：

//共享$。share=function (opts，wx){ var options={ current ul : window . location . href . split(' # ')[0]，imgurl: null，title:' Danong Insurance '，desc: null，shareUrl: null } $。extend(true，options，opts | | { })；//判断是否if(！微信共享. options.isSignature){ $。签名(wx，opts，options.currentUrl，$。share)} else { wx . ready(function(){//分享到朋友圈wx . onmenusharedtimeline({ title : options . title，link :options.shareurl，Imgurl:options。imgur，success 3360 function(){//分享统计，分享来源1朋友圈2与好友分享3与QQ分享4与QQ空间分享} })；//与好友分享wx . onmenusharappmessage({ title : options . title，desc3360options.desc，link:options.shareurl，imgurl3360 options . imgull })；});}}我先确认是否配置了授权。如果没有授权，我调用$的回调函数。签名()并传入$。share，这类似于递归调用。当share方法再次为true时，我将执行wx.ready()方法，然后调整要调用的接口。微信开放给我们提供了很多界面，分享只是其中之一。只有意想不到的，没有什么不能实现的.

注意：currentUrl必须动态获取。通过window.location.href方法，由于微信客户端在分享页面的时候会在你的链接末尾添加其他参数，所以需要用' # '切掉url，取第一个。如果有中文，最好用encodeURIComponent转义，以保证签名获取成功。如果举报签名无效，大部分原因是传入的url，以及加密算法问题，仔细检查！

调用：

var ua=navigator . user agent . tolowercase()、isWechat=ua . indexof(' micro messenger ')！=-1;//判断是否是微信浏览器var share data={ title : ' test sharing '，desc : '这里是描述，分享到朋友圈不会显示'，链接： app _ root '/base/downloadapp，//链接打开后分享。imgurl: PiC _ path(self . data . sharelistdata[0])。img small | | '/static/img/couple/getdicic . png ')必须在配置的安全域名下。//共享成功后显示的图片： function(){ settimeout(function(){//operating data statistics }，0)//伪异步调用} }//微信浏览器共享加载if(isw echat){ require([' jweixin ']，function (wx) {require ([。})})完整js:https://github.com/何丽君/component/blob/master/微信/share.js。

常见问题总结：

刚开始做这个分享功能的时候，因为一个无效的签名，真的断断续续困了好几天，有时候真的是毫无头绪。反复检查代码，逐字逐句，一行行，确实没有发现异常。用微信提供的js接口签名验证工具测试也返回真，但未能上报证书！微信官方文档有点暧昧。上周六下午，我冷静下来，耐心地又检查了一遍后台SHA1加密算法，终于看到config真了.黎明

我们在发展中总会遇到各种各样的问题。程序员和bug永远的好朋友同时是敌人。我们总是处于危险的边缘。有时候遇到奇怪的问题，不妨先放在一边，先关注一下，再去阳台吹风。也许在某个时刻，问题会突然得到解决。

接口签名验证工具

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！