後端
認證微信公衆号後添加安全的域名後可以檢視對應的appid 和 secret;
根據appid和secret請求微信提供的api,拿到對應的access_token;
https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET', function(res) {
//這裡的回調函數能夠拿到包含access_token的一個json資料
//{"access_token":"ACCESS_TOKEN","expires_in":7200}
})
根據擷取到的access_token請求微信的api擷取簽名所需的ticket
https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi', function(res) {
//這裡的回調函數能拿到ticket
/**
* {
'errcode': 0,
'errmsg': 'ok',
'ticket': '字元串',
'expires_in': 7200
}
*/
})
生成簽名(需要參數如下)
ticket: 已經拿到
noncestr: 随機串
timestamp: 時間戳
url: 打開前端頁面的url
//noncestr
var noncestr = Math.random().toString(36).substr(2, 15);
//timestamp
var timestamp = parseInt(new Date().getTime() / 1000) + '';
//簽名算法
var calcSignature = function (ticket, noncestr, timestamp, url) {
var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url' + url
shaObj = new jsSHA(str, 'TEXT');
return shaObj.getHash('SHA-1', 'HEX');
}
//簽名生成成功
var signature = calcSignature(ticket, noncestr, timestamp, url);
access_token和ticket生成後的有效期是7200s,微信官方建議将其進行緩存,避免短時間内大量的請求微信伺服器,導緻請求上限機制被觸發
用戶端
在html中引入所必須的微信js-sdk: https://res.wx.qq.com/open/js/jweixin-1.2.0.js
通過ajax的方式想背景伺服器發送請求,拿到帶有signature, timestamp, appid, nonceStr的資料後對wx.config進行配置
//config:進行配置
wx.config({
debug: true, //開啟debug模式,在驗證簽名過程中會傳回對應資訊
appId: appid,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
})
//ready中調用api
wx.ready(function(){
var sdata = {
title: 'str',
desc: 'str',
link: link,
imgUrl: url,
success: function () {
alert('使用者确認分享後執行的回調函數');
},
cancel: function () {
alert('使用者取消分享後執行的回調函數');
}
};
wx.onMenuShareTimeline(sdata);
wx.onMenuShareAppMessage(sdata);
});