微信公眾號(hào)開(kāi)發(fā)

nifhlheimr 發(fā)布于2019-08-23 12:19 / 2881人閱讀

摘要：接口安全域名主要是在調(diào)用微信時(shí)用到。到這里為止測(cè)試號(hào)配置就完成了二微信網(wǎng)頁(yè)授權(quán)篇接口地址為這里你可以使用此地址上的接口進(jìn)行自己編寫(xiě)，也可以使用別人封裝好的。

說(shuō)明：由于最近開(kāi)發(fā)公眾號(hào)，特寫(xiě)篇文章來(lái)記錄下開(kāi)發(fā)流程和開(kāi)發(fā)中的坑。
開(kāi)發(fā)用的技術(shù)為 react + express , nodejs作為中間層。

一.配置篇

首先申請(qǐng)接口測(cè)試號(hào)
地址：https://mp.weixin.qq.com/wiki...

上面為測(cè)試號(hào)配置頁(yè)面

1.接口配置信息修改

這里的接口配置信息需要和微信進(jìn)行一次通信，才能夠填寫(xiě)。
這一層通信是在nodejs層里進(jìn)行的。
在項(xiàng)目里創(chuàng)建一個(gè)路由，通信代碼如下：

const sha1 = require("sha1");
router.get("/wx", function(req, res) {
    const {
        signature,
        timestamp,
        nonce,
        echostr
    } = req.query;

    const token = config.token;

    let str = [token, timestamp, nonce].sort().join("");
    const sha = sha1(str);

    if( sha === signature) {
        console.log("驗(yàn)證成功")
        res.send(echostr);
    } else {
        console.log("驗(yàn)證失敗")
        res.send("驗(yàn)證失敗");
    }
});

這里的URL就是填寫(xiě)你通信路由的地址，Token要和通信代碼中的 token保持一致。
然后點(diǎn)擊提交按鈕，微信就會(huì)向你填寫(xiě)的URL發(fā)起請(qǐng)求。URL和Token無(wú)誤，即可提交成功。

2.JS接口安全域名

主要是在調(diào)用微信JS-SDK時(shí)用到。
這里我們有做一個(gè)朋友圈分享功能,要調(diào)用SDK的頁(yè)面和分享的鏈接，要填寫(xiě)在安全域名下，才能成功
(在下面的微信JS-SDK使用會(huì)講到)

3.授權(quán)回調(diào)頁(yè)面

這里的域名填寫(xiě)你項(xiàng)目的域名（例如）： xxx.com 即可，不需要加http/https。
到這里為止測(cè)試號(hào)配置就完成了!!!

二.微信網(wǎng)頁(yè)授權(quán)篇

接口地址為：https://mp.weixin.qq.com/wiki...
這里你可以使用此地址上的接口進(jìn)行自己編寫(xiě)，也可以使用別人封裝好的SDK。
這里我使用的別人封裝好的SDK
https://github.com/node-webot...
這里也是在node層進(jìn)行處理

$ npm install wechat-oauth

