微信JS-SDK“分享信息設置”API及數字簽名生成方法"

第一步 認證的微信公眾帳號

首先你得擁有一個通過認證了的微信公眾號或者開發者帳號，沒有通過認證的公眾帳號。數字簽名認證也能成功，但是分享信息是無法設置成功的；

 

第二步 添加安全域名

在公眾帳號平台后台添加app運行的域名地址，可以理解為為某個域名添加白名單功能

以我們公司旗下的榕樹下為例：

微信公眾號是：榕樹下，添加了game.4gshu.com為安全域名，那么我在game.4gshu.com上的網頁可以使用榕樹下公眾帳號的數字簽名了

 

第三步 生成數字簽名

在微信公眾平台后台上面能找到一個 appid 及 secret字符串

通過這兩個數據，請求微信提供的兩個公開API地址，生成對應的access_token后再生成ticket再通過規則加密成數字簽名

注意，數字簽名必須在服務端生成，這里我以NodeJS來實現

數字簽名具體生成過程，NodeJS版本

1、獲取微信簽名所需的access_token  

https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid寫在這里&secret=你的secret寫在這里', function(_res) {
               // 這個異步回調里可以獲取access_token
          })

 

 注：前端請求會有跨域請求，最好是后台進行處理，實在不行可以用Postman發起請求

 

2、獲取微信簽名所需的ticket

https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步中獲取的access_token&type=jsapi', function(_res){
         // 這個異步回調里可以獲取ticket
});

 注：前端請求會有跨域請求，最好是后台進行處理，實在不行可以用Postman發起請求

3、生成數字簽名具體方法

ticket、 noncestr、timestamp、url通過微信的規則用sha1加密

noncestr和timestamp在微信官方sample包中有具體的生成方法函數

// noncestr
     var createNonceStr = function() {
          return Math.random().toString(36).substr(2, 15);
     };

      // timestamp
     var createTimeStamp = function () {
          return parseInt(new Date().getTime() / 1000) + '';
     };

也可以參考我代碼中的代碼

// 計算簽名方法
     var calcSignature = function (ticket, noncestr, ts, url) {
          var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;
          shaObj = sha1(str);
          return shaObj;
     }
var signature = calcSignature(ticket, noncestr, timestamp, url);
shai加密文件

　import * as sha1 from 'sha1'

　hex_sha1.hex_sha1(str)

https://blog-static.cnblogs.com/files/chenzxl/sha1.js

4、返回輸出signature數字簽名以及在生成數字簽名時用到的timestamp、nonceStr、url、及appid

因為在客戶內初始化微信JS-SDK中還要用到

 

5、至此數字簽名生成成功

 

wx.config({
        beta: true,
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: 'ww1437b9f5d1f742c6',
        timestamp: _this.timestamp, // 必填，生成簽名的時間戳
        nonceStr: _this.nonceStr, // 必填，生成簽名的隨機串
        signature: _this.signature, // 必填，簽名，見 附錄-JS-SDK使用權限簽名算法
        jsApiList: [
          'checkJsApi',
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'onMenuShareAppMessage',  //舊的接口，即將廢棄
          'onMenuShareTimeline',
          'shareWechatMessage'
        ],
        success: function (res) {
          // 回調
          console.log(res)

        },
        fail: function (res) {
          console.log(res)
          if (res.errMsg.indexOf('function not exist') > -1) {
            alert('版本過低請升級')
          }
        }
      })