flutter web h5微信授权与支付
flutter web h5微信授权与支付
微信授权
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微信授权与支付相关推荐
- H5 微信授权登录功能实现
背景 最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
- H5微信授权登录后点击返回出现循环登录无法退出问题
简单介绍h5微信授权流程 1.入口页跳转到我们自己创建的空白授权页 2.在空白授权页判断url上是否包含code,没有code拼接微信授权链接,通过location.href进行跳转 location ...
- pc、h5微信授权登录
pc登录 微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录 微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
- uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录 文章目录 uniapp开发h5微信授权登录 前言 一.前期准备--申请测试账号 二.正式开发--前端代码 三.打包发布 总结 前言 我也是第一次做h5授权微信登录,网 ...
- 【uniapp】H5微信扫码支付
[H5微信扫码支付] 先新建好js,内容在最底下 步骤一:引入js import QRCode from '../../js/pay.js' 步骤二:页面放入展示二维码的盒子 <canvas s ...
- 使用beecloud和easychat 做微信H5 微信公众号支付遇到的坑
首先我先来说明微信h5和微信公众号支付的区别 微信H5指的是微信网页端支付.微信公众号支付指的是微信浏览器内发起微信支付,这种支付都是属于微信公众号支付.俩者本质的区别就是H5不需要微信网页授权,但是 ...
- uni-app 微信小程序支付/公众号支付/h5支付宝/h5微信/支付宝app支付/微信app支付
思路: 先判断是app/h5/微信小程序 如果是h5,判断是微信内打开还是微信外 app.vue onLaunch: function() {uni.setStorageSync('h5Type', ...
- 【H5微信授权】简单实现H5页面微信授权功能,微信开发者工具报错 系统错误,错误码-1,undefined解决办法【详细】
前言 最近写到了H5公众号,需要微信授权的功能. 这里记录一下授权的流程和踩了个坑 图片 授权代码执行后会跳转到授权的地方,没有授权的会有确认授权,授权过得会这样,直接自动登录,然后再跳转到中转页 授 ...
- H5微信授权登录弹窗提示
如下图:用户授权登录前,先通过静默授权,拿到token,展示部分信息,用户通过授权后拿到头像昵称,该弹窗让用户有个比较好的体验 请求过程如下: 1.首次在没有UID.code的情况下:静默授权(&am ...
最新文章
- 134个预训练模型、精度高达85.1%,百度视觉算法最强基石PaddleClas全新升级
- JavaScript 的参数 arguments 和 return
- python自然语言处理课后答案
- 怎么解决64位Access与32位不能同时安装的问题
- python怎么让py里面逐行运行_[python]开发环境bug(求助)
- 史上最全Html和CSS布局技巧
- 什么是Dropthings
- 站立会议07(第二次冲刺)
- linux更新软件时,白天速度远超晚上
- C语言scanf为啥有时候要输入两次(解析)
- android 耗电分析工具,使用Battery Historian工具分析Android耗电分析
- 硬核蹭热点系列:负油价和巴舍利耶模型
- 基于单片机的智能教室控制系统的设计
- 里恩临床试验项目管理系统(RH-CTMS)介绍
- 罗永浩还有家关联公司,月流水10亿,谁在抖快中“躺赚”
- 电脑鼠标dpi怎么调整,教大家如何调整鼠标dpi
- MathType 使用的解决方案
- 【多式联运】基于帝国企鹅算法、遗传算法、粒子群算法求解多式联运路径优化问题附matlab代码
- 看漫画软件测试自学,用你的小P看漫画 PSPComic 0.9.9 测试版发布
- 下载大文件报SocketTimeoutException