教你如何用node.js開發微信公眾號(一)

西瓜太郎醬發表於2018-11-08

內容簡介

本文章簡單介紹瞭如何用node.js開發微信公眾號。主要內容包括微信公眾平臺的配置,signature的驗證,以及用node.js去處理使用者主動發起的行為。

準備工作

開發前需要安裝好node.js,因為我是基於express框架開發的,所以裝了express(框架按自己的需求選擇),需要有一個微信公眾號,不管是訂閱號還是服務號都可以(沒有的話可以用測試公眾號),還需要一個公網能訪問的伺服器。基本的配置就這些,後面有需要的再補充。接下來,開始講如何開發。

一、微信公眾平臺配置

登入微信公眾平臺,沒有公眾號的話註冊一個測試公眾號(不會的點這裡,掃碼登入即可)。 進入到公眾平臺,你會看到如下介面:

教你如何用node.js開發微信公眾號(一)

基本配置

進入到公眾平臺首頁,首先會有一個測試號資訊的appID,appsecret;並且appIDappsecret是不可以修改的(自己註冊公眾號的appsecret是可以重置的,操作很簡單,這裡不做說明);

介面配置

介面配置資訊這個模組,首次進來的是空的,需要自己配置;這裡需要配置兩個引數,一個是URL,還有一個是Token;如果不知道怎麼配置,具體的可以看微信的wiki文件,我這裡也給大家說一下我配置的時候遇到的一些坑吧!

首先,點選修改的時候,會變成如下介面:

教你如何用node.js開發微信公眾號(一)

注意點:

  • URL引數說明: url填的是一個公網上部署好的介面地址(是真實存在已經部署好能夠請求的介面),介面必須以http://https://開頭,僅支援80埠和443埠。
  • Token引數說明: token填的是自己定義的一個標識,需要注意的一點就是這邊配置好了以後,在上面那個url的介面裡面設定的token需要和這個保持一致,不然配置是不會成功的。

具體的配置指南戳這裡

當你點選提交的時候,會傳送一個get請求到你剛剛填寫的URL地址,並且會帶上4個引數,分別是:signature,timestamp,echostr,nonce,然後在服務端驗證配置是否通過;
如果配置成功,則會有如下成功提示:

教你如何用node.js開發微信公眾號(一)
如果配置失敗,則會有如下失敗提示:

教你如何用node.js開發微信公眾號(一)

介面配置到這裡就完成了。

JS介面安全域名

這個配置主要是為了能夠調js-sdk介面配置的,只有在該域名下,開發才能呼叫微信js介面(像呼叫二維碼,上傳預覽檔案等功能),文件也寫的比較詳細,這裡不做過多說明。

微信官方JS-SDK文件戳這裡

到這裡,微信公眾平臺的配置就差不多了,接下來就可以開始服務端的開發了。

二、node服務端開發配置

還記得微信公眾平臺配置的時候填寫的urltoken值嗎?這裡就用到了,來看下面一段程式碼:

const bodyParser = require('body-parser'); //處理請求引數

server.get("/", function (req, res) {
    var token = "xxxx";
    var signature = req.query.signature;
    var timestamp = req.query.timestamp;
    var echostr = req.query.echostr;
    var nonce = req.query.nonce;

    var oriArray = new Array();
    oriArray[0] = nonce;
    oriArray[1] = timestamp;
    oriArray[2] = token;
    oriArray.sort();

    var original = oriArray.join('');
    var sha = sha1(original)

    if (signature === sha) {
        //驗證成功
        res.send(echostr)
    } else {
        //驗證失敗
        res.send({ "message": "error" })
    }

});
複製程式碼

還記得上面說點選提交的時候會發一個get請求嗎?還說會帶signature,timestamp,echostr,nonce四個引數。就是在這個介面中,判斷配置是否成功的,來看下這個get請求具體做了什麼事情。

  1. 定義一個token值,需要和公眾平臺配置的token保持一致。
  2. 通過req.query.xxx獲取請求傳過來的4個引數。
  3. nonce,timestamp,token新增到一個陣列中,並用sort()排序,然後把這個陣列用join("")拼接成一個字串。
  4. sha1加密生成一個密匙,最後判斷通過sha1生成的signature和引數帶過來的signature是否一致,一致則配置成功,不一致則配置失敗。

