摘要:本篇是該系列的第一篇,本地開發(fā)環(huán)境搭建以及接入微信。若確認(rèn)此次請(qǐng)求來自微信服務(wù)器,原樣返回參數(shù)內(nèi)容,則接入生效,成為開發(fā)者成功,否則接入失敗。
一、簡(jiǎn)介
關(guān)于微信公眾號(hào)的介紹就省略了,自行搜索。注冊(cè)過程也不說了。我們會(huì)直接注冊(cè)測(cè)試號(hào)來實(shí)現(xiàn)代碼。這將會(huì)是個(gè)全面講解微信公眾號(hào)開發(fā)的系列教程。本篇是該系列的第一篇,本地開發(fā)環(huán)境搭建以及接入微信。
在開始之前最好去看看開發(fā)者文檔微信公眾平臺(tái)技術(shù)文檔
- MacOs - Node v8.9.1 - Koa22.2 微信公眾平臺(tái)開發(fā)的基本原理
我們先來看看微信公眾平臺(tái)開發(fā)的基本原理:在進(jìn)行微信開發(fā)的時(shí)候,需要在我們?cè)谧约旱姆?wù)器上部署服務(wù)對(duì)微信消息進(jìn)行處理。微信服務(wù)器就相當(dāng)于一個(gè)轉(zhuǎn)發(fā)服務(wù)器。終端(手機(jī)、Pad等)發(fā)起請(qǐng)求至微信服務(wù)器,微信服務(wù)器然后將請(qǐng)求轉(zhuǎn)發(fā)給自定義服務(wù)(這里就是我們的具體實(shí)現(xiàn))。服務(wù)處理完畢,然后轉(zhuǎn)發(fā)給微信服務(wù)器,微信服務(wù)器再將具體響應(yīng)回復(fù)到終端,通信協(xié)議為:HTTP;數(shù)據(jù)格式為:XML。
我們的服務(wù)需要做的就是對(duì)請(qǐng)求做出響應(yīng),解析XML,進(jìn)行相應(yīng)的處理后再返回特定的XML。
這兒我們了解到了接入微信開發(fā)需要一個(gè)自己的響應(yīng)服務(wù)器,我們可以購(gòu)買服務(wù)器或者新浪云百度云之類的服務(wù)。但是在我們開發(fā)階段這樣做是很麻煩的,我們需要搭建一個(gè)好用的本地調(diào)試環(huán)境,將內(nèi)網(wǎng)映射出去,讓外網(wǎng)能夠訪問的。
這兒推薦使用Ngrok服務(wù)。win、mac都能方便使用,而且穩(wěn)定,外網(wǎng)域名是固定的。
打開它的網(wǎng)站https://www.ngrok.cc/注冊(cè)登錄然后開通隧道。同時(shí)你需要下載相應(yīng)的客戶端
在win中這是個(gè)批處理文件,運(yùn)行它然后填入相應(yīng)的隧道id回車即可,在Mac中命令行執(zhí)行如下命令。
./sunny clientid 隧道id
運(yùn)行成功會(huì)返回ngrok換發(fā)域名。
更多參見ngrok官網(wǎng)教程
到此,我們來讓node服務(wù)跑起來,并通過ngrok的域名外網(wǎng)訪問
mkdir koa2-wechat && cd koa2-wechat npm install koa --save
新建app.js
const Koa = require("koa") const app = new Koa() app.use(async ctx => { ctx.body = "JavaScript之禪" }); app.listen(7001);
我們運(yùn)行app.js,將服務(wù)跑起來,瀏覽器打開localhost:7001我們將能夠看見返回了JavaScript之禪。這兒推薦使用supervisor,它會(huì)監(jiān)視你對(duì)代碼的改動(dòng),并自動(dòng)重動(dòng) Node
npm install -g supervisor supervisor app.js
接下來就是用前面講的ngrok進(jìn)行內(nèi)網(wǎng)轉(zhuǎn)發(fā)了
./sunny clientid 隧道id
如果不出問題,你打開你的轉(zhuǎn)發(fā)域名http://.free.ngrok.cc也將看見JavaScript之禪
三、接入微信公眾平臺(tái)開發(fā) 3.1 接入流程接入微信公眾平臺(tái)開發(fā),開發(fā)者需要按照如下步驟完成:
1、填寫服務(wù)器配置
2、驗(yàn)證服務(wù)器地址的有效性
3、依據(jù)接口文檔實(shí)現(xiàn)業(yè)務(wù)邏輯
我們登錄微信公眾平臺(tái)接口測(cè)試帳號(hào)https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,登錄后填寫接口配置信息(你的url地址以及token),這時(shí)肯定不能配置成功的。我們需要驗(yàn)證服務(wù)器地址的有效性,開發(fā)者提交信息后,微信服務(wù)器將發(fā)送GET請(qǐng)求到填寫的服務(wù)器地址URL上,GET請(qǐng)求攜帶參數(shù)如下表所示:
參數(shù) | 描述 |
---|---|
signature | 微信加密簽名,signature結(jié)合了開發(fā)者填寫的token參數(shù)和請(qǐng)求中的timestamp參數(shù)、nonce參數(shù)。 |
timestamp | 時(shí)間戳 |
nonce | 隨機(jī)數(shù) |
echostr | 隨機(jī)字符串 |
開發(fā)者通過檢驗(yàn)signature對(duì)請(qǐng)求進(jìn)行校驗(yàn)。若確認(rèn)此次GET請(qǐng)求來自微信服務(wù)器,原樣返回echostr參數(shù)內(nèi)容,則接入生效,成為開發(fā)者成功,否則接入失敗。加密/校驗(yàn)流程如下:
將token、timestamp、nonce三個(gè)參數(shù)進(jìn)行字典序排序
將三個(gè)參數(shù)字符串拼接成一個(gè)字符串進(jìn)行sha1加密
開發(fā)者獲得加密后的字符串可與signature對(duì)比,標(biāo)識(shí)該請(qǐng)求來源于微信
Talk is cheap. Show me the code
3.2 koa2驗(yàn)證服務(wù)器地址的有效性修改app.js
const Koa = require("koa") const app = new Koa() // 引入node加密模塊進(jìn)行sha1加密 const crypto = require("crypto") const config = { wechat: { appID: "appID", appsecret: "appsecret", token: "zenofjavascript", } } app.use(async ctx => { const { signature, timestamp, nonce, echostr } = ctx.query const token = config.wechat.token let hash = crypto.createHash("sha1") const arr = [token, timestamp, nonce].sort() hash.update(arr.join("")) const shasum = hash.digest("hex") if(shasum === signature){ return ctx.body = echostr } ctx.status = 401 ctx.body = "Invalid signature" }) app.listen(7001)
進(jìn)入測(cè)試號(hào)的頁面重新提交接口配置信息,你將會(huì)看見一個(gè)一閃而過的配置成功過提示框。恭喜,這標(biāo)志著你正式跳進(jìn)了微信開發(fā)的坑了。
GitHub地址 https://github.com/liuxing/ko...
本篇文章到此結(jié)束,下一節(jié)將講解公眾號(hào)的消息回復(fù)功能
參考鏈接微信公眾平臺(tái)開發(fā)者文檔
公眾號(hào)測(cè)試號(hào)
Ngrok
koa
supervisor
大家可以關(guān)注我的公眾號(hào),一起玩耍。有技術(shù)干貨也有扯淡亂談,回復(fù)888還有干貨領(lǐng)取
左手代碼右手磚,拋磚引玉
不說了,吃雞去了???
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/94485.html
摘要:前言根據(jù)慕課網(wǎng)實(shí)現(xiàn)電影微信公眾號(hào)前后端開發(fā)學(xué)習(xí)后的改造由于上下班期間會(huì)看會(huì)小說,但是無奈廣告太多,還要收費(fèi),于是結(jié)合課程,進(jìn)行開發(fā),并上傳到自己的微信小程序。 前言:根據(jù)慕課網(wǎng) Koa2 實(shí)現(xiàn)電影微信公眾號(hào)前后端開發(fā) 學(xué)習(xí)后的改造 由于上下班期間會(huì)看會(huì)小說,但是無奈廣告太多,還要收費(fèi),于是結(jié)合課程,進(jìn)行開發(fā),并上傳到自己的微信小程序。 showImg(https://segment...
摘要:在微信項(xiàng)目的開發(fā)中,經(jīng)常需要對(duì)微信提供的接口進(jìn)行調(diào)試,比如說錄音分享上傳圖像等接口,但是微信要求綁定安全域名才能使用其提供的一系列功能而在開發(fā)環(huán)境中使用或者本地?zé)o法完成域名的認(rèn)證和綁定所以無法在本地調(diào)試。 在微信項(xiàng)目的開發(fā)中,經(jīng)常需要對(duì)微信jssdk提供的接口進(jìn)行調(diào)試,比如說錄音, 分享 ,上傳圖像等接口,但是微信jssdk要求綁定安全域名才能使用其提供的一系列功能 , 而在開發(fā)環(huán)境中...
摘要:本文主要是從前端的角度,使用搭建一個(gè)簡(jiǎn)易的測(cè)試項(xiàng)目,在自己搭建的代理服務(wù)的下實(shí)現(xiàn)簡(jiǎn)單的微信分享。在微信測(cè)試工具中調(diào)試接口,點(diǎn)擊發(fā)送即可會(huì)出現(xiàn)比較漂亮的分享鏈接。 一、背景簡(jiǎn)介: 目前流行的前后端分離項(xiàng)目,一般都處于不同的域名下,前后端開發(fā)過程中,是分別部署在不同服 務(wù)器上,在做接口聯(lián)調(diào)時(shí),會(huì)出現(xiàn)跨域的情況,部署上線時(shí),基本不存在這種需要,因此搭建一個(gè) 前端代理服務(wù),方便開發(fā)。 作為一個(gè)...
摘要:本文主要是從前端的角度,使用搭建一個(gè)簡(jiǎn)易的測(cè)試項(xiàng)目,在自己搭建的代理服務(wù)的下實(shí)現(xiàn)簡(jiǎn)單的微信分享。在微信測(cè)試工具中調(diào)試接口,點(diǎn)擊發(fā)送即可會(huì)出現(xiàn)比較漂亮的分享鏈接。 一、背景簡(jiǎn)介: 目前流行的前后端分離項(xiàng)目,一般都處于不同的域名下,前后端開發(fā)過程中,是分別部署在不同服 務(wù)器上,在做接口聯(lián)調(diào)時(shí),會(huì)出現(xiàn)跨域的情況,部署上線時(shí),基本不存在這種需要,因此搭建一個(gè) 前端代理服務(wù),方便開發(fā)。 作為一個(gè)...
閱讀 3323·2021-11-22 12:04
閱讀 2705·2019-08-29 13:49
閱讀 482·2019-08-26 13:45
閱讀 2238·2019-08-26 11:56
閱讀 998·2019-08-26 11:43
閱讀 587·2019-08-26 10:45
閱讀 1266·2019-08-23 16:48
閱讀 2157·2019-08-23 16:07