flutter web 微信授权

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

 import 'dart:html';    String appid=xxx;String redirect_uri=xxx;//你的跳转url，微信跳回到你的项目页面，若页面链接有特殊字符需要处理urlEncode(text: "你跳转的url")或者Uri.encodeComponent('你跳转的url')final url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect';///使用js的方法跳转，也可以使用url_launcher库
window.location.href = url;

3.获取微信回到url参数code

在redirect_uri设置的回调链接跳转的页面中解析微信回调的链接url:

import 'dart:html';///前端知识，可以咨询前端开发者，如何获取页面链接，并解析链接获取链接地址中的参数
Uri u = Uri.parse(window.location.href);
String code = u.queryParameters['code'] ?? '';

4.通过code，给后端获取openId，和自己需要的字段如token等等

注：微信授权失败可能的原因：链接上面的#号没去除，通过url_strategy库去除网页URL中的“#”(hash)

flutter web 微信支付

我们使用的支付方式是微信内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==\"}"

2.前端通过js唤起微信支付

flutter 使用js代码步骤如下：

（1）引入js文件

在web/index.html中加入：

<!--微信支付-->
<!--注意路径要写对（src）-->
<script src="js/wxPay.js" type="application/javascript"></script>

我的js存放目录：

（2）编写js代码

wxPay.js文件内容如下：

//微信支付
function onBridgeReady(appId,timeStamp,nonceStr,packageValue,signType,paySign){window.WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":appId,     //公众号ID，由商户传入"timeStamp":timeStamp,         //时间戳，自1970年以来的秒数"nonceStr":nonceStr, //随机串"package":packageValue,"signType":signType,         //微信签名方式："paySign":paySign //微信签名},function(res){///dart提供的方法，通过js调用wxPayOperate来实现js与dart的通信wxPayOperate(res.err_msg);});
}
function toPay(appId,timeStamp,nonceStr,packageValue,signType,paySign){//下面是解决WeixinJSBridge is not defined 报错的方法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(appId,timeStamp,nonceStr,packageValue,signType,paySign);}
}

（3）flutter web中使用js

import 'dart:js';
//将dart方法传给js，通过js调用wxPayOperate来实现js与dart的通信context["wxPayOperate"] = wxPayOperate;//调用js的函数来执行想要的操作context.callMethod("toPay", [param['appId'],param['timeStamp'],param['nonceStr'],param['packageValue'],param['signType'],param['paySign']]);///给js 提供回调的方法wxPayOperate(String callbackStr) {// 关闭弹窗closeProgress();if (callbackStr == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。///下面是支付成功后的逻辑，根据自己的业务写MyNavigatorUtils.mineOrderPaySuccessPage(_pageContext,widget.bean ?? Records(),(result) {},replace: true,);} else {showToast('支付失败！');}}

flutter web 微信授权和微信支付相关推荐

微信授权及微信支付跳转回来的路径带有#的hash路径会被忽略
使用微信授权和微信h5支付时,需要配置 redirect_uri 参数,如果参数里面的路是带有#的hash路径时,#后面的内容会被微信认为是不合法的,然后会被微信忽略掉,比如配置的是 http://w ...
微信公共平台接入之：网页授权（微信授权，微信access_token获取，获取微信用户信息），微信开发者工具使用，微信公众平台测试号申请接入
1.微信公众平台文档入口微信公众平台入口地址:https://mp.weixin.qq.com/,截图: 进入之后的文档地址: https://mp.weixin.qq.com/wiki?t=res ...
微信授权登录-微信公众号和PC端网站
一.微信公众号授权登录--微信公众平台微信授权登录,并调用后台接口,获取用户信息 1.网页授权回调域名首先要在公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授 ...
html获取微信授权以及微信支付
最近在写h5项目的时候,有个功能是扫描二维码,进行微信支付以及支付宝支付. 1:首先有一个扫码后需要跳转的页面,我这边使用的html,调用接口使用的是ajax,很长时间没用了,还有点不习惯. ①:先说 ...
从微信授权到微信支付
一.微信授权 1.在对接微信之前,首先从微信官网(https://mp.weixin.qq.com)去注册微信公众公众账号,提交资料等待验证通过. 2.验证通过后就可以微信公众平台获取到 AppI ...
angularjs 微信授权登录微信支付
最近做一个项目,用angular 一个单页应用,打算打包成跨平台移动App 以及在微信里面使用.给大家一个案例首先,熟悉一下微信授权部分的源代码,如下所示: javascript 前端代码: va ...
小程序 - 微信授权登录微信授权绑定手机号
用户在使用小程序时,经常需要授权登录,授权登录的作用是获取用户的基本信息,如头像.昵称以及openid等,openid可用于微信授权手机号.微信支付. 微信授权登录 .xhtml如下,wxLogin为 ...
微信授权登录(微信订阅号使用测试账号)
1.微信授权登录: 微信公众号测试登录: 准备: 1.1 花生壳! 下载地址:http://hsk.oray.com/download/ 1.2 微信公众号:https://mp.weixin.qq. ...
微信授权-获取微信授权后用户信息
微信授权登陆: 我采用的是自定义的子菜单:登陆微信公众平台第一步:用户同意授权.获取code 第二步:通过code换取网页授权access_token 详细步骤参考微信公众号平台在页面地址输入授权 ...
微信小程序微信授权登录微信登录
一.调用接口获取临时登录凭证(code) wx.login({success(res) {if (res.code) {// res.code => 登录凭证} else {console.lo ...

flutter web 微信授权和微信支付