微信JSSDK與NodeJS深度整合

對於作H5手機端的同窗來講，微信是個必不可少的入口，天然而然咱們須要調用微信提供給H5或者說JS的各類接口，咱們也要根據微信的要求去作各類簽名驗證，才能最終到達咱們的需求，GITHUB上面也有不少關於這方面的庫能夠用，可是他們老是或多或少的不能徹底知足需求，或者說是又要付出不少額外的開發，所以呢，我本身也是開發了一個庫wechat-jssdk去最大化的知足微信JSSDK有的功能，此庫只關注jssdk所提供的功能，並提供服務端(NodeJS)各類驗籤支持，而且自動化管理各類token，ticket的過時處理，讓開發者能更多的關注業務自己。 好了，說完了WHY, 下面介紹HOW： 先上個demo圖：

主要功能集合

• 💓服務端
• 💗瀏覽器端
• 🔓OAuth網頁受權
• 🍟微信卡券
• 💳微信支付
• 💿使用Stores
• 🎥完整 Demo

使用方法

npm install wechat-jssdk --save
或
yarn add wechat-jssdk

//require並初始化
const Wechat = require('wechat-jssdk');
const wx = new Wechat(wechatConfig); 
複製代碼

Wechat Config

wechatConfig 爲如下格式:

{
  //第一個爲設置網頁受權回調地址
  wechatRedirectUrl: "http://yourdomain.com/wechat/oauth-callback", 
  wechatToken: "xxx", //可選，第一次在微信控制檯保存開發者配置信息時使用
  appId: "xxx",
  appSecret: "xxx",
  card: true, //開啓卡券支持，默認關閉
  payment: true, //開啓支付支持，默認關閉
  merchantId: '', //商戶ID
  paymentSandBox: true, //沙箱模式，驗收用例
  paymentKey: '', //必傳，驗籤密鑰，TIP:獲取沙箱密鑰也須要真實的密鑰，因此即便在沙箱模式下，真實驗籤密鑰也須要傳入。
  //pfx 證書
  paymentCertificatePfx: fs.readFileSync(path.join(process.cwd(), 'cert/apiclient_cert.p12')),
  //默認微信支付通知地址
  paymentNotifyUrl: `http://your.domain.com/api/wechat/payment/`,
}
複製代碼

設置微信環境

1.如今通常直接給個MP_verify_xxx.txt文件放在你網站根目錄，讓微信自動去驗證

2.還須要提供一個API來讓瀏覽器獲取當前地址的簽名

//express風格
router.get('/get-signature', function(req, res) {
  wx.jssdk.getSignature(req.query.url).then(function(signatureDate) {
    res.json(signatureDate);
  });
});

複製代碼

3.獲取簽名後，進入下一步瀏覽器端使用方法.

瀏覽器端

在前端中js:

//ES6
import WechatJSSDK from 'wechat-jssdk/dist/client';
//commonjs
const WechatJSSDK = require('wechat-jssdk/dist/client');
//others
window.WechatJSSDK
//而後實例化:
const wechatObj = new WechatJSSDK(config);
複製代碼

config應該爲:

const config = {
  //前4個是微信驗證簽名必須的參數，第2-4個參數爲相似上面 '/get-signature' 從node端獲取的結果
  'appId': 'xxx',
  'nonceStr': 'xxx',
  'signature': 'xxx',
  'timestamp': 'xxx',
  //下面爲可選參數
  'success': function(wechatObj){}, //微信簽名成功回調函數, 跟 'successCallback' 同樣
  'error': function(err, wechatObj){}, //微信簽名失敗回調函數, 跟 'errorCallback' 同樣
  'debug': true, //開啓 debug 模式
  'jsApiList': [], //設置全部想要使用的微信jsapi列表, 默認值爲 ['onMenuShareTimeline', 'onMenuShareAppMessage']，分享到朋友圈及聊天記錄
  'customUrl': '' //自定義微信js連接
}
複製代碼

驗證簽名成功後, 就能夠自定義你的分享內容了:

//自定義分享到聊天窗口
//內部調用 `wechatObj.callWechatApi('onMenuShareAppMessage', {...})`， 語法糖而已
wechatObj.shareOnChat({
  type: 'link',
  title: 'title',
  link: location.href,
  imgUrl: '/logo.png',
  desc: 'description',
  success: function (){},
  cancel: function (){}
});
//自定義分享到朋友圈
//語法糖
wechatObj.shareOnMoment({
  type: 'link',
  title: 'title',
  link: location.href,
  imgUrl: '/logo.png'
});
複製代碼

要獲取原始的微信對象 wx，能夠經過wechatObj.getOriginalWx()來獲取。
若是第一次驗證失敗，能夠在error回調裏更新簽名信息，並從新發驗證請求：
wechatObj.signSignature(newSignatureConfig);, newSignatureConfig只需包含：

{
  'nonceStr': 'xxx',
  'signature': 'xxx',
  'timestamp': 'xxx',
}
複製代碼

調用其餘微信接口：
wechatObj.callWechatApi(apiName, apiConfig)
apiName和apiConfig請參考微信官方接口文檔

OAuth

默認生成微信受權URL爲 wx.oauth.snsUserInfoUrl 和 wx.oauth.snsUserBaseUrl，其中的默認回調URL爲 wechatConfig 中配置的 wechatRedirectUrl. 你也能夠經過調用 wx.oauth.generateOAuthUrl(customUrl, scope, state)來自定義回調地址

//callback url handler
//如"wechatRedirectUrl"配置爲 "http://127.0.0.1/wechat/oauth-callback", 你的路由須要爲：
router.get('/wechat/oauth-callback', function (req, res) {
  //獲得code，獲取用戶信息
  wx.oauth.getUserInfo(req.query.code)
          .then(function(userProfile) {
            console.log(userProfile)
            res.render("demo", {
              wechatInfo: userProfile
            });
          });
});
複製代碼

TIP: 確保上面的重定向地址域名已經在微信裏的受權回調地址設置裏設置過。

微信卡券

在wechatConfig設置 card: true 來支持卡券功能的服務端支持, 參考demo.
要查看卡券 APIs, 參考 cards apis

微信支付

在wechatConfig設置 payment: true 來支持微信支付功能的服務端支持, 其餘一些支付必須的配置也須要一同設置.
參考 demo.
要查看支付 APIs, 參考 payment apis

使用Stores

Store用來自定義存儲token持久化(如文件，數據庫等待)，實現本身的Store, 請查看API
自帶 Store: FileStore, MongoStore，默認爲FileStore, 存儲到wechat-info.json文件.

APIs

查看 API wiki

Demo

拉項目: git clone git@github.com:JasonBoy/wechat-jssdk.git 拷貝 demo/wechat-config-sample.js 到 demo/wechat-config.js,
而後在裏面裏面修改 appId, appSecret, 及其餘的配置 如支付的其餘配置若是須要使用支付功能的話. 而後 npm start 或 npm run dev, 使用微信開發者工具測試。

結論

好了，大體的使用方法如上，基本知足JSSDK大多數的功能需求，有興趣的能夠去Github試一下。