jsapi_ticketphp
生成簽名以前必須先了解一下jsapi_ticket,jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常狀況下,jsapi_ticket的有效期爲7200秒,經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限,頻繁刷新jsapi_ticket會致使api調用受限,影響自身業務,開發者必須在本身的服務全局緩存jsapi_ticket 。前端
1.參考如下文檔獲取access_token(有效期7200秒,開發者必須在本身的服務全局緩存access_token):算法
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
2.用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket(有效期7200秒,開發者必須在本身的服務全局緩存jsapi_ticket):thinkphp
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回以下JSON:數據庫
{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 }
得到jsapi_ticket以後,就能夠生成JS-SDK權限驗證的簽名了。json
簽名算法後端
簽名生成規則以下:參與簽名的字段包括noncestr(隨機字符串), 有效的jsapi_ticket, timestamp(時間戳), url(當前網頁的URL,不包含#及其後面部分) 。對全部待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串string1。這裏須要注意的是全部參數名均爲小寫字符。對string1做sha1加密,字段名和字段值都採用原始值,不進行URL 轉義。api
即signature=sha1(string1)。 示例:緩存
noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value
步驟1. 對全部待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串string1:安全
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步驟2. 對string1進行sha1簽名,獲得signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事項
1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2.簽名用的url必須是調用JS接口頁面的完整URL。
3.出於安全考慮,開發者必須在服務器端實現簽名的邏輯。
總結一下就是:
先獲取:access_token
再獲取:jsapi_ticket
拼接字符串後進行sha1加密獲得:signature
由於要寫到服務端,下面用php實現
二.PHP實現signature
填入本身的appid和secret
由於要保存數據,須要兩個文件(固然也能夠存到數據庫或者session)
到服務器裏別忘改權限,否則寫不進去
代碼以下:
//微信配置 public function get_sign(){ // 微信 JS 接口簽名校驗工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign $appid = '---------'; $secret = '-------------------'; // 獲取token $token_data = file_get_contents(__DIR__.'\wechat_token.txt'); $time = 7200; if (!empty($token_data)) { $token_data = json_decode($token_data, true); $time = time() - $token_data['time']; } if ($time > 3600) { $token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}"; $token_res = $this->https_request($token_url); $token_res = json_decode($token_res, true); $token = $token_res['access_token']; $data = array( 'time' =>time(), 'token' =>$token ); $res = file_put_contents(__DIR__.'\wechat_token.txt', json_encode($data)); if ($res) { echo '更新 token 成功'; } } else { $token = $token_data['token']; } // 獲取ticket $ticket_data = file_get_contents(__DIR__.'\wechat_ticket.txt'); $time1 = 7200; if (!empty($ticket_data)) { $ticket_data = json_decode($ticket_data, true); $time1 = time() - $ticket_data['time']; } if ($time1 > 3600) { $ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$token}&type=jsapi"; $ticket_res = $this->https_request($ticket_url); $ticket_res = json_decode($ticket_res, true); $ticket = $ticket_res['ticket']; $data = array( 'time' =>time(), 'ticket' =>$ticket ); $res = file_put_contents(__DIR__.'\wechat_ticket.txt', json_encode($data)); if ($res) { echo '更新 ticket 成功'; } } else { $ticket = $ticket_data['ticket']; } // 進行sha1簽名 $timestamp = time(); $nonceStr = $this->createNonceStr(); // 注意 URL 建議動態獲取(也能夠寫死). $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 調用JSSDK的頁面地址 //$url = $_SERVER['HTTP_REFERER']; // 先後端分離的, 獲取請求地址(此值不許確時能夠經過其餘方式解決) $str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}×tamp={$timestamp}&url={$url}"; $sha_str = sha1($str); $signPackage = array( "appId" => $appid, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "signature" => $sha_str, ); return $signPackage; } //隨機字符串 public function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } // 模擬 http 請求 public function https_request($url, $data = null){ // curl 初始化 $curl = curl_init(); // curl 設置 curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE); // 判斷 $data get or post if ( !empty($data) ) { curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); } curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // 執行 $res = curl_exec($curl); curl_close($curl); return $res; }
這裏是返回的前端須要的數據:
$signPackage = array( "appId" => $appid, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "signature" => $sha_str, );
拼接數據返回給前端
三.前端配置使用
引入js,而後調用sdk裏的方法
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script> wx.config({ debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來,若要查看傳入的參數,能夠在pc端打開,參數信息會經過log打出,僅在pc端時纔會打印。 appId: 'wxwxwxwxwxwxappId', // 必填,公衆號的惟一標識 timestamp: <?php echo $data['timestamp']; ?>, // 必填,生成簽名的時間戳 nonceStr: '<?php echo $data["nonceStr"]; ?>', // 必填,生成簽名的隨機串 signature: '<?php echo $data["signature"]; ?>',// 必填,簽名 jsApiList: ['updateAppMessageShareData','updateTimelineShareData'] // 必填,須要使用的JS接口列表 }); wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用 wx.updateAppMessageShareData({ title: '<{$data.tname}> <{$data.company}> <{$data.city}> <{$data.price}>', // 分享標題 desc: '我在昂特發現了一個不錯的職位,快來看看吧', // 分享描述 link: '<?php echo $data["url"]; ?>', // 分享連接,該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致 imgUrl: 'http://www.antchn.com/public/index/Image/weixin_logo.jpg', // 分享圖標 success: function () { // 設置成功 } }) }); wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用 wx.updateTimelineShareData({ title: '<{$data.tname}> <{$data.company}> <{$data.city}> <{$data.price}>', // 分享標題 link: '<?php echo $data["url"]; ?>', // 分享連接,該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致 imgUrl: 'http://www.antchn.com/public/index/Image/weixin_logo.jpg', // 分享圖標 success: function () { // 設置成功 } }) });
分享後
第一條是微信默認的分享效果
第二條是接入sdk後自定義的分享效果