摘要：今天聊一下微信公眾號開發(fā)在授權(quán)網(wǎng)頁中的支付流程。前端獲得簽名后，再請求微信服務(wù)器，下面的支付流程就可以繼續(xù)下去了。

今天聊一下微信公眾號開發(fā)在授權(quán)網(wǎng)頁中的支付流程。

微型公眾號開發(fā)有以下幾個步驟：
1.獲取全局access_token
2.獲取網(wǎng)頁授權(quán)的access_token和refresh_token
3.獲取網(wǎng)頁授權(quán)的簽名(前端用于獲取調(diào)用JSSDK的權(quán)限)
4.公眾號支付-調(diào)用統(tǒng)一下單接口獲取prepay_id
5.公眾號支付-將簽名返回給前端用于請求微信公眾號支付

其中步驟1、2根據(jù)微信開發(fā)文檔很容易完成；第3步就開始用到簽名了，這一步的簽名相對來說比較好做；第4、5步微信支付中的簽名對第一次做微信支付開發(fā)的小伙伴來說就有點麻煩了。

下面從第3步開始說吧。

第3步：獲取網(wǎng)頁授權(quán)的簽名，前端調(diào)用JSSDK時，需要使用這個簽名。
這一步驟中，我們需要給前端返回如下數(shù)據(jù)（除jsApiList）：
）：

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

其中，signature是一個關(guān)鍵的參數(shù)。生成簽名的規(guī)則可以去這里 https://mp.weixin.qq.com/wiki... 的 附錄1-JS-SDK使用權(quán)限簽名算法 中查看
生成簽名的代碼如下：

def post(self, request):
        url = request.data["url"]
        logger.debug("url:%s", url)
        # 權(quán)限驗證配置信息
        platform_info = {"appId": WXConfig.APPID, "timestamp": 0, "nonceStr": "", "signature": ""}

        # 時間戳
        timestamp = int(time.time())
        # 隨機(jī)字符串，改方法自己實現(xiàn)即可
        noncestr = ToolToken.generate_noncestr()
        # jsapi_ticket
        ticket = cache.get("jsapi_ticket")
        if not ticket:
            # 重新獲取jsapi_ticket
            wx = WXToken()
            # 此處根據(jù)說明文檔獲取jsapi_ticket即可
            wx.get_jsapi_ticket()

        logger.debug("ticket:%s", ticket)
        # 組合字符串，其中url是需要前端傳給我們的
        info_string = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "×tamp=" + str(timestamp) + "&url=" + url

        signature = hashlib.sha1(info_string.encode("utf-8")).hexdigest()
        platform_info["signature"] = signature
        platform_info["timestamp"] = timestamp
        platform_info["nonceStr"] = noncestr
        return Response(platform_info, status=status.HTTP_200_OK)

第4步：從這一步就開始調(diào)用微信支付的相關(guān)接口了。這里一定要注意，調(diào)用微信支付接口時，一定要看最新的說明文檔，不要看舊的，不然會出現(xiàn)錯誤，并且不容易找到原因。
調(diào)用統(tǒng)一下單接口的代碼如下：

async def unify_order(self):
        """
        請求微信統(tǒng)一下單接口
        :return:
        """
        url = "https://api.mch.weixin.qq.com/pay/unifiedorder"
        headers = {"Content-Type": "application/xml"}
        async with ClientSession() as session:
            async with session.post(url=url, data=self.xml_data, headers=headers) as res:
                ret = await res.text()
                logger.debug("ret:%s", ret)
                self.unify_order_data = self.xml_to_dict(ret)
                logger.debug("self.unify_order_data:%s", self.unify_order_data)

其中，self.xml_data內(nèi)容如下：

    你的appid
    pay
    paytest
    商戶號
    apple
    你生成的隨機(jī)字符串
    通知地址
    你的openid
    訂單號
    外網(wǎng)可訪問ip地址
    訂單金額
    JSAPI
    MD5
    簽名

其中最后一個參數(shù)sign的值是需要通過其他參數(shù)加密得到的，簽名生成規(guī)則可以參考微信官方文檔。這里需要說明一下，一定要加上sign_type這個參數(shù)(雖然官網(wǎng)說明文檔中把這個參數(shù)標(biāo)記為不是必須的)，顯式指定加密方法，不然可能得到簽名錯誤的結(jié)果。

上面xml中的參數(shù)可以根據(jù)需求添加。

請求成功后，會返回prepay_id這個值，在下一步中會用到。返回結(jié)果可能如下：

{"return_code": "SUCCESS", "return_msg": "OK", "appid": appid, "mch_id": 商戶號, "nonce_str": 隨機(jī)字符串, "sign": 簽名, "result_code": "SUCCESS", "prepay_id": prepay_id, "trade_type": "JSAPI"}

第5步：這一步中需要將以下信息返回個前端:

wx.chooseWXPay({
    timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符
    nonceStr: "", // 支付簽名隨機(jī)串，不長于 32 位
    package: "", // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***）
    signType: "", // 簽名方式，默認(rèn)為"SHA1"，使用新版支付需傳入"MD5"
    paySign: "", // 支付簽名
    success: function (res) {
        // 支付成功后的回調(diào)函數(shù)
            }
        });

除了success，其他參數(shù)都需要返回給前端。從 timestamp到paySign這幾個參數(shù)中，最難處理的又是簽名paySign。當(dāng)你看到上面那段js代碼時，可能你看到的文檔已經(jīng)過時了，有可能誤導(dǎo)你。生成簽名給前端時可能只使用了timestamp,nonceStr,package,signType這幾個參數(shù)，但是你將這樣生成的名返回前端時，前端請求后可能得到簽名認(rèn)證錯誤的提示。

正確的簽名生成方式是timestamp,nonceStr,package,signType和key(微信商戶平臺配置的key)都需要參與簽名；并且package的值不是第4步中返回的prepay_id的值，而是”prepay_id=”+prepay_id這樣一個字符串。具體如下：

appId=${appid}&nonceStr=${nonceStr}&package=prepay_id=${prepay_id}&signType=MD5&timeStamp=${timeStamp}&key=${key}

將上面的字符串加密即可獲得paySign的值。
前端獲得簽名后，再請求微信服務(wù)器，下面的支付流程就可以繼續(xù)下去了。

以上如有錯誤之處，歡迎交流指正！