完成微信小程序卡券投放功能（签名错误）

先说明一下我是用mpvue来写的小程序，但是其实和小程序直接写也差不多，然后后端是使用php（直接面向过程原生写的）。

前端时间接到了一个微信小程序的项目，基本就是卡券投放的功能。之前虽然对小程序接触的不是特别特别深入，但是微信的各种文档好歹还是看过的。之前一直很推崇微信的开发者文档，毕竟是国人的做出来的东西，很多东西很符合国人看文档的习惯，而且对初级开发者很友好了，很多地方又很像vue react之类的，看起来还是非常轻松的。

但是！！这一次卡券投放功能差点就快写自闭了，文档乱七八糟，官方给的很多链接打开却是另一篇文档，看了几十篇文档和别人的文章之后才搞懂一二。

拿到需求，首先先去看微信官方文档https://developers.weixin.qq.com/miniprogram/dev/api/wx.addCard.html

嗯前端就这一个东西，按照官方给的格式书写就好，重点是这里的签名signature，先完成后端然后再完善前端代码

简述一下签名产生流程：

1.使用创建卡券公众号的appid和secret获取access_token（注意是公众号的appid和secret，而不是小程序的），因为access_token每天调用次数有限每次时效2小时，请务必使用某种方法去全局保存access_token

2.使用获取到的access_token去换取ticket（这个ticket是用来参与生成签名的也是有调用次数限制和时效2小时，务必全局保存）

3.按照字典序排序以下参数   必填参数：ticket（步骤2中换取的） timestamp（当前时间戳）nonce_str（不超过32位的随机字符串） card_id（要投放的卡券的卡券id）  选填参数：code（自定义code模式下填写） openid（指定领取者的情况下填写）

4.将3.中字典序排序完成之后的参数进行字符串拼接然后使用sha1加密，即为前端需要用到的signature

 

第一步后端代码如下

$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $appid . "&secret=" . $secret . "";

$ch = curl_init();

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$result = curl_exec($ch);

curl_close($ch);

$result = json_decode($result);

这样便获取到了access_token，保存在$result中

第二步后端代码如下

//$access即为access_token

$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $access .'&type=wx_card';

$ch = curl_init();

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$result = curl_exec($ch);

curl_close($ch);

$result = json_decode($result);

此时的$result即为使用access_token换取到的ticket

第三步与第四步后端代码如下

$strs="QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm";

$nonce=substr(str_shuffle($strs),mt_rand(0,strlen($strs)-11),32);

$ticket = $_GET['ticket'];

$cardid = $_GET['cardid'];

$time = time();

$arr['timestamp'] = $time;

$arr['ticket'] = $ticket;

$arr['nonce_str'] = $nonce;

$arr['card_id'] = $cardid;

sort($arr,SORT_STRING);

$str = '';

foreach ($arr as $v) {

    $str .= $v;

}

$sign = sha1($str);

此时的$sign即为前端投放卡券所需要的signature

切记！这里参与签名所使用到的timestamp nonce_str card_id 也要和signature一起返回给前端

前端代码如下：

wx.addCard({

cardList: [

{

cardId:''+this.wxcard_id +'',

            cardExt:'{"timestamp": "' + that.time1 +'","nonce_str":"'+ that.nonce +'","signature":"'+ that.signature +'"}'

        }

],

})

这里的timestamp nonce_str cardId即为后端生成签名的时候所使用到的参数

然后就可以正常投放卡券了，我被 签名错误 这个问题卡了好久，下面讲一下可能出现签名错误的几种情况和解决方法

微信提供的卡券接口

这里就有一个小坑了，点进去微信卡券接口文档有一句话是这样的

2.3. 以小程序AppId调用添加/查看卡券JS-API，签名参数与公众号Addcard/Opencard JS-SDK一致；

大家看见JS-API，可能就会先获取access-token然后换取jsticket就会使用下面这个url

 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $access .'&type=jsapi

但是注意！！微信卡券的ticket与正常js_api不同，这里一定要把url后的type改成wx_card

 

然后给大家一个测试卡券签名是否正确的链接吧，大家可以测试一下签名错误的时候是否是由于生成签名错误导致

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign

如果这个url下生成的签名和你后端生成的签名一模一样，且参与签名的ticket没有过期，那就是前端的问题了

如果后端参与签名的有 timestamp nonce_str openid 那前端caedExt中也需要有这几个参数，换句话说就是有几个参数在后端参与了生成签名，那就得在前端也得写入。基本就是这样了！good luck！！！