var OAuth = require("wechat-oauth");
var client = new OAuth("your appid", "your secret’);

生成引導(dǎo)用戶點(diǎn)擊的URL。

var url = client.getAuthorizeURL("redirectUrl", "state", "scope");

如果是PC上的網(wǎng)頁(yè)，請(qǐng)使用以下方式生成

var url = client.getAuthorizeURLForWebsite("redirectUrl");

獲取Openid和AccessToken
用戶點(diǎn)擊上步生成的URL后會(huì)被重定向到上步設(shè)置的 redirectUrl，并且會(huì)帶有code參數(shù)，我們可以使用這個(gè)code換取access_token和用戶的openid

client.getAccessToken("code", function (err, result) {
  var accessToken = result.data.access_token;
  var openid = result.data.openid;
});

復(fù)制代碼獲取用戶信息
如果我們生成引導(dǎo)用戶點(diǎn)擊的URL中scope參數(shù)值為snsapi_userinfo，接下來(lái)我們就可以使用openid換取用戶詳細(xì)信息（必須在getAccessToken方法執(zhí)行完成之后）

client.getUser(openid, function (err, result) {
  var userInfo = result;
});

通過(guò)以上這幾個(gè)步驟，就可以拿到用戶的信息!!!

三. 微信JS-SDK使用篇（這里以朋友圈分享為例子）

微信JS-SDK說(shuō)明文檔
地址：https://mp.weixin.qq.com/wiki...
sdk使用：（這里搬用下官網(wǎng)的文檔,這里可詳細(xì)參考文檔,這里唯一麻煩一點(diǎn)的地方就是簽名算法）

步驟一：綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。

步驟二：引入JS文件
在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置

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

這里的timestamp，nonceStr，signature需要通過(guò)接口獲取,接下來(lái)我們就來(lái)獲取 timestamp，nonceStr，signature（在node層處理）
這里第一步就需要獲取access_token，
要調(diào)取微信的SDK，必須要獲取access_token,access_token是公眾號(hào)的全局唯一接口調(diào)用憑據(jù)，公眾號(hào)調(diào)用各接口時(shí)都需使用access_token,access_token有效期為2個(gè)小時(shí),而調(diào)取access_token接口的次數(shù)限制為2000，所以需要存儲(chǔ)下來(lái)(存的方式看你自己)
獲取access_token接口:
https://mp.weixin.qq.com/wiki...

獲取access_token 和timestamp，nonceStr，signature代碼如下：

const rp = require("request-promise’);
const {sign} = require(‘./sign");
rp(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appID}&secret=${config.appsecret}`)
    .then(function (response) {
        const access_token = JSON.parse(response).access_token;
        setCookie(res, "at", access_token);
        rp(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`)
            .then(function (response2) {
                let ticket = JSON.parse(response2).ticket;
                let signObj = sign(ticket, config.originUrl + req.originalUrl);
                setCookie(res, "timestamp", signObj.timestamp);
                setCookie(res, "nonceStr", signObj.nonceStr);
                setCookie(res, "signature", signObj.signature);
                /*...*/
            }).catch(function () {
                /*...*/
            });
    }).catch(function () {
        /*...*/
    });

這里setCookie是我自己寫(xiě)的存cookie的方法，
這里的sign是微信的簽名算法：
sign.js

"use strict";
const jsSHA = require("jssha");


var createNonceStr = function () {
    return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function () {
    return parseInt(new Date().getTime() / 1000) + "";
};

var raw = function (args) {
    var keys = Object.keys(args);
    keys = keys.sort();
    var newArgs = {};
    keys.forEach(function (key) {
        newArgs[key.toLowerCase()] = args[key];
    });

    var string = "";
    for (var k in newArgs) {
        string += "&" + k + "=" + newArgs[k];
    }
    string = string.substr(1);
    return string;
};

/**
 * @synopsis 簽名算法
 *
 * @param jsapi_ticket 用于簽名的 jsapi_ticket
 * @param url 用于簽名的 url ，注意必須動(dòng)態(tài)獲取，不能 hardcode
 *
 * @returns
 */
exports.sign = function (jsapi_ticket, url) {
    var ret = {
        jsapi_ticket: jsapi_ticket,
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url: url
    };
    var string = raw(ret);
    let shaObj = new jsSHA(string, "TEXT");
    ret.signature = shaObj.getHash("SHA-1", "HEX");
    return ret;
};

此時(shí)我們已經(jīng)把timestamp，nonceStr，signature存了起來(lái)，然后我們來(lái)到前臺(tái)頁(yè)面獲取(我這里使用的react)

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

步驟四：在需要的地方調(diào)用接口,
代碼如下：

wx.ready(function() {
//分享給朋友
    wx.onMenuShareTimeline({
        title: "", // 分享標(biāo)題
        link: href, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: imgUrl, // 分享圖標(biāo)
    });
    wx.onMenuShareAppMessage({
        title: "", // 分享標(biāo)題
        link: href, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: imgUrl, // 分享圖標(biāo)
    });
});

這里就完成了對(duì)微信JS-SDK的調(diào)用!!!
第一次寫(xiě)文章，很多地方有漏洞，不完善，希望各位指出。