微信小程序 - 登录获取openid和用户信息（适配getUserProfile）

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

微信小程序中如果需要使用微信的用户信息建立自己的用户体系，需拿到唯一标识openid，然后通过getUserProfile（基础库2.10.4以上可用）或者getUserInfo（基础库2.10.4以下可用）获取用户信息，进而通过微信的用户信息建立自己的用户体系。

如果不需要登录体系，只是单纯展示用户头像昵称，可直接通过开放能力的open-data获取

注意：

·2022年5月9日发布了新的公告小程序用户头像昵称获取规则调整公告·

1、获取openid

1.1、通过云函数获取

openid通过云函数获取比较简单方便，我起的云函数方法名为login，代码实现记得文件夹右击选择 “创建并部署”
小程序云函数获取用户唯一标识官方文档

云函数代码

// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含小程序端调用传入的 data
 * 
 */
exports.main = async (event, context) => {
  console.log(event)
  console.log(context)

  // 可执行其他自定义逻辑
  // console.log 的内容可以在云开发云函数调用日志查看

  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}

云函数调用

res中返回openid，unionid，env等信息

  //云函数登录
  cloudLogin() {
    return new Promise((resolve, reject) => {
      wx.cloud.callFunction({
        name: 'login'
      }).then(res => {
        return resolve(res)
      }).catch(err => {
        return reject(err)
      });
    })
  },

1.2、调用微信接口获取微信用户唯一标识

按照下面流程说明的2步骤，即可获取用户唯一标识
官方流程文档

流程说明：

1.调用 wx.login() 获取 临时登录凭证code，并回传到开发者服务器。
2.调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意事项：

1.会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
2.临时登录凭证 code 只能使用一次

相关接口官方文档：

获取临时登录凭证code，有效期五分钟（可调用wx.checkSession检查登录态是否过期）
登录凭证校验(成功返回用户唯一标识 OpenID)

2、小程序端获取用户相关信息

获取用户信息(包含：微信名、性别、头像、省市区，国家)官方文档
2021年04月15日，微信发布了一条公告：小程序登录、用户信息相关接口调整说明，推出了新的获取用户信息的接口getUserProfile（基础库2.10.4以上可用），2021年4月28日24时后发布的小程序新版本需要进行适配

因此获取用户信息需要使用两个方法：
基础库2.10.4以上使用：getUserProfile
基础库2.10.4以下使用：getUserInfo

注意事项：

1.需要配合button按钮调用
2.需要做版本适配，基础库 2.10.4以上使用wx.getUserProfile，以下使用wx.getUserInfo
3.getUserProfile调用必须为直接调用，不能通过其他函数回调调用
否则会报getUserProfile:fail can only be invoked by user TAP gesture.错误

调用时机处理：

getUserProfile每次调用会有一个获取用户信息弹框，因此关于获取用户信息的时机，博主的做法是在需要登录时，弹出登录弹框，里面有登录按钮，用户点击按钮，调用获取openid和用户信息的方法，然后把返回的openid和用户信息存到数据库中，下次登录重复此操作`

wxml关键代码：

  <block wx:if="{{canIUseGetUserProfile}}">
    <button class="loginBtn" type="primary" size="default" bindtap="getUserProfile">微信一键登录</button>
  </block>
  <block wx:else>
    <button class="loginBtn" type="primary" size="default" open-type="getUserInfo" lang="zh_CN"
      bindgetuserinfo="getUserInfo">微信一键登录</button>
  </block>

js关键代码：

   // 页面创建时执行
   this.setData({
     canIUseGetUserProfile: wx.getUserProfile ? true : false
   })

     //点击一键登录，基础库2.10.4 以上使用
    getUserProfile: function () {
      console.log('点击一键登录，基础库2.10.4 以上使用');
      let that = this;
      let p1 = this.cloudLogin()
      let p2 = this.promiseGetUserProfile()
      Promise.all([p1, p2]).then((res) => {
        if (res && res[0] && res[1]) {
          that.successHandle(res[0].result.openid, res[1].userInfo)
        } else {
          that.failHandle()
        }
      }).catch((err) => {
        that.failHandle(err)
      })
    },
    //获取用户的当前设置
    getSetting() {
      return new Promise((resolve, reject) => {
        wx.getSetting({
          withSubscriptions: true,
          success: function (res) {
            return resolve(res)
          },
          fail: function (err) {
            return reject(err)
          }
        })
      })
    },
    //云函数登录
    cloudLogin() {
      return new Promise((resolve, reject) => {
        wx.cloud.callFunction({
          name: 'login'
        }).then(res => {
          return resolve(res)
        }).catch(err => {
          return reject(err)
        });
      })
    },
    //获取用户信息 - 基础库2.10.4 以上使用
    promiseGetUserProfile() {
      return new Promise((resolve, reject) => {
        wx.getUserProfile({
          lang: 'zh_CN',
          desc: '获取您的昵称、头像、地区及性别', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            return resolve(res)
          },
          fail: (err) => {
            return reject(err)
          },
        })
      })
    },
    //点击一键登录，基础库2.10.4 以下使用
    getUserInfo: function (e) {
      console.log('点击一键登录，基础库2.10.4 以下使用');
      // console.log(e.detail.userInfo);
      // console.log("用户信息--" + JSON.stringify(e.detail.userInfo))
      let that = this;
      that.cloudLogin().then(res => {
        that.getSetting().then(res2 => {
          if (res2.authSetting['scope.userInfo']) {
            that.successHandle(res.result.openid, e.detail.userInfo)
          } else {
            wx.showToast({
              title: '未授权',
              icon: 'none'
            })
          }
        }).catch(err => {
          that.failHandle(err)
        });
      }).catch(err => {
        that.failHandle(err)
      });
    },

然后在successHandle中把数据存到本地和数据库中即可