【uniappAPP实现支付宝授权登录】

最新推荐文章于 2024-07-23 09:35:54 发布

微微一笑吓死谁

最新推荐文章于 2024-07-23 09:35:54 发布

阅读量1.2w

点赞数 5

分类专栏： app授权登录前台文章标签：阿里云 javascript 前端 vue

本文链接：https://blog.csdn.net/qq_39236283/article/details/125968384

版权

本文档详细介绍了如何在uni-app项目中集成支付宝授权登录功能，包括授权地址的构建、Android和iOS平台的处理、设置urlscheme、回调页面编写以及授权后的逻辑处理。文章提供了关键代码示例，并强调了回调地址必须为公网可访问的http或https格式。最后，提到了监听支付宝App传回的auth_code以获取userId的实现方式。

摘要由CSDN通过智能技术生成

公司开发的项目用uni-app开发，功能要求使用支付宝授权登录，由于uni-ap官网并没有实现支付宝的第三方登陆（集成了QQ，微博，微信的授权登录）。没办法，只能满网搜教程。

首先，由于想要实现支付宝登陆必须要在支付宝内打开我们拼接的连接类似这样：

https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=ENCODED_URL&state=init

实现步骤：

1.在点击事件上使用plus.runtime模块调用支付宝打开授权地址(授权地址是后端拼接也可以前端写死，个人感觉后端获取相对比较好)


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

//***********************
//***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) {