微信JSSDK分享,解決config:invalid signature問題
阿新 • • 發佈:2018-12-22
微信JSSDK分享可以實現自己的網頁在微信自定義圖示,標題,還有描述,還可以分享到朋友圈,分享到微信群,分享給朋友等操作
很多開發者下載官方的demo進行開發,最後debug的時候,顯示的是config:invalid signature
,這個原因其實很有可能是簽名不一致。
我們需要保持簽名一致,才能完整注入這個許可權的。
一般,簽名不一致的是因為access_token生成的時候,獲取jsapi_ticket的時候有問題造成的,我一開始弄了好久都沒搞對,後來一個個嘗試
我先嚐試生成的一個jsapi_ticket,寫死在頁面,發現沒問題,然後再嘗試獲取access_token寫死在頁面,也沒問題,但是直接在頁面上生成access_token再呼叫就不行。
我就另外寫了一個access.php進行生成access_token,把access_token存入資料庫,搞一個定時任務,每隔1小時生成一個新的access_token,因為access_token僅有2小時有效期,而且每天最多呼叫2000次,所以我覺得存資料庫是比較好的。
然後在分享頁面取資料庫的access_token就行了。
下面是生成access_token的程式碼
<?php header("Content-type:text/html;charset=utf-8"); //獲取access_token $appId = '填寫您的'; $appSecret = '填寫您的'; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appId."&secret=".$appSecret; $ch = curl_init();//初始化curl curl_setopt($ch, CURLOPT_URL,$url); //要訪問的地址 curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳過證書驗證 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 從證書中檢查SSL加密演算法是否存在 $data = json_decode(curl_exec($ch)); $token = $data->access_token; //連線資料庫 $con = mysql_connect("資料庫地址","資料庫賬號","資料庫密碼"); mysql_select_db("資料庫名", $con); mysql_query("INSERT INTO access_token (access_token) VALUES ('$token')"); mysql_close($con); ?>
下面是分享頁面程式碼:
index.php
<?php //獲取jsapi_ticket function getjsapi_ticket(){ //獲取微信access_token //連線資料庫 $con = mysql_connect("資料庫地址","資料庫賬號","資料庫密碼"); mysql_select_db("資料庫名", $con); $result = mysql_query("SELECT access_token FROM access_token ORDER BY ID DESC LIMIT 1"); while($row = mysql_fetch_array($result)){ $token = $row["access_token"]; } $access_token = $token; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$access_token}"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0); $data = curl_exec($ch); curl_close($ch); $data = json_decode($data,true); return $data['ticket']; } // mysql_close($con); //預設生成16位隨機數 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; } //獲取要排序的signature相關程式碼 function getSignPackage() { $jsapiTicket = getjsapi_ticket(); $url = "當前頁面的URL"; $timestamp = time(); $nonceStr = createNonceStr(); // 這裡引數的順序要按照 key 值 ASCII 碼升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => 'ADDPID修改為您的', "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature ); return $signPackage; } $signPackage = getSignPackage(); ?> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>微信分享DEMO</title> </head> <body> test </body> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> wx.config({ debug: true, appId: '<?php echo $signPackage["appId"];?>', timestamp: <?php echo $signPackage["timestamp"];?>, nonceStr: '<?php echo $signPackage["nonceStr"];?>', signature: '<?php echo $signPackage["signature"];?>', jsApiList: [ // 所有要呼叫的 API 都要加到這個列表中 'onMenuShareTimeline', 'onMenuShareAppMessage' ] }); //分享到朋友圈 wx.ready(function () { wx.onMenuShareTimeline({ title: '吾愛破解論壇,微信JSSDK分享學習', link: "修改為當前JS介面安全域名下的頁面的自定義URL", imgUrl: 'http://wxpad.cn/editor/php/upload/20181025/1540469570441.png', success: function (res) { alert('已分享到朋友圈'); }, cancel: function (res) { alert('已取消分享'); }, fail: function (res) { alert(JSON.stringify(res)); } }) //分享給朋友 wx.onMenuShareAppMessage({ title: "吾愛破解論壇,微信JSSDK分享學習", // 分享標題 desc: "學破解,學技術,就來吾愛破解論壇!", // 分享描述 link: "修改為當前JS介面安全域名下的頁面的自定義URL", // 分享連結 imgUrl: "http://wxpad.cn/editor/php/upload/20181025/1540469570441.png", // 分享圖示 type: '', // 分享型別,music、video或link,不填預設為link dataUrl: '', // 如果type是music或video,則要提供資料鏈接,預設為空 success: function () { // 使用者確認分享後執行的回撥函式 }, cancel: function () { // 使用者取消分享後執行的回撥函式 } }); }); alert(location.href.split('#')[0]) </script> </html>
大概就這樣就可以config:ok了
當然,開發過程中需要設定IP白名單,JS介面安全域名。