基于koa實(shí)現(xiàn)的微信JS-SDK調(diào)用Demo

介紹使用koa框架實(shí)現(xiàn)的一個(gè)微信 JS-SDK 調(diào)用示例

前置準(zhǔn)備

koa項(xiàng)目開發(fā)

Demo 本地調(diào)試

視頻演示

注意事項(xiàng)

參考資料

前置準(zhǔn)備

一個(gè)測(cè)試公眾號(hào)

一臺(tái)服務(wù)器(帶域名)

登錄測(cè)試公眾號(hào)后臺(tái)添加JS安全域名

koa項(xiàng)目開發(fā)

微信JS-SDK權(quán)限驗(yàn)證的簽名必須在服務(wù)器端實(shí)現(xiàn)，簽名用的url必須是調(diào)用JS接口頁面的完整URL，所以這里決定用koa來同時(shí)完成頁面渲染及生成簽名所需驗(yàn)證配置。

項(xiàng)目依賴庫如下：

koa-router

request-promise

koa-views

koa-static

koa2-cors

memory-cache

sha1

下面介紹一下核心的簽名方法：

主要就是請(qǐng)求全局token后獲取jsapi_ticket來獲取簽名。

const config = require('./config'); async function sign(url) { let sig = {}, noncestr = config.noncestr, timestamp = Math.floor(Date.now() / 1000), //精確到秒 jsapi_ticket; if (cache.get('ticket')) { jsapi_ticket = cache.get('ticket'); sig = { appId: config.appid, noncestr: noncestr, timestamp: timestamp, url: url, jsapi_ticket: jsapi_ticket, signature: sha1( 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url ), }; } else { // 獲取 token let tokenRes = await rp({ uri: config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret, }); tokenRes = JSON.parse(tokenRes); // 獲取 ticket let ticketRes = await rp({ uri: config.ticketUrl + '?access_token=' + tokenRes.access_token + '&type=jsapi', }); var ticketMap = JSON.parse(ticketRes); // 加入緩存 cache.put('ticket', ticketMap.ticket, config.cache_duration); sig = { appId: config.appid, noncestr: noncestr, timestamp: timestamp, url: url, jsapi_ticket: ticketMap.ticket, signature: sha1( 'jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url ), }; } return sig; }

之后我們只要在koa的router中定義一個(gè)路由去生成簽名就行了

router.get('/sig', async (ctx, next) => { try { //獲取當(dāng)前url let url = ctx.request.protocol + '://' + ctx.request.host + ctx.request.originalUrl; if (ctx.query.url) { url = ctx.query.url; } ctx.data = await sign(url); } catch (e) { console.log(e); } await next(); });

demo 頁面我們可以使用 koa-views 及 ejs 來渲染：

頁面放到 views 目錄

頁面需要引用的css及js可以放到 static 目錄下面

參考代碼如下：

const views = require('koa-views'); const static = require('koa-static'); app.use(static(path.join(__dirname, './static'))); app.use( views(path.join(__dirname, './views'), { extension: 'ejs', }) );

views 目錄下新建頁面 index.ejs，寫入 sdk 調(diào)用前端 demo 頁面，主要內(nèi)容如下：

引入 jweixin-1.6.0.js 文件

通過config接口注入權(quán)限驗(yàn)證配置

wx.config({ debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。 appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí) timestamp: , // 必填，生成簽名的時(shí)間戳 nonceStr: '', // 必填，生成簽名的隨機(jī)串 signature: '',// 必填，簽名，見附錄1 jsApiList: [] // 必填，需要使用的JS接口列 });

ready接口處理成功驗(yàn)證

wx.ready(function(){ //config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。 });

error接口處理失敗驗(yàn)證

wx.error(function(res){ //config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。 });

完整頁面代碼如下：

至此我們就完成了一個(gè)簡易的koa版調(diào)用Demo了，下面我們來測(cè)試一下

Demo 本地調(diào)試

一般我們有內(nèi)網(wǎng)穿透、代理劫持等幾種方法去進(jìn)行本地調(diào)試，這里我們使用一個(gè)比較常用的方法內(nèi)網(wǎng)穿透(用你自己熟練的方法就好)來測(cè)試。

修改項(xiàng)目根目錄下的 config.js，換成自己公眾號(hào)的appid及secrect

在項(xiàng)目根目錄執(zhí)行node app.js啟動(dòng)服務(wù)后瀏覽器打開如下地址 http://localhost:4000/ 即可看到 Demo 頁面

在前置準(zhǔn)備中我們?cè)O(shè)置了一個(gè)JS接口安全域名，可以基于這個(gè)域名做穿透服務(wù)來訪問我們本地koa項(xiàng)目，添加公網(wǎng)端口映射本地koa項(xiàng)目的端口(這里的例子是4000)，然后瀏覽器訪問JS接口安全域名即可看到 Demo 頁面

使用微信打開JS接口安全域名即可測(cè)試使用

項(xiàng)目代碼獲取：極客之路公眾號(hào)后臺(tái)回復(fù) koa-wx-js-sdk 即可獲取

視頻演示

以下是測(cè)試視頻地址，僅供參考

https://www.bilibili.com/video/BV1N64y1x78m

注意事項(xiàng)

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

簽名用的url必須是調(diào)用JS接口頁面的完整URL。

出于安全考慮，開發(fā)者必須在服務(wù)器端實(shí)現(xiàn)簽名的邏輯。

參考資料

JS-SDK說明文檔(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)

官方DEMO頁面(https://www.weixinsxy.com/jssdk/)

koa2實(shí)現(xiàn)靜態(tài)資源服務(wù)器(http://xuedingmiao.com/blog/koa_static_server.html)

測(cè)試公眾號(hào)后臺(tái)(https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index)

API/SDK Koa

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。