Vue3 uniapp 授权一键登录

一、uni.login获取openid

function getWxOpenid() {
  uni.login({
    success: async resCode => {
      uni.request({
        url: baseUrl.value + `/wx/baseInfo/getWxOpenId`,
        data: {
          code: resCode.code
        },
        success: res => {
          if (res.statusCode === 200 && res.data.code === 200) {
            openId.value = res.data.data.openid
          }
        }
      })
    }
  })
}

二、需要后台对该接口进行封装，通过后台接口获取access_token

/**
	https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
	HTTPS调用: GET https://api.weixin.qq.com/cgi-bin/token
*/
async function getAccessToken() {
  const res = await getAccessTokenFn()
  if (res.state) {
    accessToken.value = res.data
  }
}

三、前端首先调用该接口获取mobile，然后再根据openid和mobile进行登录获取用户信息

/**
	https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html
	HTTPS调用: POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN 
*/
function loginClick(e) {
  if (checked.value.length) {
    uni.request({
      // access_token需要在请求地址上
      url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${accessToken.value}`,
      method: 'POST',
      // code放在data中
      data: {
        code: e.code
      },
      success: async res => {
        if (res.statusCode === 200 && res.data.errcode === 0) {
          const {
            phoneNumber
          } = res.data.phone_info
          mobile.value = phoneNumber
          const data = {
            mobile: phoneNumber,
            openId: openId.value
          }
          const userRes = await getUserInfoFn(data)
          if (userRes.state) {
            userInfo.value = userRes.data
            uni.showToast({
              title: '登录成功',
              icon: 'none'
            })
            setTimeout(() => {
              uni.$uv.route({
                type: 'tab',
                url: '/pages/index/index'
              })
            }, 500)
          }
        }
      }
    })
  } else {
    uni.showToast({
      title: '请您勾选并阅读下方协议',
      icon: 'none'
    })
  }
}