flutter web h5微信授權與支付

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

微信授權

1 通過微信開放平臺獲取授權參數

參數說明

appid 公眾號的唯一標識

redirect_uri 授權后重定向的回調鏈接地址， 請使用 urlEncode 對鏈接進行處理

response_type 返回類型，請填寫code

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

state 重定向后會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節

wechat_redirect 是 無論直接打開還是做頁面302重定向時候，必須帶此參數

2拼接參數，得到跳轉url

final url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${urlEncode(text: "你跳轉的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 處理，導入包 url_encoder: ^0.0.3，
redirect_uri后可帶參數，但是只能帶一個。
跳轉需要用到包：

url_launcher: ^5.4.11 url_launcher_web: ^0.1.1+6

3獲取微信回到url參數code

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

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

這步沒啥了，直接上傳code，讓后端去解析openId，不過公眾號授權無法拿到用戶手機號。

微信支付

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

1發起支付請求，解析后端支付參數

后端通過之前拿到的openId，提交微信支付請求，然后會給前端支付參數，格式如下：

"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']; //字符串轉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文件內容如下：

//微信支付 function onBridgeReady(appId,timeStamp,nonceStr,package,signType,paySign){ // alert("發起請求：");WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":appId, //公眾號名稱，由商戶傳入"timeStamp":timeStamp, //時間戳，自1970年以來的秒數"nonceStr":nonceStr, //隨機串"package":package,"signType":signType, //微信簽名方式："paySign":paySign //微信簽名},function(res){if(res.err_msg == "get_brand_wcpay_request:ok" ){// 使用以上方式判斷前端返回,微信團隊鄭重提示：//res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。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']]);

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。