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"; } else return "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']]);

可通过返回值判断是否支付成功。到此前端支付流程就结束了。