uni-app和H5页面使用支付宝登陆问题解决

公司项目用uni-app开发，客户要求使用支付宝一键登录，由于uni-ap官网并没有实现第三方登陆，只是给了个付费插件的地址：https://ext.dcloud.net.cn/plugin?id=654，土豪童鞋可以尝试一下，本人没有测试，辗转找到了其他方法。

由于想要实现支付宝登陆必须要在支付宝内打开我们拼接的连接类似这样：

https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=ENCODED_URL&state=ini

但是使用手机浏览器直接打开会发现会提示这样：

解决如下：

将上面我们拼接的授权连接加到此链接后面：alipays://platformapi/startapp?appId=20000067&url=【上面PC拼接链接的 url encode】

新的连接如下：

alipays://platformapi/startapp?appId=20000067&url=https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=ENCODED_URL&state=ini

其中url需要进行encod，具体uni-app代码如下：

let alipayUrl ='https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=你的APPID&scope=auth_user&redirect_uri=你的回调地址';
let openURL = 'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(alipayUrl);console.log('openURL:' + openURL);plus.runtime.openURL(openURL, err => {uni.showToast({title: '打开支付宝失败！请检查是否已安装？',icon: 'none'});});

注意：其中20000067这个appId是固定值，不需要修改成你的APPID。

如此调用即可正常使用支付宝登陆了。

最后鸣谢：

https://ask.dcloud.net.cn/article/id-36971__page-17

https://blog.csdn.net/fkew2009/article/details/87621753

千万注意：alipayUrl中的回调地址(redirect_uri)必须是可以从公网直接访问的，格式是http://或者https:// 开头的，请不要填写内网地址(如：http://localhost:8080/)和相对地址(/pages/aliPay)等等，否则跳转会提示404或无法访问。

uni-app和H5页面使用支付宝登陆问题解决相关推荐

在app和h5页面中播放视频监控
本文章向大家介绍app和h5播放实时视频监控. 我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题,app和h5页面不支持live-player(小程序原生标签)后台报错组件注册失败, ...
app 嵌套h5页面问题
1.app与h5页面方法监听与参数传递 2.Android webview 如何打开本地存储,提供给JS调用 html5 的lwindow.localStorage功能,还有其他的权限 3.Andro ...
vue支付宝html,Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
Swift5+WkWebView实现APP嵌套H5页面
Swift5+WkWebView实现APP嵌套H5页面前言一.Swift5和JS交互 1.类型一:有返回值 2.类型二:无返回值 3.app回调js方法二.Swift5修改JS的window.a ...
vue为app做h5页面，如何做到同域名对应不同版本的h5代码
1.当我们在做混合开发的时候,app端可以有无数多个版本,一般情况h5页面只有一套代码.应该如何部署多套代码呢? 2.业务场景当出现这种情况的时候,其实前端可以部署多套代码.比如: www.stat ...
Vue的H5页面唤起支付宝支付
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
在微信中分享下载APP或H5页面如何做好域名防封
很多情况下H5作为微信推广裂变的一种方式,特别是在QP.BC.CP方面的效力,得到特别多的关注和应用,且有些商家通过H5页面搭建虚假红包链接.跳转APP,甚至出现恶意传播来获取关注,造成了特别的大的影 ...
App的H5页面广告分析
1-现像最近越来越多的用户向客服反映,在使用我们的App过程中,会莫名其妙的在底部出现广告,甚至黄色信息.这些信息不但困扰了用户,影响用户的使用,最关键是使得用户散失对我们公司的信任,觉得我们公司的 ...
iOS原生App与H5页面交互离线缓存笔记
//webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法- (BOOL)webView:(UIWebView*)webView shouldStartLoadW ...
APP 嵌入 h5页面的总结 1
近一个月来忙于把h5页面嵌进APP 现在记录下踩过的坑和应该注意的一些细节 1.细节问题 input type为tel,number,email类型用起来,弹出的软键盘不一样哦,max-length别 ...

uni-app和H5页面使用支付宝登陆问题解决

注意：其中20000067这个appId是固定值，不需要修改成你的APPID。

uni-app和H5页面使用支付宝登陆问题解决相关推荐

最新文章

热门文章