nodeJS微信JSDK 配置

nodeJS微信JSDK 配置

一、微信公眾平臺申請一個測驗公眾號

二、配置nodeJS 使用express框架搭建服務器

微信生成簽名步驟：

1.獲取token

2.通過token，獲取jsapi_ticket

3.生成隨機字串,獲取當前時間戳

4.排序拼接生成簽名

• 在routes---->index.js

var express = require('express');
var router = express.Router();
var axios = require('axios');
var sha1 = require('sha1');
var fs = require('fs');

let accessTokenJson = require('../user_token');

const APP_ID = 'wx47159511d53720fb'
const APP_SECRET = 'e8be2675730af8b743769e34fc8a7267'
let config_nonceStr = '' //隨機字串
let config_timestamp = '' //時間戳

/* GET home page. */
router.get('/', function(req, res, next) {
    res.send('這是首頁')
});

router.get('/getWxConfig', function (req, res, next) {
  let url = req.query.url;  // 獲取url
  getToken().then(getTicket).then(ret=>{
    res.json({ // 回傳前端需要的配置config
      success:true,
      code:200,
      config_appid: APP_ID,
      config_sign: signature(ret, url),
      config_timestamp,
      config_nonceStr
    })
  })
});

/*獲取token*/
function getToken(){
  return new Promise((resolve,reject)=>{
    //獲取當前時間 
    var currentTime = new Date().getTime();
    if (accessTokenJson.access_token === '' || accessTokenJson.expires_time < currentTime){
      axios.get('https://api.weixin.qq.com/cgi-bin/token',{
        params:{
          appid: APP_ID,
          secret: APP_SECRET,
          grant_type: 'client_credential'
        }
      }).then(res=>{
        accessTokenJson.access_token = res.data.access_token;
        accessTokenJson.expires_time = new Date().getTime() + (parseInt(res.data.expires_in) - 200) * 1000;
        //更新本地存盤
        fs.writeFile('../user_token.json', JSON.stringify(accessTokenJson));
        resolve(accessTokenJson.access_token)
      }).catch(err => {
        return Promise.reject(err);
      })
    }else{
      resolve(accessTokenJson.access_token)
    }
  })
}

/* 通過token，獲取jsapi_ticket */
function getTicket(accessToken){
  return new Promise((resolve,reject)=>{
    axios.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket', {
      params: {
        type: 'jsapi',
        access_token: accessToken
      }
    }).then(res => {
      resolve(res.data.ticket);
    }).catch(err=>{
      return Promise.reject(err);
    })
  })
}

/**
 * 簽名演算法
 * @param ticket 用于簽名的 jsapi_ticket
 * @param url 用于簽名的 url ，注意必須動態獲取
 * @return sha1演算法加密的字串
 */
function signature(ticket, url){
  config_nonceStr = createNonceStr() // 生成隨機字串
  config_timestamp = createTimestamp() // 獲取當前時間戳
  let ret ={
    jsapi_ticket: ticket,
    nonceStr:config_nonceStr,
    timestamp:config_timestamp,
    url: url,
  }
  var string = raw(ret) // 排序拼接為字串
  console.log(string)
  return sha1(string) // 回傳sha1加密的字串
}

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

/* 獲取當前時間戳 */
function createTimestamp() {
  return parseInt(new Date().getTime() / 1000) + '';
}

/* 排序拼接 */
function raw(args){
  let keys = Object.keys(args).sort(); //獲取args物件的鍵值陣列,并對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）
  let newArgs ={}
  keys.forEach(key=>{
    newArgs[key.toLowerCase()] = args[key];
  })
  let string = '';
  for (let k in newArgs) {// 回圈新物件，拼接為字串
    string +=`&${k}=${newArgs[k]}`
  }
  string = string.substr(1)// 截取第一個字符以后的字串（去掉第一個'&'）
  return string;
}

module.exports = router;

三、使用內網穿透工具（例如：natapp）把本地服務器映射到公網上去

如果有服務器的可以跳過這一步

四、前端使用微信JSDK

使用步驟：

1、系結域名

2、引入JS檔案 http://res2.wx.qq.com/open/js/jweixin-1.4.0.js

vue 專案可以下載模塊 npm i weixin-js-sdk -S

3、配置config

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

4、通過ready介面處理成功驗證，通過error介面處理失敗驗證

5、呼叫微信介面APi

詳情見開發檔案地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

標籤：JavaScript

上一篇：vue-cli3配置webpack-bundle-analyzer插件

下一篇：ThreeJS 3d模型簡介