flutter web h5微信授權(quán)與支付

最近一直在弄flutter web h5微信授權(quán)與支付，目前已經(jīng)調(diào)通，方案可行，目前發(fā)現(xiàn)的網(wǎng)上這塊好像還沒人弄過，特此記錄。（注：只涉及flutter h5前端）
原文鏈接：https://blog.csdn.net/weixin_44259356/article/details/107110776

微信授權(quán)

1 通過微信開放平臺(tái)獲取授權(quán)參數(shù)

參數(shù)說(shuō)明

appid 公眾號(hào)的唯一標(biāo)識(shí)

redirect_uri 授權(quán)后重定向的回調(diào)鏈接地址， 請(qǐng)使用 urlEncode 對(duì)鏈接進(jìn)行處理

response_type 返回類型，請(qǐng)?zhí)顚慶ode

scope 應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁(yè)面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁(yè)面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息 ）

state 重定向后會(huì)帶上state參數(shù)，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值，最多128字節(jié)

wechat_redirect 是 無(wú)論直接打開還是做頁(yè)面302重定向時(shí)候，必須帶此參數(shù)

2拼接參數(shù)，得到跳轉(zhuǎn)url

final url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${urlEncode(text: "你跳轉(zhuǎn)的url")}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';if (await canLaunch(url)) {await launch(url);} else {throw 'Could not launch $url';}

注：redirect_uri需要urlEncode 處理，導(dǎo)入包 url_encoder: ^0.0.3，
redirect_uri后可帶參數(shù)，但是只能帶一個(gè)。
跳轉(zhuǎn)需要用到包：

url_launcher: ^5.4.11 url_launcher_web: ^0.1.1+6

3獲取微信回到url參數(shù)code

我們從url獲取了code和state參數(shù)，代碼如下：

import'dart:js' as js; Uri u = Uri.parse(js.context['location']['href']); Global.profile.code = u.queryParameters['code']!=null?u.queryParameters['code']:'0'; Global.profile.state = u.queryParameters['state']!=null?u.queryParameters['state']:'0';

4上傳code，后端解析openId

這步?jīng)]啥了，直接上傳code，讓后端去解析openId，不過公眾號(hào)授權(quán)無(wú)法拿到用戶手機(jī)號(hào)。

微信支付

我們使用的支付方式是微信內(nèi)h5支付，之前用過微信二維碼支付，不過用戶支付完成后整個(gè)頁(yè)面會(huì)被關(guān)閉，只能再次點(diǎn)擊鏈接才能看到訂單。
h5支付主要分為兩步

1發(fā)起支付請(qǐng)求，解析后端支付參數(shù)

后端通過之前拿到的openId，提交微信支付請(qǐng)求，然后會(huì)給前端支付參數(shù)，格式如下：

"payInfo": "{\"appId\":\"xxx\",\"timeStamp\":\"xxx\",\"nonceStr\":\"xxx\",\"package\":\"prepay_id=xxx\",\"signType\":\"RSA\",\"paySign\":\"jUIZCTn4iePqkERcECVxagu1/9YHXc/nyaSfGE0EsYcpxBr/L3wk3L+5BP14mEOWJNokGUGgRrq2ALzTmITioTa+I5VB6rMGnExDCctm4Gllvx7X63LxMUGzYaUZJo5EI6Y46QoOF44URMOcsQQeVVv4iwnxTx0XhvGx5F/1vXQrVUbXUppzdZDyOsZE3fBoyLcXrUQvXHw2EPv0D8qMY59sVliJ+q0Hr8PB56uLJl/iIX3e0gNJXrpq6aqx1fyjejV/qoxUILUbC1JgyTAUw6OlX4fdnHzG688E9FfE8C30wntnI0PKGrSzSKuCK370g5AUp43WtJ2DDpT44yuhdg==\"}"

前端拿到以后解析字符串為json，如下：

final url = Global.profile.xxx['payInfo']; //字符串轉(zhuǎn)json Map<String, dynamic> info = convert.jsonDecode(url);

2前端通過js喚起微信支付

flutter 使用js代碼步驟如下：

（1）引入js文件

在web/index.html中加入：

<script src="assets/assets/js.js" type="application/javascript"></script>

（2）編寫js代碼

js.js文件內(nèi)容如下：

//微信支付 function onBridgeReady(appId,timeStamp,nonceStr,package,signType,paySign){ // alert("發(fā)起請(qǐng)求：");WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":appId, //公眾號(hào)名稱，由商戶傳入"timeStamp":timeStamp, //時(shí)間戳，自1970年以來(lái)的秒數(shù)"nonceStr":nonceStr, //隨機(jī)串"package":package,"signType":signType, //微信簽名方式："paySign":paySign //微信簽名},function(res){if(res.err_msg == "get_brand_wcpay_request:ok" ){// 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：//res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對(duì)可靠。return "true";}elsereturn "false";});}function Pay(){if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}}else{onBridgeReady();} }

（3）flutter web中使用js

import 'dart:js' as js;var request=js.context.callMethod("onBridgeReady",[info['appId'],info['timeStamp'],info['nonceStr'],info['package'],info['signType'],info['paySign']]);

可通過返回值判斷是否支付成功。到此前端支付流程就結(jié)束了。

總結(jié)

以上是生活随笔為你收集整理的flutter web h5微信授权与支付的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。