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 

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

uni-app和H5页面使用支付宝登陆问题解决_第1张图片

解决如下:

将上面我们拼接的授权连接加到此链接后面: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

 

你可能感兴趣的:(uni-app,支付宝登陆,第三方登陆)