支付宝第三方登录

盛夏丶621

已于 2024-02-05 15:05:51 修改

阅读量945

点赞数 28

文章标签：服务器安全运维 node.js

于 2024-01-19 15:54:05 首次发布

本文链接：https://blog.csdn.net/weixin_70015981/article/details/135693277

版权

分享自己编写的支付宝第三方登录流程。

只会讲代码和需要配置的信息！（有错误的地方还望谅解！！！）

1，在支付宝开放平台创建自己的账号(企业)--支付宝开放平台

创建完成后进入右上角控制台，创建一个网页/移动应用。完成后大概是这样：

2，进入应用详情后需要配置信息，主要有两处，左侧侧边栏的开发设置和产品管理。

产品管理：就是你需要哪一些权限功能，比如获取会员信息(手机号)，人脸识别之类的，这个看你需求。

主要配置的是开发设置：这边可以看一下详细的文档--接入准备

简单介绍一下：

① 接口加签方式（密钥/证书）“必填” ：我用的是密钥，这个地方会生成一个应用公钥和支付宝公钥，会让你用支付宝开放平台密钥工具，会生成一个应用秘钥。这几个东西保存好，后面会用到。

② 接口内容加密方式 “选填” ：这个地方如果需要获取手机号的话是必填的。自己配一下就行了。

③ 服务器IP白名单 “选填” ：可以不填，主要是配置允许通过的IP。

④ 应用网关 “必填” ：配置你ICP备案好，且可以正常访问的域名，需要带http(https)。

⑤ 支付宝网关 “必填” ：开发者调用 OpenAPI 发送 http(s) 请求至支付宝的目标地址（gateway），固定为 https://openapi.alipay.com/gateway.do。

⑥ 授权回调地址 “必填” ：就是你支付宝登录后返回auth_code的地址。

⑦ openid配置管理：这个就是获取openid的权限(支付宝用户唯一标识 )。

3，登录流程

3.1，前端逻辑

一个简单的登录页面：

  <body>
    <button>支付宝登录</button>
  </body>
  
  <script>
    const btn = document.querySelector("button");
    const ZFBAppId = "你的APPID";
    const ZFBCallback = "授权回调地址";

    btn.onclick = function () {
        window.location.replace(
          `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${ZFBAppId}&scope=auth_user&redirect_uri=${ZFBCallback}`
        );
    };

点击按钮后会进入支付宝登录页面：

扫码成功后会返回auth_code,会拼接在url上。

拿到auth_code后可以向后端发送一个请求将auth_code发送给后端。

// 获取url中的参数
      function getQueryString(key) { 
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var result = window.location.search.substr(1).match(reg);
        return result ? decodeURIComponent(result[2]) : null;
      }
      let auth_code = getQueryString("auth_code");
      if (auth_code) {
        console.log("登陆成功");
        // 发送请求给后端，后端验证auth_code，返回用户信息
        fetch(`http://localhost/callback?auth_code=${auth_code}`)
          .then((response) => response.text())
          .then((data) => {
            console.log(data)
          })
          .catch((error) => console.error("Error:", error));
      } else {
        console.log("登陆失败");
      }

3.2，后端逻辑

我用的node.js编写的，这边需要安装一个sdk——alipay-sdk

// npm i alipay-sdk
const AlipaySdk = require("alipay-sdk").default;
const alipaySdk = new AlipaySdk({
  appId: "", //APPID
  privateKey:"", //应用私钥
  alipayPublicKey:"", //支付宝公钥
});

app.get("/callback", async (req, res) => {
// 拿到前端返回的auth_code
  const query = req.query;
  const code = query.auth_code;
  if (!code) {
    console.log("登陆失败");
    res.send("登陆失败");
    return;
  }
  console.log("code", code);
// 这里必须要有抛出异常，不然会报错
  try {
//alipay.system.oauth.token接口，为了拿到token和openid
    const data = await alipaySdk.exec("alipay.system.oauth.token", {
      grantType: "authorization_code",
      code,
    });
    console.log(data);
    const accessToken = data.accessToken;
//alipay.user.info.share接口，拿到用户信息，如avatar等
    const authData = await alipaySdk.exec("alipay.user.info.share", {
      auth_token: accessToken,
    });
    console.log(authData);
  } catch (err) {
    console.log(err);
  }
});

如果报错"sub_msg": "验签出错，建议检查签名字符串或私钥与应用公钥是否匹配，网关生成的验签字符串为：xxx 。可以看这里——帮助中心

还有一个视频解释的——帮助

我自己报的错误是开放平台里面配置的公钥和私钥不匹配。这样就可以拿到后端返回的openid和用户头像avatar了。