具體可以看官方文件(文件示例是php的),文件地址 戳這裡

到這裡微信開發的公眾號配置和node服務端配置就完成了,接下來可以開始愉快的開發啦!

三、使用者資訊處理

首先問一個問題,當使用者關注公眾號,傳送訊息的時候,開發者在哪裡能接收到這些訊息,並做相應的回覆呢?
答案是微信公眾平臺配置的URLpost請求,如果說該URL的get請求是為了配置用的,那麼post請求就是為了處理使用者資訊。

來看下面一段程式碼

var parseString = require('xml2js').parseString;

server.post("/", function (req, res) {
    try {
        var buffer = [];
        //監聽 data 事件 用於接收資料
        req.on('data', function (data) {
            buffer.push(data);
        });
        //監聽 end 事件 用於處理接收完成的資料
        req.on('end', function () {
            //輸出接收完成的資料
            parseString(Buffer.concat(buffer).toString('utf-8'), { explicitArray: false }, function (err, result) {
                if (err) {
                    //列印錯誤資訊
                    console.log(err);
                } else {
                    //列印解析結果
                    result = result.xml;
                    var toUser = result.ToUserName; //接收方微信
                    var fromUser = result.FromUserName;//傳送仿微信
                    //判斷是否是事件型別
                    if (result.Event) {
                        //處理事件型別
                        switch (result.Event) {
                            case "subscribe":
                                //關注公眾號
                                break;
                            default:
                                
                        }
                    } else {
                        //處理訊息型別
                        switch (result.MsgType) {
                            case "text":
                                //處理文字訊息
                                break;
                            case "image":
                                //處理圖片訊息
                                break;
                            case "voice":
                                //處理語音訊息
                                break;
                            case "video":
                                //處理視訊訊息
                                break;
                            case "shortvideo":
                                //處理小視訊訊息
                                break;
                            case "location":
                                //處理髮送地理位置
                                break;
                            case "link":
                                //處理點選連結訊息
                                break;
                            default:
                                
                        }
                    }
                }
            })
        });
    } catch (err) {
        res.send(err);
    }
});
複製程式碼

通過上面這段程式碼,可以看出,所有的訊息處理都是在一個post中處理,大致的流程是服務端會接收一段固定格式xml的字串,具體格式如下:

<xml>
    <ToUserName><![CDATA[${toUser}]]></ToUserName>  //接收方
    <FromUserName><![CDATA[${fromUser}]]></FromUserName>  //傳送方
    <CreateTime>${new Date().getTime()}</CreateTime>  //傳送時間
    <Event>< ![CDATA[VIEW] ]></Event>    //事件型別
    <MsgType><![CDATA[text]]></MsgType>  //訊息型別
    <Content><![CDATA[${content}]]></Content>  //內容
</xml>;
複製程式碼

當接收到xml訊息後,用xml2js解析xml,根據EventMsgType做事件型別的判斷,並做相應的處理,最後,res.send(xml)傳送資料的時候也是要一個xml格式的資料,要注意的一點是,ToUserNameFromUserName不要弄錯就可以了!具體的文件有詳細的解釋,文件戳這裡哦;

好了,今天的內容就講到這裡了,剩下還有一些關於生成access_token,還有如何呼叫js-sdk的內容過兩天更新吧!

小弟這裡有一份react後臺管理腳手架模版,有需要的自取 戳我,戳我,戳我,github

關注

大家好,我是西瓜太郎,小前端一枚,座標杭州,今天入住掘金,第一次寫文章,如有寫的不適的地方還請大佬多多指教,如有助於八方兄弟,那小弟搬磚將會更加有動力!

教你如何用node.js開發微信公眾號(一)

相關文章