支付宝小程序-授权,获取手机号,登录等技术

注意

  1. 小程序 不允许首屏弹窗引导用户授权。需要在用户充分了解小程序的业务内容后再引导用户授权,建议将小程序授权环节放在业务流程中
  2. 官网:https://opendocs.alipay.com/mini/introduce/authcode

获取授权码-getAuthCode

<button type="primary" onTap="getAuthCode">获取授权码</button>

Page({
  data: {},
  onLoad() {},
  getAuthCode: () => {
    my.getAuthCode({
      scopes: 'auth_user',
      success: ({ authCode }) => {
        console.log('authCode: ', authCode);
      },
    });
  },
});

//结果
authCode:  34d2caa2e4d542fd89562863090fVD34

后台
后台拿到authcode后去获取token

获取用户信息-getOpenUserInfo

注意:必须使用button+(open-type=“getAuthorize”)才能使用

<button type="primary" open-type="getAuthorize" onGetAuthorize="getUserInfo" 
  onError="onAuthError" scope='userInfo'>会员基础信息授权</button>

接着调用my.getOpenUserInfo

getUserInfo(){
  my.getOpenUserInfo({
    fail: (err) => {
      // console.log('获取用户信息失败: ', err);
    },
    success: (res) => {
      let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
      // console.log('获取用户信息-suc: ', userInfo);
    }
  });
}

返回如下字段

avatar: "https://tfs.alipayobjects.com/images/partner/T1jU8rXopdXXXXXXXX"
city: "杭州市"
code: "10000"
countryCode: "CN"
gender: "m"
msg: "Success"
nickName: "zyf"
province: "浙江省"

获取手机号

https://opendocs.alipay.com/mini/introduce/01sxqf#user_name
注意:必须使用button组件配open-type,scope

<button type="primary" open-type="getAuthorize" onGetAuthorize="getPhoneSuc" 
  onError="getPhoneErr" scope='phoneNumber'>授权手机号</button>
getPhoneSuc(){
	my.getPhoneNumber({
    success: (res) => {
      console.log('res: ', res);
      let encryptedData = JSON.parse(res.response);
      console.log('getPhone-suc: ', encryptedData);
      resolve(encryptedData);
      // my.request({
      //     url: '你的后端服务端',
      //     data: encryptedData,
      // });
    },
    fail: (res) => {
      console.log('getPhone-err: ', res);
      reject(res)
    },
  });
}

获取信息对比

1.获取用户信息
	open-type="getAuthorize"
	scope='userInfo'

2.获取手机号
	open-type="getAuthorize" 
	scope='phoneNumber'

项目中登录流程

获取授权码 --> 获取手机号 --> 将授权码、手机号密文传给后台 --> 后台去获取用户信息、token并返回
在这里插入图片描述
最后,如果帮你脱坑的话,希望小伙伴们打赏一毛钱
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u012570307/article/details/121248013
今日推荐