关于在uniapp中使用支付宝登录授权，使用网页授权

分类：uni-app

因为客户要求可以用支付宝一键登录app,可是不知道为什么官方没有集成支付宝登录，又看了插件市场的要收费的插件，就打了退堂鼓，打算自己研究下，不过安卓开发已经好几年没搞了，现在感觉都已经不会了，而且ios的我也没搞过，用自己做原生插件怕是不行，参考：https://blog.csdn.net/fkew2009/article/details/87621753
下面给大家提供一个思路：

    //跳转到支付宝去要授权  
            goAlipay(){  
                let alipayUrl="https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=https://www.xxxxxxx.com/alipayCallback.html"  
                let openURL="alipays://platformapi/startapp?appId=20000067&url="+encodeURIComponent(alipayUrl);  
                console.log("openURL:" + openURL);  
                plus.runtime.openURL(openURL,err=>{  
                    uni.showToast({  
                        title:"打开支付宝失败！请检查是否已安装？",  
                        icon:'none'  
                    })  
                })  
            },

然后单独新建一个alipayCallback.html网页用于支付宝回调，内容如下：

<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    </head>  

    <body>  
        <div>  
            如果没有跳转请------  
            <a href="lkk://abc" id="url">点击这里</a>  
        </div>  
        <script type="text/javascript">  
            function getQueryVariable(variable) {  
                var query = window.location.search.substring(1);  
                var vars = query.split("&");  
                for (var i = 0; i < vars.length; i++) {  
                    var pair = vars[i].split("=");  
                    if (pair[0] == variable) {  
                        return pair[1];  
                    }  
                }  
                return (false);  
            }  
            window.onload = function() {  
                var code = getQueryVariable("auth_code");  
                console.log(code);  
                //alert("code：" + code);  
                document.getElementById('url').href = "testapp://io.lkk/login?"+encodeURIComponent(JSON.stringify({"code":code}));  
                window.location.href="testapp://io.lkk/login?"+encodeURIComponent(JSON.stringify({"code":code}));  
            }  
        </script>  
    </body>  

</html>

然后到manifest.json下配置下scheme,用户在支付宝里跳回app，具体参考：https://ask.dcloud.net.cn/article/409
然后就是到支付宝开发平台添加应用了，怎么创建我就不废话了，你们可以自己百度，主要是配置回调地址，特意截图了，应该可以看明白吧？

然后你们自定义基座下，记得改下版本号，发现不改版本号，制作出来的基座还是和之前一样没变化，
然后将获取到auth_code，传给服务器让他们去获取其他信息了
可以在app.js里获取：

onShow: function() {  
            console.log('App Show')  
            var args = plus.runtime.arguments;  
            console.log('[args参数]',args);  
            let argsUrl = JSON.parse(decodeURIComponent(args.split('?')[1]));  
            if (argsUrl.code) {  
                // 处理args参数，如直达到某新页面等    
                plus.runtime.arguments = {};  
                uni.redirectTo({  
                    url: "/pages/login/login?code="+argsUrl.code  
                });  
            }  
        },

argsUrl.code 就是从支付宝返回的auth_code,发给服务器的逻辑我放到login页面里了，这个我就不贴出来了，

总结：
该方法确实可以得到支付宝的登录授权，就是体验不好，因为有alipayCallback.html中间页面，支付宝会报警告如下：