解析微信JS-SDK配置授權(quán)，實現(xiàn)分享接口
微信開放的JS-SDK面向網(wǎng)頁開發(fā)者提供了基于微信內(nèi)的網(wǎng)頁開發(fā)工具包，最直接的好處就是我們可以使用微信分享、掃一掃、卡券、支付等微信特有的能力。7月份的時候，因為這個分享的證書獲取問題深深的栽了一坑，后面看到“config:ok”的時候真的算是石頭落地，瞬間感覺世界很美好..
這篇文章是微信開發(fā)的很多前置條件，包括了服務(wù)端基于JAVA的獲取和緩存全局的access_token，獲取和緩存全局的jsapi_ticket，以及前端配置授權(quán)組件封裝，調(diào)用分享組件封裝。
配置授權(quán)思路：首先根據(jù)access_token獲取jsapi_ticket，在通過獲取到的jsapi_ticket以及隨機生成的字符串、時間戳，再加上需要授權(quán)的頁面地址url，進行SHA-1加密，返回加密字符串，最后根據(jù)加密串調(diào)用微信提供的config接口。
配置JS接口安全域名
公眾平臺--公眾號設(shè)置--功能設(shè)置--js接口安全域名
獲取、緩存全局的access_token
/**
* 微信全局票據(jù) ---->>>> access_token
* @return
* @throws ClientProtocolException
* @throws IOException
*/
public String getBaseAccessToken() throws ClientProtocolException, IOException{
try {
String value = redisService.get("WEIXIN_BASE_ACCESS_TOKEN");
if (!StringUtils.isEmpty(value)) {
LOGGER.info("Get base access_token from redis is successful.value:{}",value);
return value;
}else{
synchronized (this) {
//緩存中沒有、或已經(jīng)失效
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+WX_APPID+"&secret="+ WX_APPSECRET;
String rs = apiService.doGet(url);
JSONObject obj_content = JSONObject.parseObject(rs);
String accessToken = obj_content.getString("access_token");
Integer time = Integer.parseInt(obj_content.getString("expires_in").toString());
//寫緩存
redisService.set("WEIXIN_BASE_ACCESS_TOKEN", accessToken, time - 3600);
LOGGER.info("Set base access_token to redis is successful.parameters time:{},realtime",time,time-3600);
return accessToken;
}
}
} catch (Exception e) {
LOGGER.error("Get base access_token from redis is error.");
}
return null;
}
先從緩存中取key為“WX_BASE_ACCESS_TOKEN” ，如果命中直接返回值，反之通過httpclient發(fā)送GET請求調(diào)用微信提供的接口獲取全局的access_token，同時將取到的值寫入緩存。
獲取、緩存全局的jsapi_ticket
/**
* jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時票據(jù)
* @return
* @throws IOException
* @throws ClientProtocolException
*/
public String getJsapiTicket() throws ClientProtocolException, IOException{
try {
String value = redisService.get("WEIXIN_JS_API_TICKET");
if (!StringUtils.isEmpty(value)) {
return value;
}else{
synchronized (this) {
//緩存中沒有、或已經(jīng)失效
//獲取全局的access_token，唯一票據(jù)
String accessToken = getBaseAccessToken();
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ accessToken +"&type=jsapi";
String rs = apiService.doGet(url);
JSONObject obj_content = JSONObject.parseObject(rs);
String jsapi_ticket = obj_content.getString("ticket");
Integer time = Integer.parseInt(obj_content.getString("expires_in").toString());
//寫緩存
redisService.set("WEIXIN_JS_API_TICKET", jsapi_ticket, time - 3600);
return jsapi_ticket;
}
}
} catch (Exception e) {
LOGGER.error("Get js_api_ticket from redis is error:{}",e);
}
return null;
}
由于獲取jsapi_ticket微信有100000次限制，所以必須用上緩存。同理獲取access_token，我這里為了保險起見緩存失效時間設(shè)置為官方提供的時間再減去一個小時。
jssdk加密串獲取restful
1.Controller
/**
* 微信分享證書獲取
* @param
* @return signature
* @throws IOException
*/
@RequestMapping(value = "/signature", method = RequestMethod.GET)
public @ResponseBody String createSignature(
@RequestParam String url) throws IOException{
LOGGER.info("RestFul of createSignature parameters url:{}",url);
try {
String rs = wechatService.createSignature(url);
LOGGER.info("RestFul of signature is successful.",rs);
return rs;
} catch (Exception e) {
LOGGER.error("RestFul of signature is error.",e);
}
return null;
}
2.Service
/**
* 根據(jù)jsapi_ticket等參數(shù)進行SHA1加密
* @param nonceStr 隨機字符串
* @param timestamp 當(dāng)前時間戳
* @param url 當(dāng)前頁面url
*/
public String createSignature(String url) throws ClientProtocolException, IOException{
String nonceStr = create_nonce_str();
String timestamp = create_timestamp();
String signature = "jsapi_ticket="+getJsapiTicket();
signature += "&noncestr="+nonceStr;
signature += "×tamp="+timestamp;
signature += "&url="+url;
try {
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(signature.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
} catch (Exception e) {
LOGGER.error("Signature for SHA-1 is error:{}",e);
}
Map<String, String> map = new HashMap<String, String>();
map.put("timestamp", timestamp);
map.put("nonceStr", nonceStr);
map.put("signature", signature);
map.put("appid", WX_APPID);
return JSON.toJSONString(map, true);
}
private static String byteToHex(final byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash) {
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
WX_APPID為公眾號appid，通過spring@value注解從配置文件獲取，這里不細說。
3.生成隨機字符串
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
4.時間格式化
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
到此為止后臺全部完成，其實沒有太多的解釋，仔細讀一遍代碼，可讀性應(yīng)該還行！
封裝獲取授權(quán)組件，實現(xiàn)分享方法
require.config({
urlArgs: "v=20161116" ,
baseUrl : "/static",
paths: {
jweixin: 'component/jweixin/jweixin-1.0.0',
share: 'component/wechat/share'//微信分享組件
}
})
首先通過調(diào)用后臺接口獲取加密字符串，調(diào)用微信提供的wx.config()方法
//jsSDK授權(quán)
$.signature = function(wx,opts,currentUrl,callback){
$.ajax({
data: {url: currentUrl},
type: "GET",
url: WX_ROOT + "wechat/signature",
success: function (json) {
if (json) {
var data = JSON.parse(json);
wx.config({
debug: false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wechatShare.options.isSignature = true;
callback && callback(opts,wx);
}
}
});
}
建議：開發(fā)環(huán)境建議開啟調(diào)式模式，方便打印日志定位問題debug: true
所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，我這里用一個全局變量isSignature緩存了是否已經(jīng)配置授權(quán)，然后執(zhí)行回調(diào)。如實現(xiàn)分享接口：
//分享
$.share = function(opts,wx) {
var options = {
currentUrl: window.location.href.split('#')[0],
imgUrl: null,
title: '達農(nóng)保險',
desc: null,
shareUrl: null
}
$.extend(true, options, opts || {});
//判斷是否已經(jīng)授權(quán)
if(!wechatShare.options.isSignature){
$.signature(wx,opts,options.currentUrl,$.share)
}else{
wx.ready(function(){
//分享到朋友圈
wx.onMenuShareTimeline({
title: options.title,
link: options.shareUrl,
imgUrl: options.imgUrl,
success: function () {
//分享統(tǒng)計，分享來源 1 朋友圈 2分享給朋友 3分享到QQ 4分享到QQ空間
}
});
//分享給朋友
wx.onMenuShareAppMessage({
title: options.title,
desc: options.desc,
link: options.shareUrl,
imgUrl: options.imgUrl
});
});
}
}
我先確認是否已經(jīng)配置授權(quán)，如果沒有授權(quán)則調(diào)用$.signature()回調(diào)函數(shù)里傳入$.share，有點類似遞歸調(diào)用，當(dāng)再次回到share方法的時候isSignature已經(jīng)是true了，則執(zhí)行wx.ready()方法，再調(diào)需要調(diào)用的接口，微信開放提供了很多接口給我們，分享只是其中一個。只有想不到的，沒有實現(xiàn)不了的....
注意：currentUrl 必須是動態(tài)獲取的，通過window.location.href方法，因為頁面分享，微信客戶端會在你的鏈接末尾加入其它參數(shù)，所以需要再將url用‘#'割一下，取第一個，如果有中文最好是用encodeURIComponent轉(zhuǎn)義一下，保證簽名獲取成功。如果報invalid signature，大部分原因是傳入的url，和加密算法的問題，仔細檢查！
調(diào)用：
var ua = navigator.userAgent.toLowerCase(),
isWechat = ua.indexOf('micromessenger') != -1;//判斷是否為微信瀏覽器
var shareData = {
title: ‘測試分享',
desc: ‘這里是描述，分享到朋友圈不會顯示',
link: APP_ROOT + '/base/downloadApp,//分享后打開的鏈接，必須在配置的安全域名下
imgUrl: PIC_PATH + (self.data.shareListData[0].imgSmall || '/static/img/coupon/getTicPic.png'),//分享后顯示的圖片
success: function(){
setTimeout(function(){
//運營數(shù)據(jù)統(tǒng)計
},0)//偽異步方式調(diào)用
}
}
//微信瀏覽器分享加載
if(isWechat){
require(['jweixin'],function(wx){
require(['share'],function(){
$.share(shareData,wx);
})
})
}
完整js：https://github.com/helijun/component/blob/master/wechat/share.js
常用問題總結(jié)：
最開始做這個分享功能的時候，因為一個證書獲取失敗的原因（invalid signature）真的是斷斷續(xù)續(xù)困了好幾天，有的時候真的是毫無頭緒了。反復(fù)檢查代碼，逐字逐行的看，真的沒有發(fā)現(xiàn)任何異常，通過微信提供的一個js接口簽名校驗工具測試也是返回ture，然而就是報證書失敗！微信官方文檔又有點模棱兩可，到最后星期六的一個下午，靜下心來，再耐心的檢查了一遍后臺SHA1加密算法，終于看到config true.. 曙光
開發(fā)中我們總是會遇到各種各樣的問題，程序員和bug永遠都是好朋友同時又是敵人，我們總是徘徊在bug的邊緣，有時候當(dāng)遇到很奇怪的問題的時候不妨先放一下，注意力先轉(zhuǎn)移一下，去陽臺吹吹風(fēng)，說不定在某一個時刻，問題突然就解開了..
接口簽名校驗工具
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
微信小程序input、textarea層級過高穿透的問題解決
微信小程序原生組件camera、canvas、input、live-player、live、pusher、map、textarea、video的層級是最高的，那么如何解決微信小程序input、textarea層級過高穿透，本文就詳細的介紹一下2021-11-11
JavaScript for in錨點的動態(tài)創(chuàng)建
主要包括for..in的使用,錨點的動態(tài)創(chuàng)建,狀態(tài)欄文字效果2008-09-09
專IE7瀏覽器，IE URL參數(shù)過長問題，引發(fā)HTTP Status 122報錯；this作用域問題，對應(yīng)的解決方法如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
js大數(shù)相加出現(xiàn)精度丟失、運算錯誤的問題
js中數(shù)字類型長度達到16位時,進行加減乘除運算,會出現(xiàn)精度丟失,運算結(jié)果錯誤的問題,本文講述精度丟失的原因及解決辦法2023-08-08
淘寶幻燈片效果：能自動播放，鼠標(biāo)指向或者點擊數(shù)字按鈕就能切換圖片。2013-03-03
js合并兩個數(shù)組生成合并后的key：value數(shù)組
這篇文章主要是介紹了js將兩個數(shù)組合并為類json方式,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了js控制輸入框獲得和失去焦點時狀態(tài)顯示的方法,可實現(xiàn)判斷輸入框的焦點狀態(tài)設(shè)置不同樣式的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01
Javascript?promise.all的用法介紹(簡潔易懂)
這篇文章主要給大家介紹了關(guān)于Javascript?promise.all用法的相關(guān)資料,Promise.all()方法是一個Promise對象方法,可以將多個Promise實例包裝成一個新的Promise對象,最終返回一個數(shù)組,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Bootstrap表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在JS中如何動態(tài)調(diào)用方法名，想必很多的朋友們都不會吧，下面為大家舉例介紹下具體的調(diào)用方法2013-12-12