uni-app中实现支付宝登录授权，使用网页授权的方式

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);  
                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

然后就是到支付宝开发平台添加应用了，怎么创建我就不废话了，你们可以自己百度，主要是配置回调地址，特意截图了，应该可以看明白吧？

image

image

然后你们自定义基座下，记得改下版本号，发现不改版本号，制作出来的基座还是和之前一样没变化，

然后将获取到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中间页面，支付宝会报警告如下：

image

全过程大概要用户点击四次屏幕，体验太不好，我也是没法想到其他好法子了，Android我测试是没有问题的，iOS没测，不过听说在iOSscheme会不行，回头疫情好了去公司我再测测看行不行

不知道为什么用不了，支付宝既然有这个为什么不给用呢？百度谷歌都不知道该怎么用，如果有知道怎么用的兄弟告诉我下，感谢不尽！

image


更多关于uni-app中实现支付宝登录授权，使用网页授权的方式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中实现支付宝登录授权，使用网页授权的方式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中实现支付宝登录授权，可以通过网页授权的方式来完成。以下是具体的代码实现步骤，包括前端和后端的代码示例。

前端代码（uni-app）

首先，在pages目录下创建一个新的页面，比如alipayLogin.vue，用于处理支付宝登录授权。

<template>
  <view>
    <button @click="goAlipayLogin">支付宝登录</button>
  </view>
</template>

<script>
export default {
  methods: {
    goAlipayLogin() {
      const appId = 'your-alipay-app-id'; // 替换为你的支付宝App ID
      const redirectUri = encodeURIComponent('https://your-redirect-uri.com'); // 替换为你的回调地址
      const scope = 'auth_user'; // 授权范围
      const state = 'random-string'; // 防止CSRF攻击，可以是随机字符串

      const url = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${appId}&scope=${scope}&redirect_uri=${redirectUri}&state=${state}`;

      uni.setWebViewCookie({
        url: url,
        cookie: [],
        success: () => {
          uni.navigateTo({
            url: `web-view?src=${url}`
          });
        }
      });
    }
  }
}
</script>

后端代码（Node.js 示例）

在后端，你需要处理支付宝的回调请求，并获取用户的授权信息。以下是一个简单的Node.js示例：

const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;

app.get('/alipay/callback', async (req, res) => {
  const { code, state } = req.query;
  const appId = 'your-alipay-app-id';
  const appPrivateKey = 'your-app-private-key'; // 替换为你的应用私钥
  const alipayPublicKey = 'your-alipay-public-key'; // 替换为你的支付宝公钥

  const params = {
    app_id: appId,
    method: 'alipay.system.oauth.token',
    format: 'JSON',
    charset: 'utf-8',
    sign_type: 'RSA2',
    timestamp: new Date().toISOString().replace(/[:.-T]/g, ''),
    version: '1.0',
    grant_type: 'authorization_code',
    code,
  };

  // 生成签名并发送请求（签名部分省略，需自行实现）
  const response = await axios.post('https://openapi.alipay.com/gateway.do', params);

  // 处理响应并返回结果
  res.send(response.data);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

注意：上述代码省略了签名生成部分，你需要使用支付宝提供的SDK或自行实现RSA签名算法。另外，确保你已经配置好支付宝开放平台的回调地址，并正确设置了应用公私钥。

通过上述代码，你可以在uni-app中实现支付宝登录授权，并通过后端处理回调请求，获取用户的授权信息。

回到顶部