小程序开发实战案例之如何获取用户信息(一)

✌️ 简单唠两句

经过小程序 0-1 开发系列内容的学习,相信大家对于如何开发小程序已经有了一些初步了解。今天新开设小程序开发实战专栏,希望能帮助大家在 不同小程序开发场景中 更丝滑的完成开发~

支付宝小程序开发 0-1 系列专栏内容详见:

最新demo版|如何0-1开发支付宝小程序之前期准备篇(一)

最新demo版 | 如何0-1开发支付宝小程序之如何调试小程序(二)

最新demo版 | 如何0-1开发支付宝小程序之小程序页面功能介绍(三)

最新demo版 | 如何0-1开发支付宝小程序之小程序如何上线(四)

那么今天,我们来看一下支付宝小程序如何获取用户信息~

支付宝提供了不同的能力来实现获取用户的不同信息,分别为:

大家可以根据自己的使用场景来接入,接下来将对这几个方法逐一介绍。

获取用户信息原则

在介绍之前,先明确一个授权原则(很重要):

  • 支付宝小程序 不允许首屏弹窗引导用户授权, 即用户进入小程序后无任何交互动作直接弹出授权弹窗

有上面情况的话,小程序审核无法通过,大家注意避坑。

用户授权

该方法获取的信息最多,但是步骤也是最复杂的。

  • 使用的 API: my.getAuthCode
  • 可获取到的信息: userId、头像地址、昵称、性别、省/市名称
  • 前端是否能直接获取到信息: 否,需要与后端交互获取到信息
  • 使用场景:获取用户信息登录
xml 复制代码
<!-- .axml -->
<button size="default" type="primary" onTap="getCode">点击进行用户授权</button>
javascript 复制代码
// .js页面
Page({
getCode() {
  my.getAuthCode({
    scopes: 'auth_user',
    success: res => {
      const authCode = res.authCode;
      console.log('authCode',authCode);
      // 通过my.request方法,将authCode传到服务端获取用户信息
      my.request({
        // 你的服务器地址
        url: 'https://yourserveraddress',
        data: {
          authCode,
        },
        success(res) {
          // 后端返回接收用户信息res
          console.log(res)
        }
      })
    },
    fail: err => {
      console.log('my.getAuthCode 调用失败', err)
    }
  });
},
});

后端接收到 authCode 之后,需要走下面两步才能获取到用户信息:

1、通过 alipay.system.oauth.token 接口获取 access_token 参数

2、将 access_token 参数传入 alipay.user.info.share 接口中获取

这边汇总了一些调用时常见的问题,大家可以参考下:

获取会员基础信息

  • 使用的 API: my.getOpenUserInfo
  • 可获取到的信息: 头像地址、昵称。
  • 前端是否能直接获取到信息:
  • 使用场景: 单独获取头像、补充昵称信息等
xml 复制代码
<!-- .axml -->
<button
  open-type="getAuthorize"
  scope="userInfo"
  onGetAuthorize="getOpenUserInfo"
  onError="handleAuthError"
>
  会员基础信息授权
</button>
javascript 复制代码
// .js页面
Page({
  data: {
    canIUseAuthButton: my.canIUse('button.open-type.getAuthorize')
},
getOpenUserInfo() {
    my.getOpenUserInfo({
        success: (res) => {
            let userInfo = JSON.parse(res.response).response
            console.log('userInfo',userInfo)
        },
        fail: (err) => {
            console.log(err)
        }
    });
}
});

IDE 返回:

实际只能获取到头像地址、昵称。性别和省市信息虽然有对应的字段但是无法返回具体值。

对接my.getOpenUserInfo的常见问题汇总在这里了:

获取会员手机号

  • 使用的 API: my.getPhoneNumber
  • 可获取到的信息: 手机号
  • 前端是否能直接获取到信息: 否,前端获取到的是加密数据,需要传到后台解密。
xml 复制代码
<!-- .axml -->
<button
  open-type="getAuthorize"
  scope="phoneNumber"
  onGetAuthorize="getPhoneNumber"
  onError="handleAuthError"
  >
  授权手机号
