微信JSSDK分享，解決config:invalid signature問題

時間 2019-11-16

標籤微信 jssdk 分享解決 config invalid signature 問題简体版

原文原文鏈接

微信JSSDK分享能夠實現本身的網頁在微信自定義圖標，標題，還有描述，還能夠分享到朋友圈，分享到微信羣，分享給朋友等操做。php

上圖就是，左側是分享到朋友圈，右側是分享到微信羣。html

不少開發者下載官方的demo進行開發，最後debug的時候，顯示的是config:invalid signature
，這個緣由其實頗有多是簽名不一致。mysql

咱們須要保持簽名一致，才能完整注入這個權限的。web

通常，簽名不一致的是由於access_token生成的時候，獲取jsapi_ticket的時候有問題形成的，我一開始弄了很久都沒搞對，後來一個個嘗試。算法

我先嚐試生成的一個jsapi_ticket，寫死在頁面，發現沒問題，而後再嘗試獲取access_token寫死在頁面，也沒問題，可是直接在頁面上生成access_token再調用就不行。sql

我就另外寫了一個access.php進行生成access_token，把access_token存入數據庫，搞一個定時任務，每隔1小時生成一個新的access_token，由於access_token僅有2小時有效期，並且天天最多調用2000次，因此我以爲存數據庫是比較好的。數據庫

而後在分享頁面取數據庫的access_token就好了。
下面是生成access_token的代碼json

access.php

<?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);
?>

下面是分享頁面代碼：api

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接口安全域名這些我就很少說了。安全

做者：TANKING
2018-10-25
http://likeyunba.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。