Nodejs獲取微信簽名並使用JSSDK

時間  2019-11-16
標籤 nodejs 獲取 微信 簽名 並使 jssdk 简体版
原文   原文鏈接

上一篇咱們講了基本的準備工做，接下來，進入實戰，因爲樓主我並無備案過的域名（窮，沒錢，沒辦法哈），還好, 一直通不過簽名驗證，微信比較人性化，提供測試號，能夠測大部分的接口，而且設置JS接口安全域名,沒有限制，能夠寫任何地址，哪怕是localhost:9999也是能夠的。javascript

一、接口測試號申請

因爲用戶體驗和安全性方面的考慮，微信公衆號的註冊有必定門檻，某些高級接口的權限須要微信認證後才能夠獲取。php

因此，爲了幫助開發者快速瞭解和上手微信公衆號開發，熟悉各個接口的調用，微信推出了微信公衆賬號測試號，經過手機微信掃描二維碼便可得到測試號，在這個測試號裏面能夠模擬各類操做，好比分享啥的，很容易經過驗證。html

微信JSSDK開發文檔前端

進入微信公衆賬號測試號申請系統java

二、獲取 access_token 訪問令牌

access_token（有效期7200秒，開發者必須在本身的服務全局緩存access_token`）node

https請求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
複製代碼

參數說明ios

參數 是否必須 說明
grant_type 是 獲取access_token填寫client_credential
appid 是 第三方用戶惟一憑證
secret 是 第三方用戶惟一憑證密鑰，即appsecret

返回說明web

正常狀況下，微信會返回下述JSON數據包給公衆號：ajax

{"access_token":"ACCESS_TOKEN","expires_in":7200}
複製代碼

實戰項目代碼：redis

獲取 access_token

config/index.json:

api/accessToken.js

// 獲取 access_token
const config = require('../config/index.json'); // 配置數據
const axios = require('axios'); // 請求api
const CircularJSON = require('circular-json');

// (設置 | 獲取)緩存方法
const cache = require('../utils/cache');

module.exports = getAccessToken = (res) => {

  const fetchUrl = `${config.getAccessToken}?grant_type=client_credential&appid=${config.appid}&secret=${config.appsecret}`;
  // console.log(fetchUrl, config);

  // 獲取緩存
  cache.getCache('access_token', function (cacheValue) {
    // 緩存存在
    if (cacheValue) {
      const result = CircularJSON.stringify({
        access_token: cacheValue,
        from: 'cache'
      });
      res.send(result);
    } else {
      // 調取微信api
      axios.get(fetchUrl).then(response => {
        let json = CircularJSON.stringify(response.data);
				res.send(json);
        // 設置緩存
        if (response.data.access_token) {
          cache.setCache('access_token', response.data.access_token)
        }
      }).catch(err => {
        console.log('axios occurs ', err);
      });
    }
  });

};

複製代碼

這裏用的 axios請求微信api，獲取 access_token;

因爲access_token 只有7200秒有效時間，而且限制一天最多調2000 次，因此中控服務器最好做緩存，這裏使用的 node-cache，作了access_token的緩存，而且刪除的緩存的時間也設置的是 7200s，這樣在 access_token失效的時候，node緩存也會被刪除。

utils/cache.js

// node-cache 保存和獲取緩存

const NodeCache = require("node-cache");
const myCache = new NodeCache({
  stdTTL: 7200, // 緩存過時時間
  checkperiod: 120 // 按期檢查時間
});


// 設置緩存
var setCache = function (key, value) {
  // 設置緩存
  myCache.set(key, value, function (err, success) {
    if (!err && success) {
      console.log(key + "保存成功", value);
    }
  });
};

// 獲取緩存
var getCache = function (key, callback) {
  // 讀取緩存
  myCache.get(key, function (err, value) {
    if (!err) {
      if (value) {
        console.log(`存在於緩存中${key}=${value}`);
        callback(value);
      } else {
        console.log(`${key} not found in node-cache`);
        callback();
      }
    } else {
      console.log('get ' + key + ' cache occurs error =', err);
    }
  });
};



module.exports = {
  setCache,
  getCache
}

複製代碼

node-cache只能存活於當前進程裏面，若是當前node命令被重啓，將會從新去請求微信服務器，因此不太適合。

這裏其實最好存在 redis數據庫裏，

路由設置：

app.js

const express = require('express');
const api = require('./api');
const path = require('path');
const app = express();

// accessToken 獲取token
app.get('/getAccessToken', (req, res) => {
  api.accessToken(res);
});

....
複製代碼

結果：

這是第一次請求，access_token從微信服務器獲取最初的數據。

接下來是第二次請求，access_token將會緩存中讀取。

三、獲取 jsapi_ticket臨時票據

生成簽名以前必須先了解一下jsapi_ticket，jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常狀況下，jsapi_ticket的有效期爲7200秒，經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限，頻繁刷新jsapi_ticket會致使api調用受限，影響自身業務，開發者必須在本身的服務全局緩存jsapi_ticket。

用上一步拿到的access_token採用http GET方式請求得到jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）：<https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi>

成功返回以下JSON：

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd841ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUWvsdshFKA",
"expires_in":7200
}
複製代碼

得到jsapi_ticket以後，就能夠生成JS-SDK權限驗證的簽名了。

回到以前說的那個Nodejs + Express項目中：

api/jsapiTicket.js

// 經過 access_token 獲取 jsapi_ticket 臨時票據
const axios = require('axios'); // 請求api
const CircularJSON = require('circular-json');
const config = require('../config/index.json');
const cache = require('../utils/cache');


module.exports = get_jsapi_ticket = (access_token, res) => {

  const fetchUrl = config.getJsapiTicket + access_token;
  console.log('>>>>', fetchUrl)
  // 判斷是否存在於緩存中
  const cacheName = "jsapi_ticket";
  cache.getCache(cacheName, function (cacheValue) {
    if (cacheValue) {
      const result = CircularJSON.stringify({
        ticket: cacheValue,
        from: 'cache'
      });
      res.send(result);
    } else {
      // 調取微信api
      axios.get(fetchUrl).then(response => {
        let json = CircularJSON.stringify(response.data);
        // promise
        res.send(json);
        // 設置緩存
        if (response.data.ticket) {
          cache.setCache(cacheName, response.data.ticket)
        }
      }).catch(err => {
        // console.log('axios occurs ', err);
      });
    }
  });

}

複製代碼

路由設置：

const express = require('express');
const api = require('./api');
const path = require('path');
const app = express();
//express請求別的路由中間件
require('run-middleware')(app);

// 獲取 jsapi_ticket 臨時票據
app.get('/getTicket', (req, res) => {
  app.runMiddleware('/getAccessToken', function (code, body, headers) {
    const result = JSON.parse(body);
    console.log('User token:', result.access_token);
    api.jsapiTicket(result.access_token, res);
  })
});

....
複製代碼

這裏比較特殊的地方，是用 run-middleware 這個 npm package，從一個路由去直接請求另一個路由的數據。

這樣避免重複不少邏輯。咱們直接請求路由獲取上一步的 access_token;

廢話很少說，運行一下：

第一次，是從微信服務器獲取 ticket

第二次，從緩存中：

至此，咱們獲取到了 jsapi_ticker;

得到jsapi_ticket以後，就能夠生成JS-SDK權限驗證的簽名了

四、增長簽名算法獲取微信簽名

簽名算法

簽名生成規則以下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這裏須要注意的是全部參數名均爲小寫字符。對string1做sha1加密，字段名和字段值都採用原始值，不進行URL 轉義。

說明：

noncestr隨機字符串，通常本身生成

jsapi_ticket 從微信服務器或者本身的緩存中

timestamp時間戳本身生成

url當前頁面的url，必定要動態獲取，千萬不要 hardcode

而後再按照字典排序，進行排序 jsapi_ticket&noncestr&timestamp&url

最後sha1 加密

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
複製代碼

步驟1. 對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
複製代碼

步驟2. 對string1進行sha1簽名，獲得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed
複製代碼

注意事項

1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

2.簽名用的url必須是調用JS接口頁面的完整URL。

3.出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

如出現invalid signature 等錯誤詳見附錄常見錯誤及解決辦法

代碼以下：

/** * 獲取簽名 * @returns: * 1. appId 必填，公衆號的惟一標識 * 2. timestamp 必填，生成簽名的時間戳 * 3. nonceStr 必填，生成簽名的隨機串 * 4. signature 必填，簽名 */
const crypto = require('crypto');
const config = require('../config/index.json');

// sha1加密
function sha1(str) {
  let shasum = crypto.createHash("sha1")
  shasum.update(str)
  str = shasum.digest("hex")
  return str
}

/** * 生成簽名的時間戳 * @return {字符串} */
function createTimestamp() {
  return parseInt(new Date().getTime() / 1000) + ''
}

/** * 生成簽名的隨機串 * @return {字符串} */
function createNonceStr() {
  return Math.random().toString(36).substr(2, 15)
}

/** * 對參數對象進行字典排序 * @param {對象} args 簽名所需參數對象 * @return {字符串} 排序後生成字符串 */
function raw(args) {
  var keys = Object.keys(args)
  keys = keys.sort()
  var newArgs = {}
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key]
  })

  var string = ''
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k]
  }
  string = string.substr(1)
  return string
}


module.exports = getSign = (params, res) => {

  /** * 簽名算法 * 簽名生成規則以下： * 參與簽名的字段包括noncestr（ 隨機字符串）, * 有效的jsapi_ticket, timestamp（ 時間戳）, * url（ 當前網頁的URL， 不包含# 及其後面部分）。 * 對全部待簽名參數按照字段名的ASCII 碼從小到大排序（ 字典序） 後， * 使用URL鍵值對的格式（ 即key1 = value1 & key2 = value2…） 拼接成字符串string1。 * 這裏須要注意的是全部參數名均爲小寫字符。 對string1做sha1加密， 字段名和字段值都採用原始值， 不進行URL 轉義。 */
  var ret = {
    jsapi_ticket: params.ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: params.url
  };
  console.log(params, ret);
  var string = raw(ret)
  ret.signature = sha1(string)
  ret.appId = config.appid;
  console.log('ret', ret)
  res.send(ret);
}

複製代碼

路由設置：

const express = require('express');
const api = require('./api');
const path = require('path');
const app = express();
//express請求別的路由中間件
require('run-middleware')(app);

//獲取簽名
app.get('/sign', (req, res) => {
  const params = {};
  console.log(req.query)
  params.url = req.query.url;
  /*** * runMiddleware 請求別的 endPoint 獲取 jsapi_ticket */
  app.runMiddleware('/getTicket', function (code, body, headers) {
    const result = JSON.parse(body);
    console.log('User ticket:', result.ticket);
    params.ticket = result.ticket;
    api.getSign(params, res);
  });

});

....

複製代碼

postman 請求以下：

這樣我就獲取了 簽名 等一系列數據。

五、JSSDK 使用

微信JS-SDK說明文檔

步驟一：綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

備註：登陸後可在「開發者中心」查看對應的接口權限。

步驟二：引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

如需進一步提高服務穩定性，當上述資源不可訪問時，可改訪問：res2.wx.qq.com/open/js/jwe… （支持https）。

備註：支持使用 AMD/CMD 標準模塊加載方法加載

步驟三：經過config接口注入權限驗證配置

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});
複製代碼

步驟四：經過ready接口處理成功驗證

wx.ready(function(){
    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});
複製代碼

實戰代碼以下：

// promise
const getSignPromise = new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', location.origin + '/sign?url=' + location.href, true);
  xhr.send();
  xhr.onload = () => {
    if (xhr.readyState === xhr.DONE) {
      if (xhr.status === 200) {
        const result = JSON.parse(xhr.response);
        console.log(result);
        resolve(result);
      }
    }
  }
});

// 分享
getSignPromise.then(res => {
  getWeShare(res);
});

/*** * 微信分享 */
const getWeShare = (params) => {
  wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: params.appId, // 必填，公衆號的惟一標識
    timestamp: params.timestamp, // 必填，生成簽名的時間戳
    nonceStr: params.nonceStr, // 必填，生成簽名的隨機串
    signature: params.signature, // 必填，簽名
    jsApiList: [
      'checkJsApi',
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'hideMenuItems',
      'chooseImage',
      'updateAppMessageShareData',
      'scanQRCode'
    ] // 必填，須要使用的JS接口列表
  });

  wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用
    const data = {
      title: '測試JSSDK', // 分享標題
      desc: '後端端口簽名測試', // 分享描述
      link: location.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: 'http://www.***.cf/img/share.JPG', // 分享圖標
      success: function () {
        // 設置成功
      }
    }
    wx.onMenuShareTimeline(data);
    wx.onMenuShareAppMessage(data);
  });
}

// 打開相冊
document.getElementById('chooseImage').addEventListener('click', function (params) {
  wx.chooseImage({
    count: 1, // 默認9
    sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
    success: function (res) {
      var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
      console.log(localIds);
    }
  });
  wx.scanQRCode({
    needResult: 0, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
    scanType: ["qrCode", "barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
    success: function (res) {
      var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
    }
  });
})

複製代碼

頁面寫好以後, 咱們能夠在 微信開發者工具裏面看到：

咱們也能夠打開測試公衆號，在裏面調試，不然，咱們沒有權限調取 js 接口

至此，已經算是成功開發了，其餘接口再也不作嘗試。

六、附錄

調用config接口的時候傳入參數 debug: true 能夠開啓debug模式，頁面會alert出錯誤信息。如下爲常見錯誤及解決方法：

1.invalid url domain當前頁面所在域名與使用的appid沒有綁定，請確認正確填寫綁定的域名，僅支持80（http）和443（https）兩個端口，所以不須要填寫端口號（一個appid能夠綁定三個有效域名，見 ]目錄1.1.1）。

2.·invalid signature簽名錯誤。建議按以下順序檢查：

1.確認簽名算法正確，可用mp.weixin.qq.com/debug/cgi-b… 頁面工具進行校驗。

2.確認config中nonceStr（js中駝峯標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。

3.確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'後面的GET參數部分,但不包括'#'hash後面的部分。

4.確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。

5.確保必定緩存access_token和jsapi_ticket。

6.確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。若是是html的靜態頁面在前端經過ajax將url傳到後臺簽名，前端須要用js獲取當前頁面除去'#'hash部分的連接（可用location.href.split('#')[0]獲取,並且須要encodeURIComponent），由於頁面一旦分享，微信客戶端會在你的連接末尾加入其它參數，若是不是動態獲取當前連接，將致使分享後的頁面簽名失敗。

3.the permission value is offline verifying這個錯誤是由於config沒有正確執行，或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按以下順序檢查：

1.確認config正確經過。

2.若是是在頁面加載好時就調用了JSAPI，則必須寫在wx.ready的回調中。

3.確認config的jsApiList參數包含了這個JSAPI。

4.permission denied該公衆號沒有權限使用這個JSAPI，或者是調用的JSAPI沒有傳入config的jsApiList參數中（部分接口須要認證以後才能使用）。

5.function not exist當前客戶端版本不支持該接口，請升級到新版體驗。

6.爲何6.0.1版本config:ok，可是6.0.2版本以後不ok（由於6.0.2版本以前沒有作權限驗證，因此config都是ok，但這並不意味着你config中的簽名是OK的，請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。）

7.在iOS和Android都沒法分享（請確認公衆號已經認證，只有認證的公衆號才具備分享相關接口權限，若是確實已經認證，則要檢查監聽接口是否在wx.ready回調函數中觸發）

8.服務上線以後沒法獲取jsapi_ticket，本身測試時沒問題。（由於access_token和jsapi_ticket必需要在本身的服務器緩存，不然上線後會觸發頻率限制。請確保必定對token和ticket作緩存以減小2次服務器請求，不只能夠避免觸發頻率限制，還加快大家本身的服務速度。目前爲了方便測試提供了1w的獲取量，超過閥值後，服務將再也不可用，請確保在服務上線前必定全局緩存access_token和jsapi_ticket，二者有效期均爲7200秒，不然一旦上線觸發頻率限制，服務將再也不可用）。

9.uploadImage怎麼傳多圖（目前只支持一次上傳一張，多張圖片需等前一張圖片上傳以後再調用該接口）

10.無法對本地選擇的圖片進行預覽（chooseImage接口自己就支持預覽，不須要額外支持）

11.經過a連接(例如先經過微信受權登陸)跳轉到b連接，invalid signature簽名失敗（後臺生成簽名的連接爲使用jssdk的當前連接，也就是跳轉後的b連接，請不要用微信登陸的受權連接進行簽名計算，後臺簽名的url必定是使用jssdk的當前頁面的完整url除去'#'部分）

12.出現config:fail錯誤（這是因爲傳入的config參數不全致使，請確保傳入正確的appId、timestamp、nonceStr、signature和須要使用的jsApiList）

13.如何把jsapi上傳到微信的多媒體資源下載到本身的服務器（請參見文檔中uploadVoice和uploadImage接口的備註說明）

14.Android經過jssdk上傳到微信服務器，第三方再從微信下載到本身的服務器，會出現雜音（微信團隊已經修復此問題，目先後臺已優化上線）

15.綁定父級域名，是否其子域名也是可用的（是的，合法的子域名在綁定父域名以後是徹底支持的）

16.在iOS微信6.1版本中，分享的圖片外鏈不顯示，只能顯示公衆號頁面內鏈的圖片或者微信服務器的圖片，已在6.2中修復

17.是否須要對低版本本身作兼容（jssdk都是兼容低版本的，不須要第三方本身額外作更多工做，但有的接口是6.0.2新引入的，只有新版纔可調用）

18.該公衆號支付簽名無效，沒法發起該筆交易（請確保你使用的jweixin.js是官方線上版本，不只能夠減小用戶流量，還有可能對某些bug進行修復，拷貝到第三方服務器中使用，官方將不對其出現的任何問題提供保障，具體支付簽名算法可參考 JSSDK微信支付一欄）

19.目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題已在Android6.2中修復

20.uploadImage在chooseImage的回調中有時候Android會不執行，Android6.2會解決此問題，若需支持低版本能夠把調用uploadImage放在setTimeout中延遲100ms解決

21.require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現

22.getLocation返回的座標在openLocation有誤差，由於getLocation返回的是gps座標，openLocation打開的騰訊地圖爲火星座標，須要第三方本身作轉換，6.2版本開始已經支持直接獲取火星座標

23.查看公衆號（未添加）: "menuItem:addContact"不顯示，目前僅有從公衆號傳播出去的連接才能顯示，來源必須是公衆號

24.ICP備案數據同步有一天延遲，因此請在第二日綁定

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程