APP支付宝授权获取code uniapp

搬砖的阿鲁

于 2024-08-18 19:20:25 发布

阅读量174

点赞数 2

文章标签： uni-app 支付宝授权登录

本文链接：https://blog.csdn.net/L_15737525552/article/details/141303348

版权

1.点击使用plus.runtime跳转打开支付宝


//打开支付宝授权，在支付宝APP中授权后会在支付宝中跳转到你填写的h5地址

//urls是授权地址可以后端拼接也可以前端写死
//以下是一个拼接示例，需修改app_id的值和redirect_uri的值即可
//app_id是商户的APPID，redirect_uri是你在支付宝中授权后的回调地址，在回调页面中你可以在路由中获取auth_code

let urls='https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=******&scope=auth_userinfo&redirect_uri=https://****.com/html';
urls=encodeURIComponent(urls);//将地址编码成浏览器访问的格式
// 判断平台
if (plus.os.name == 'Android') {
  plus.runtime.openURL(
    'alipays://platformapi/startapp?appId=20000067&url=' + urls,
    res => {
	//这里写打开URL地址失败后的处理
      console.log(res);
      uni.showModal({
        content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
        success: function (res) {
          if (res.confirm) {
            //plus.runtime.openURL();
          }
        }
      });
    },
    'com.eg.android.AlipayGphone'
  );
} else if (plus.os.name == 'iOS') {
  plus.runtime.openURL(
    'alipay://platformapi/startapp?appId=20000067&url=' + urls,
    res => {
      console.log(res);
      uni.showModal({
        content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
        success: function (res) {
          if (res.confirm) {
            //plus.runtime.openURL(url);
          }
        }
      });
    },
    'com.eg.android.AlipayGphone'
  );
}

2.给APP设置一个UrlScheme，用作从支付宝返回APP使用

HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://"，设置后从新打包才会生效

PS：ios端ios9以下需要把设置的UrlSchemes添加到白名单才可使用，否则会报错（plus.runtime.openURL 报错code:-3,msg:此功能不支持），具体添加如下：

5+App项目
在manifest.json文件的"plus"->"distribute"->"apple"下添加urlschemewhitelist节点数据如下：

"plus": {    
"distribute": {    
"apple": {    
    "urlschemewhitelist": [    
            "BaiduSSO",  
            "qqmusic"  
    ],    
    //...    
},    
//...    
},    
//...    
}

uni-app项目 
把上面的urlschemewhitelist节点数据放到manifest.json的"app-plus"->"distribute"->"ios"节点下 注意：保存后提交App云端打包后才能生效 或者自定义基座运行也可，列表最多可添加50个

3.编写h5回调页面，编写完成后放置到服务器上




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽震音乐</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 90vh;
            font-size: .9375rem;
        }
        content{
            display: flex;
            flex-direction: column;
            justify-content: center ;
            align-items: center;
        }

        .logo_img {
            width: 4.6rem;
            height: 4.6rem;
            margin-bottom: 1rem;
        }
        .title{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 1.2rem;
            color: #000000;
            font-style: normal;
            margin-bottom: 0.4rem;
        }

        #box {
            width: 16rem;
            height: 2.4rem;
            text-align: center;
            line-height: 2.4rem;
            border-radius: 1.2rem;
            background: linear-gradient( 225deg, #F1EA3D 0%, #8FEE6B 54%, #72D5E4 100%);
            border-radius: 0.7rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 1.06rem;
            color: #000000;
            text-align: center;
            font-style: normal;
            position: fixed;
            bottom: 12.2rem;
            left: calc(50% - 8rem);
        }

        .desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 0.8rem;
            color: #9C9C9C;
            font-style: normal;
        }
    </style>
</head>

<body>
    <content>
        <img src="./logo.png" class="logo_img">
        <div class="title">您已授权</div>
        <div class="desc">请点击返回汽震音乐</div>
        <div id="box" onclick="func()">返回汽震音乐</div>
    </content>
</body>

<script>
    
// 获取auth_code
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);  
}
async function copyURL(){
    try {
        await navigator.clipboard.writeText(window.location.href);
        alert("已复制链接请到浏览器打开");
        // 这里可以添加用户通知或其他UI反馈
    } catch (err) {
        alert("请点击右上角复制链接，到浏览器打开");
    }
}
function func() {
    let code = getQueryVariable("auth_code");
    // 判断是那种设备
    let u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;   // Android系统或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);   // iOS系统
    
    // 如果为Android系统
    if (isAndroid) {
        window.location.href = "***music://auth_code=" + code; // 注意*** 这里需要修改为刚刚设置的urlscheme，auth_code需要后端拼接。auth_code只有后端才能拿到
		window.setTimeout(function () {
		    copyURL();
		}, 2000);
        window.setTimeout(function () {
            window.location.href = "https://rehuocm.com/download/";   // 3s后如果不能跳转到 App，则跳转到 App 的下载地址，一般是应用宝的对应的下载地址
        }, 4000);
        return;
    }
    
    // ios设备：原理：判断是否认识这个协议，认识则直接跳转，不认识就在这里下载appios();
    if (isiOS) {
        window.location.href = "***music://auth_code=" + code;
        
        window.setTimeout(function () {
            copyURL();
        }, 2000);
        window.setTimeout(function () {
            window.location.href = "https://apps.apple.com/cn/app/%E6%B1%BD%E9%9C%87%E9%9F%B3%E4%B9%90/id6575360289";   // 3s后如果不能跳转到 App，则跳转到 AppStore 的下载地址
        }, 4000);
        return;
    };
}



</script>

</html>

PS：支付宝里在回调页面中点击返回自己的app中非常的不灵敏，我现在还没有好的解决方法，有好的解决方法欢迎评论告诉我

4.再APP中接收支付宝中回调页面返回的code

onShow((e) => {
        setTimeout(function(){  
            var args:any = plus.runtime.arguments; //这里可以看到从后端拿过来的urlscheme 或 通用链接
            plus.runtime.arguments = ''; //进入之后就把urlscheme清空要不然下一次oushow时还会执行
            args = args.split('auth_code');
            console.log(args)
            args = args[1].slice(1);
            console.log(args)
            if(args){
                // 处理args参数，如直达到某新页面等
                console.log(args,'code');
            }
        },0);
    })

PS：可能会出现跳转回APP成功了，但是拿不到带回来的参数，这时我们就要在pages.json文件下找到condition这个节点删除就可以了，它回影响ios的启动

搬砖的阿鲁

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
APP支付宝授权获取code uniapp

把上面的urlschemewhitelist节点数据放到manifest.json的"app-plus"->"distribute"->"ios"节点下注意：保存后提交App云端打包后才能生效或者自定义基座运行也可，列表最多可添加50个。PS：可能会出现跳转回APP成功了，但是拿不到带回来的参数，这时我们就要在pages.json文件下找到condition这个节点删除就可以了，它回影响ios的启动。PS：ios端ios9以下需要把设置的。
复制链接

扫一扫