微信JS-SDK投放卡券_踩过的坑

微信对于卡券签名规则说的不准确,并且微信自己的签名算法工具:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign,签名的顺序是错误的,微信对于这部分的文档,多处说明不一致,所以自己总结如下:

一.概念

  • 属于微信网页开发;
  • 在h5页面中使用js方式,调用微信微信js-sdk包中的批量添加卡券接口;
  • 也就是使用h5的方式投放卡券;
  • 什么是自定义code,什么是预存code模式,什么是可导入code,请查看我的另一篇文章:自定义code卡券

二.准备工作

  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    备注:登录后可在“开发者中心”查看对应的接口权限。


    微信JS-SDK投放卡券_踩过的坑_第1张图片
    image.png
  • 下载 MP_verify_....txt到开发者服务器;

三.调用微信js-sdk接口

  • 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
    image.png
  • 在前台页面通过config接口注入权限验证配置(签名),页面初始化触发
    sample.php内容
  |getSignPackage(1);                                                                            
@|?>
@|
@|
@|
@|  
@|  js-sdk-测试
@|                                                                                              
@|                                                 
@|
@|                                                                  
@|    
@|
@|                                               
@|

  • 以上微信卡券签名:
 $cardArr['cardId'] = 'pNKvmjpkxUXWAtHxdjbE8dvFzNP4';                                                       
          $cardArr['code'] = '123456';   
          $cardSign = $jssdk->getSignPackage(2,$cardArr);                                                            
         $timestamp = $cardSign["timestamp"];                                                                       
         $signature = $cardSign["signature"];                                                                       
          $nonceStr = $cardSign["nonceStr"];                                                                         
         ?>

 cardId: 'pNKvmjpkxUXWAtHxdjbE8dvFzNP4',                                                                                                 
 cardExt: '{"code":"123456","timestamp":"","signature":"","nonce_str":""}

要保持code和cardId一致,并且cardExt=字符串方式,在卡券创建时候使用的是预存或非自定义code的时候,code参数无需指定,否则签名失败

四.签名说明

  • 本例中在 jssdk.php中做的签名(也是官方的demo)
  • 我在签名方法 getSignPackage中添加了两个参数,type=1:普通js_sdk,2:微信卡券js_sdk,
  • 因为调用微信js-sdk卡券接口,需要有额外的签名,也就是说调用普通的js-sdk接口只需要在页面初始化的时候使用wx.config签名即可,但是如果调用js-sdk微信卡券接口,需要在调用的时候做一次针对微信卡券接口的签名;
  • 所以调用微信js-sdk卡券接口,需要做两次签名
    第一次:js-sdk签名
    第二次:微信卡券js-sdk签名
    因为两次的签名算法不一样
  1 appId = $appId;                                                                    
  8     $this->appSecret = $appSecret;                                                            
  9   }                                                                                           
 10                                                                                               
 11   /**                                                                                         
 12   * type 1:普通js_sdk,2:微信卡券js_sdk                                                        
 13   */                                                                                          
 14   public function getSignPackage($type,$cardArrs=array()) {                                   
 15     $jsapiTicket = $this->getJsApiTicket($type);                                              
 16                                                                                               
 17     // 注意 URL 一定要动态获取,不能 hardcode.                                                
 18     $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "httt
    ps://" : "http://";
 19     $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";                               
 20                                                                                               
 21     $timestamp = time();                                                                      
 22     $nonceStr = $this->createNonceStr();                                                      
 23                                                                                               
 24     if($type==1)                                                                              
 25     {                                                                                         
 26         // 普通js-jsk签名规则                                   
 27         $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
 28     }else                                                                                     
 29     {
30         // 微信卡券接口签名规,自定义code,无需导入自定义code
 31         $string = $cardArrs['code'].$timestamp.$nonceStr.$jsapiTicket.$cardArrs['cardId'];
     // 微信卡券接口签名规,自定义code(预存模式)或非自定义code
 32         //$string = $timestamp.$nonceStr.$jsapiTicket.$cardArrs['cardId'];
 33     }
 34 
 35     $signature = sha1($string);
 36 
 37     $signPackage = array(
 38       "appId"     => $this->appId,
 39       "nonceStr"  => $nonceStr,
 40       "timestamp" => $timestamp,
 41       "url"       => $url,
 42       "signature" => $signature,
 43       "rawString" => $string
 44     );
 45     return $signPackage;
 46   }
 47 
 48   private function createNonceStr($length = 16) {
 49     $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 50     $str = "";
 51     for ($i = 0; $i < $length; $i++) {
 52       $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
 53     }
 54     return $str;
 55   }
 56   //type=1获取普通js-sdk的jsapi_ticket,存放到jsapi_ticket.php中
      //type=2获取微信卡券js-sdk的api_ticket,存放到wxcardapi_ticket.php中
 57   private function getJsApiTicket($type) {
 58     if($type == 1)
 59     {
60          $typeNew = "jsapi";
 61          $phpFile = "jsapi_ticket.php";
 62     }else
 63     {
 64          $typeNew = "wx_card";
 65          $phpFile = "wxcardapi_ticket.php";
 66     }
 67     // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
 68     $data = json_decode($this->get_php_file($phpFile));
 69     if ($data->expire_time < time()) {
 70       $accessToken = $this->getAccessToken();
 71       // 如果是企业号用以下 URL 获取 ticket
 72       // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
 73       $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=".$typeNew."&access_token=$accessToken";
 74 
 75 /*
 76         if($type==2)
 77         {
 78                 echo $url;
 79         }
 80 */
 81       $res = json_decode($this->httpGet($url));
 82       $ticket = $res->ticket;
 83       if ($ticket) {
 84         $data->expire_time = time() + 7000;
 85         $data->jsapi_ticket = $ticket;
 86         $this->set_php_file($phpFile, json_encode($data));
 87       }
 88     } else {
89       $ticket = $data->jsapi_ticket;
 90     }
 91 
 92     return $ticket;
 93   }
 94 
 95   private function getAccessToken() {
 96     // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
 97     $data = json_decode($this->get_php_file("access_token.php"));
 98     if ($data->expire_time < time()) {
 99       // 如果是企业号用以下URL获取access_token
100       // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
101       $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this--
    >appSecret";
102       $res = json_decode($this->httpGet($url));
103       $access_token = $res->access_token;
104       if ($access_token) {
105         $data->expire_time = time() + 7000;
106         $data->access_token = $access_token;
107         $this->set_php_file("access_token.php", json_encode($data));
108       }
109     } else {
110       $access_token = $data->access_token;
111     }
112     return $access_token;
113   }
114 
115     function httpGet($url, $data = null)
116     {
117         $curl = curl_init();
118         curl_setopt($curl, CURLOPT_URL, $url);
119         curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
120         curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
121         if (!empty($data))//data非空 则是post请求
122         {
123             curl_setopt($curl, CURLOPT_POST, 1);
124             curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
125         }
126         curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
127         $output = curl_exec($curl);
128         curl_close($curl);
129         return $output;
130     }
131 
132   private function get_php_file($filename) {
133     return trim(substr(file_get_contents($filename), 15));
134   }
135   private function set_php_file($filename, $content) {
136     $fp = fopen($filename, "w");
137     fwrite($fp, "" . $content);
138     fclose($fp);
139   }
140 }

