Uniapp开发小程序实现授权一键登录(注：支持vue2项目)

<template>
    <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权一键登录</button>
</template>

    data() {
        return {
            session_key: ''
        }
    }

一、通过uni.login获取js_code

// 获取openid和session_key,此方法在onLoad中调用
getOpenid() {
  uni.login({
    success: async res => {
      // 这里可以拿到js_code，用于换取openid
      if (res.errMsg === 'login:ok') {
        let query = {
          js_code: res.code
        };
        const resOpenid = await this.$u.post('获取openid后台接口地址', query);
        if (resOpenid.code === 200) {
          // 缓存openid
          this.$u.vuex('vuex_openid', resOpenid.data.openid);
          // 赋值session_key，用于解密手机号码
          this.session_key = resOpenid.data.session_key;
        }
      }
    }
  })
}

二、通过下载解密插件对手机号进行解码

1. 官网下载地址

2. 下载成功找对应的Node文件夹下的WXBizDataCrypt.js文件，放到对应项目中

3. 引入插件js到login.vue，进行解密手机号，通过手机号和openId获取token和user信息

import WXBizDataCrypt from '文件所在位置';

// 一键授权登录
async getPhoneNumber(e) {
  // 创建WXBizDataCrypt的实例对象
  let wxb = new WXBizDataCrypt('当前appid', this.session_key);
  // 解密手机号
  let { phoneNumber } = wxb.decryptData(e.detail.encryptedData, e.detail.iv);
  // 传递mobile和openid走接口获取token和user信息
  let query = {
    mobile: phoneNumber,
    openid: this.vuex_openid
  };
  const res = await this.$u.post('接口地址', query);
  if (res.state) {
    // 存储token
    this.$u.vuex('vuex_token', res.data.token);
    // 存储user
    this.$u.vuex('vuex_user', res.data.user);
    // 提示语
    this.$u.toast('登录成功');
    // 跳转首页
    this.$u.route({
      type: 'tab',
      url: '/pages/tabbar/home'
    })
  }
}