基於Koa.js的微信工具類小記

evont發表於2019-02-27
JS

關於微信公眾號開發和小程式開發的教程其實網上已經有很多了，但是基於koa.js 開發的教程其實不多，於是接下來對踩坑的經歷做一些小結；

自己也寫了一個微信工具類，專案地址是微信工具類

目錄結構

微信網頁授權

1. 獲取Access_token

access_token是公眾號的全域性唯一介面呼叫憑據，公眾號呼叫各介面時都需使用access_token。開發者需要進行妥善儲存。access_token的儲存至少要保留512個字元空間。access_token的有效期目前為2個小時，需定時重新整理，重複獲取將導致上次獲取的access_token失效。

介面呼叫請求說明

`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appsecret}`
複製程式碼
引數 必須 說明
grant_type 是 授權型別，獲取access_token填寫client_credential
appid 是 使用者唯一憑證
appsecret 是 使用者唯一憑證金鑰

2. 獲取api_ticket

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用於呼叫微信JS介面的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由於獲取jsapi_ticket的api呼叫次數非常有限，頻繁重新整理jsapi_ticket會導致api呼叫受限，影響自身業務，開發者必須在自己的服務全域性快取jsapi_ticket 。

介面呼叫請求說明

`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`
複製程式碼
引數 必須 說明
access_token 是 從上一步中獲取或者快取中未過期的access_token
type 是 填寫為jsapi

3. 獲取signature

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

  1. noncestr 實現方式
getNonceStr() {
  let text = ``;
  const possible = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789`;
  for (let i = 0; i < 16; i += 1) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}
複製程式碼
  1. timestamp 實現方式
getTimestamp() {
  return (`${new Date().valueOf()}`).slice(0, -3);
}
複製程式碼
  1. 加密方式
const crypto = require(`crypto`);
// ...
getSign(apiTicket, noncestr, timestamp, url) {
  const sortData = `jsapi_ticket=${apiTicket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${url}`;
  return crypto.createHash(`sha1`).update(sortData).digest(`hex`);
}
複製程式碼

4. 注入許可權驗證配置

一、 在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：
res.wx.qq.com/open/js/jwe…

二、所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫

wx.config({
  debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
  appId: ``, // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: ``, // 必填，生成簽名的隨機串
  signature: ``,// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS介面列表
});
複製程式碼

小程式授權

// 一個存放小程式對應的appid 和secret的物件，這裡可以實現為存放在資料，演示說明則簡略
const miniGameMap = {
  app: {
    appid: `...`,
    appsecret: `...`,
  }
}
getMiniLoginData(code, appName) {
    const appInfo = miniGameMap[appName];
    let result = {
      errcode: 40029,
      errMsg: `無效的小程式資訊`,
    };

    if (appInfo) {
      const miniappid = appInfo.appid;
      const miniappsecret = appInfo.appsecret;
      const reqUrl = `https://api.weixin.qq.com/sns/jscode2session?appid=${miniappid}&secret=${miniappsecret}&js_code=${code}&grant_type=authorization_code`;
      // HttpClient 可以替換為自定義的請求庫，不做限制
      result = HttpClient.request(reqUrl).then(HttpClient.responseAdapter);
    }

    return result;
  }
複製程式碼

參考網址

微信JS-SDK說明文件

微信公眾平臺介面除錯工具

相關文章