签名不稳定

  • 使用以上方式签名通过后,应用到自己的开发项目中,发现在调用wx.addCard,接口的时候,偶尔出现"签名错误"的情况,同样的配置,同样的代码,测试10次,大概会出现4-5次的"签名错误";

  • 我们的页面有很多卡券,如下:


    微信JS-SDK投放卡券_踩过的坑_第2张图片
    image.png
  • 我们签名方式试了两种:

    • 第一:每点击一次 "领券" 签名一次;
      只要满足创建卡券时候每个用户可领张数,用户就可以重复的点击领取;
    • 第二:在页面初始化的时候,将该页面中所有卡券循环签名;
      用户在该页面每中卡券只能领取一次,再次点击会提示"已领取",如果想再次领取,则必须刷新当前页面,统一再次签名一次;
  • "签名错误" 这个不稳定问题,目前还没有解决;

总结

  • 微信网页jsapi_ticket和微信卡券api_ticket不同,获取方式分别是:

    //微信网页jsapi_ticket
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken
    //微信卡券api_ticket
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=wx_card&access_token=$accessToken
    
  • 调用微信卡券js-sdk需要两次签名
    第一次普通js-sdk签名规则:

        //jssdTiken+随机字符串+时间戳+本页面url
        $string = "sapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"
        sha1($string)
    

    第二次微信卡券js-sdk签名规则:

        //自定义code,无需导入自定义code
        //sha1(code码+时间戳+随机串+卡券apiTicket+cardId)
        $string = "$cardArrs['code'].$timestamp.$nonceStr.$jsapiTicket.$cardArrs['cardId'];"
        sha1($string)
        //如果是自定义code(预存模式)或非自定义code,无需传入code
        //sha1(时间戳+随机串+卡券apiTicket+cardId)
        //$string = "$timestamp.$nonceStr.$jsapiTicket.$cardArrs['cardId'];"
        sha1($string)
    
  • 微信卡券签名或参数错误请查看文档:https://mp.weixin.qq.com/s/WhYpWmfuhUBw2wseTXdt2A

  • 点击查看测试代码

你可能感兴趣的:(微信JS-SDK投放卡券_踩过的坑)