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

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

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

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

下面從第3步開(kāi)始說(shuō)吧。

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

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接口列表
});

其中，signature是一個(gè)關(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)限驗(yàn)證配置信息
        platform_info = {"appId": WXConfig.APPID, "timestamp": 0, "nonceStr": "", "signature": ""}

        # 時(shí)間戳
        timestamp = int(time.time())
        # 隨機(jī)字符串，改方法自己實(shí)現(xiàn)即可
        noncestr = ToolToken.generate_noncestr()
        # jsapi_ticket
        ticket = cache.get("jsapi_ticket")
        if not ticket:
            # 重新獲取jsapi_ticket
            wx = WXToken()
            # 此處根據(jù)說(shuō)明文檔獲取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步：從這一步就開(kāi)始調(diào)用微信支付的相關(guān)接口了。這里一定要注意，調(diào)用微信支付接口時(shí)，一定要看最新的說(shuō)明文檔，不要看舊的，不然會(huì)出現(xiàn)錯(cuò)誤，并且不容易找到原因。
調(diào)用統(tǒng)一下單接口的代碼如下：

async def unify_order(self):
        """
        請(qǐng)求微信統(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
    商戶號(hào)
    apple
    你生成的隨機(jī)字符串
    通知地址
    你的openid
    訂單號(hào)
    外網(wǎng)可訪問(wèn)ip地址
    訂單金額
    JSAPI
    MD5
    簽名

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

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

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

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

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

wx.chooseWXPay({
    timestamp: 0, // 支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫(xiě)。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫(xiě)其中的S字符
    nonceStr: "", // 支付簽名隨機(jī)串，不長(zhǎng)于 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這幾個(gè)參數(shù)中，最難處理的又是簽名paySign。當(dāng)你看到上面那段js代碼時(shí)，可能你看到的文檔已經(jīng)過(guò)時(shí)了，有可能誤導(dǎo)你。生成簽名給前端時(shí)可能只使用了timestamp,nonceStr,package,signType這幾個(gè)參數(shù)，但是你將這樣生成的名返回前端時(shí)，前端請(qǐng)求后可能得到簽名認(rèn)證錯(cuò)誤的提示。

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

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

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

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