微信JSSDK分享，解决config:invalid signature问题

微信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的代码

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

下面是分享页面代码：

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

微信JSSDK分享，解决config:invalid signature问题

access.php

index.php

其实这个问题很容易排除

TANKING

引用和评论

使用角钢diy了一个nas机箱，材料成本21元！旧笔记本电脑发挥余热！搭载飞牛nas（fnOS国产nas系统）

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号