</button>
javascript 复制代码
// .js页面
Page({
getPhoneNumber() {
  my.getPhoneNumber({
    success: (res) => {
      let encryptedData = res.response;
      console.log('phone',encryptedData)
      my.request({
        //你的服务器地址
        url: 'https://xxxxxxx',
        data: encryptedData,
      });
    },
    fail: (res) => {
      console.log(res);
    },
  });
}
});

授权之后,你会发现获取到的手机号信息是一串 加密的数据

别担心,这是正常的,因为涉及到用户的敏感信息,所以无法直接明文获取到信息

按照下面的步骤走:

1、将这串数据通过 my.request 方法传到服务端

2、通过 [如何使用AES密钥解密] 进行解密

3、解密成功,获取到手机号

如果解密出来的数据不是手机号,而是一串报错信息,例如:

也不要着急,参考上面的方案进行排查,解决问题后再进行获取。

获取手机号的问题比较多,其他问题大家也可以参考下:

获取会员收货地址

  • 使用的 API: my.getAddress
  • 可获取到的信息: 收货地址列表
  • 前端是否能直接获取到信息: 是。如果没有地址,会提示新增收货地址。
xml 复制代码
<!-- .axml -->
<button size="default" type="primary" onTap="getAddress">点击获取收货地址</button>
javascript 复制代码
// .js页面
Page({
getAddress(){
  my.getAddress({
    success: function(res) {
      console.log(res);
    },
    fail: function(err) {
      console.log(err);
    }
  });
}
});

获取的地址是支付宝里面的,跟淘宝不互通 ,参考👉[my.getAddress拉取的是哪里的地址]

获取运动数据

  • 使用的 API: my.getRunData
  • 可获取到的信息: 获取某天的运动步数
  • 前端是否能直接获取到信息: 否,前端获取到的是加密数据,需要传到后台解密
xml 复制代码
<!-- .axml -->
<button size="default" type="primary" onTap="getRunData">点击获取运动步数</button>
javascript 复制代码
// .js页面
Page({
  getRunData(){
  my.getRunData ({
    // 替换为最近三十天内某一天的日期
    countDate: '20223-11-27',
    success: (res) => {
      let runData = res.response;
      my.request({
        //你的服务器地址
        url: 'https://xxxxxxx',
        data: runData,
      });
    },
    fail: (res) => {
      console.log(res);
    },
  });
 }
});

跟获取手机号一样,需要将这串数据传到服务端,通过 [如何使用AES密钥解密] 进行解密。

小程序步数获取的常见问题看:

以上就是关于【小程序如何获取用户信息】的实践案例了~

大家有问题欢迎沟通✿✿ヽ(°▽°)ノ✿ ~

相关推荐
Qiuner1 个月前
支付宝开放平台竟出现一张神秘人脸!
前端·安全·bug·支付宝·原力计划
不法2 个月前
uniapp h5支付(支付宝和微信支付)
前端·微信·uni-app·支付宝
悟空码字2 个月前
支付宝低代码搭建电商小程序,无需编程,可视化操作
小程序·支付宝
w2sfot2 个月前
nodejs实现:支付宝订单查询
nodejs·支付宝·js加密
tjsoft2 个月前
使用笔记之-PB微信支付&支付宝支付源代码
笔记·微信·支付宝·源代码·pb·汇通软件·聚合支付
裁晨的梦4 个月前
在flutter中接入unisdk实现小程序
android·前端·智能小程序
赣州云智科技的技术铺子5 个月前
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
小程序·云开发·智能小程序
赣州云智科技的技术铺子5 个月前
做AI运动小程序有哪些解决方案,如何进行选型?
小程序·云开发·智能小程序
悟空码字6 个月前
支付宝小程序模板开发,实现代小程序备案申请
小程序·支付宝·备案
小hu同学7 个月前
uniapp编译支付宝小程序
vue.js·小程序·uni-app·支付宝