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

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

MasterBoot

14846人浏览 · 2020-07-13 18:17:03

MasterBoot · 2020-07-13 18:17:03 发布

公司项目用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或无法访问。