前端前端js对微信或支付宝的网页授权对微信或支付宝的网页授权+支付支付
场景：微信/支付宝扫码进入网站，出现授权弹窗，用户授权后进入网站首页，并且显示出用户头像和昵称等信息，在网页进
行相关商品操作后，点击确认支付，拉起微信/支付宝支付，并去付款，在付款成功后跳转到想要去的页面。
建议先去官网了解详情：适用于网站应用的微信授权官方网址
1.网页授权网页授权
判断浏览器并进入相应的授权判断浏览器并进入相应的授权
function IsWeixinOrAlipay() {
var ua = window.navigator.userAgent.toLowerCase();
//判断是不是微信
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
var weixintarger = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=申请到的appid&redirect_uri=授权过后要去的页面地址（要
encode）&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect';
window.location.href = weixintarger;
}
//判断是不是支付宝
if (ua.match(/AlipayClient/i) == 'alipayclient') {
var alipaytarget = 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=申请到的appid&scope=auth_user&redirect_uri=授权过后要去的
页面地址（要encode)&state=2';
window.location.href = alipaytarget;
}
//哪个都不是
return "false";
}
获取获取code，换取用户信息，换取用户信息
用户同意授权后，页面跳转至重定向页面，地址会带上code参数，从地址中取出code参数，传递给后端，换取网页授权
access_token，获得当前用户信息。并进行页面数据渲染。
2.支付支付
微信支付微信支付
向后端传递订单相关信息换取时间戳，随机串等信息。并调用微信支付接口，详情点击此链接去官网看看吧。微信内H5调起
支付官方文档
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp":"1395712654", //时间戳，自1970年以来的秒数
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信签名方式：
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
});
}
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();
}
支付宝支付支付宝支付
支付宝支付相对简单一些，前端向后端传递订单相关信息，后台根据文档，向支付宝请求h5的支付数据，返回一个form表单
到前端上，
ALIpayOrder() {
var urlStr = '接口地址';
var data = {
'alipayUserid': this.userInfo.alipayUserid,
'alipayNickname': this.userInfo.alipayNickname,
weixin_38517122
- 粉丝: 7
- 资源: 907
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0