uniapp-App支付宝授权小记

uniapp-App支付宝授权小记先上效果图【图片】实现步骤：1.在点击事件上使用plus.runtime模块调用支付宝打开授权地址(授权地址是后端拼接也可以前端写死)PS:完成第1点应该能看到这样的效果：(如果不是可能是你的授权地址app_id不对)//相关示例代码：（该代码会打开支付宝授权，授权之后会在支付宝中打开你所设置的【回调地址】网页）//***********************/

acqui~Zhang

9382人浏览 · 2021-04-30 09:52:55

acqui~Zhang · 2021-04-30 09:52:55 发布

uniapp-App支付宝授权小记

先上效果图

在这里插入图片描述

实现步骤：

1.在点击事件上使用plus.runtime模块调用支付宝打开授权地址(授权地址是后端拼接也可以前端写死)
PS:完成第1点应该能看到这样的效果：(如果不是可能是你的授权地址app_id不对)
在这里插入图片描述


//相关示例代码：（该代码会打开支付宝授权，授权之后会在支付宝中打开你所设置的【回调地址】网页）

//***********************
//***url授权地址由后端拼接也可以前端写死***
//***以下是一个拼接示例，仅需修改app_id的值和redirect_uri的值***
//***app_id是商户的APPID，redirect_uri是页面跳回地址（授权成功之后会在支付宝中打开这个地址）***
//***********************
let urls='https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021001183611007&scope=auth_userinfo&redirect_uri=https://shandianlaoshi.com/api/user/zfb_url';
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(HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://")
在这里插入图片描述

3.提交打包(urlscheme)设置之后需重新打包(可以重新打基座也可以直接云App打包，建议打基座【因为还需要写从支付宝回来之后的事件】)
在这里插入图片描述

4.编写(redirect_uri)页面，编写完成后拿给后端放在服务器上就基本成功了
PS：完成第4点应该看到这样的效果，如果出现没有跳转到你的APP说明你的urlscheme没填写对或者是你的APP没有打包
在这里插入图片描述


//相关示例代码  该代码是一个页面（样式自行编写） 主要的是Js代码
/**
 * html
 */
<!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: 6.875rem;
            height: 6.875rem;
            margin-bottom: .625rem;
        }

        #box {
            width: 60%;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            border-radius: 20px;
            background-color: rgb(23, 120, 194);
            color: white;
            margin: .9375rem auto;
        }

        .desc {
            font-size: .3125rem;
            color: gray;
        }
    </style>
</head>

<body>
    <content>
        <img src="./logo.png" class="logo_img">
        <div id="box" onclick="func()">返回闪电老师</div>
        <div class="desc">您已授权登录，请点击返回闪电老师</div>
    </content>
</body>

<script src="./index.js"></script>

</html>


function func() {
  console.log("点击触发99999");
  // 判断是那种设备
  let u = navigator.userAgent;
  console.log(u);
  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 = "sdls://?auth_code=88888888"; // 注意*** 这里需要修改为刚刚设置的urlscheme，auth_code需要后端拼接。auth_code只有后端才能拿到
    window.setTimeout(function () {
      window.location.href = "http://www.baidu.com";   // 3s后如果不能跳转到 App，则跳转到 App 的下载地址，一般是应用宝的对应的下载地址
    }, 2000);
    return;
  }

  // ios设备：原理：判断是否认识这个协议，认识则直接跳转，不认识就在这里下载appios();
  if (isiOS) {
    let startIndex = u.indexOf('iPhone OS') + 9;
    let endIndex = u.indexOf('like Mac OS') - 1;
    let num = +u.slice(startIndex, endIndex).split('_')[0];  // 计算版本号的前面数值
    if (num < 9) {
      window.location.href = "sdls://?auth_code=88888888";   //  注意*** 这里需要修改为刚刚设置的urlscheme，auth_code需要后端拼接。auth_code只有后端才能拿到
    } else {
      window.location.href = " ";   // universal link 链接
    }
    window.setTimeout(function () {
      window.location.href = " ";   // 3s后如果不能跳转到 App，则跳转到 AppStore 的下载地址
    }, 3000);
    return;
  };
}

5.在页面中监听支付宝App传过来的auth_code，再通过auth_code获取到userId就完成了支付宝的授权啦(可以在redirect_uri页面中直接获取userId再跳转回APP也可以返回App后通过auth_code请求后端获取userId【PS：后者方案更灵活】)


onShow: function() {
	setTimeout(function(){  
	  	let args = plus.runtime.arguments;
		console.log(args); //这里可以看到从后端拿过来的urlscheme 或 通用链接
	//注意：if里面还需要加一个自定义条件，因为修改不了鸿蒙系统的plus.runtime.arguments 会导致每次进入后都会拿到授权码（之前的那个），所以需要自行加一个限定条件（否则可能会导致鸿蒙系统设备上异常登录）
		if (args) {
			plus.runtime.arguments=null;//进入之后就把urlscheme清空要不然下一次oushow时还会执行
			// 处理args参数，如直达到某新页面等
			//通过code请求获取user_id
		}
  	},0); 
},