微信小程序踩坑记 - 登录+授权用户基本信息

最近从0到1搭建了微信小程序，记录下登录、授权用户基本信息的过程和遇到的问题：

一、登录

1.1 前端

wx.login({
  success: (res) => {
    wx.request({
      url: '服务端提供的登录接口',
      method: "POST",
      data: {
        code: res.code,
      },
      success(res) {
        if (res.header["Set-Cookie"]) {
          wx.setStorageSync("cookie", res.header["Set-Cookie"]);
        }
      },
      fail(err) {},
    });
  },
});

1.2 服务端

服务端调用微信提供的接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key：

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 

// 返回的数据格式
{
    "openid":"xxxxxx",
    "session_key":"xxxxx",
    "unionid":"xxxxx",
    "errcode":0,
    "errmsg":"xxxxx"
}

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

二、获取手机号

点击按钮，触发获取手机号弹层。

注意：该功能需要用户主动触发，不支持使用 API 调用。

 <button open-type="getPhoneNumber" bindgetphonenumber="getphonenumber">绑定手机号</button>
 
getphonenumber(e) {
    console.log('e', e.detail);
}

// 返回数据格式
{
    code: "",
    encryptedData: "",
    iv: "",
    errMsg: ""
}

三、获取用户基本信息

（目前开发的项目，在骂骂咧咧声中去掉了这个功能🤭）

wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力如下👇：

	小程序 wx.getUserProfile 接口	插件 wx.getUserInfo 接口	头像昵称填写能力
基础库 2.27.1 及以上版本	❌	❌	✅
基础库 2.21.2 ～ 2.27.0 版本	✅	✅	✅
基础库 2.10.4 ～ 2.21.0 版本	✅	✅	❌
基础库 2.9.5及以下版本	❌ （需要进行低版本兼容）	✅	❌

• 以前，可以通过 wx.getUserInfo（自2021年4月13日起，授权不会出现弹层了） 或者 wx.getUserProfile 直接获取用户的昵称、头像等信息；
• 第一次比较大的变更：自 2022年10月25日24 时后，userInfo 中的昵称返回 “微信用户”，头像返回灰色头像。如果需要真实的微信昵称和头像等信息，需要服务端根据 encryptedData 和 iv 调取微信接口进行解密获取数据；
• 第二次比较大的变更：在基础库版本 2.27.1 以上及 APP 版本8.0.28 以上中，wx.getUserInfo 和wx.getUserProfile 已经不被支持了，只能通过头像昵称填写能力来获取用户信息。

3.1 wx.getUserInfo

• 适用基础库版本： 2.27.0 及以下

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

getUserInfo() {
  wx.getSetting({
    success: (res) => {
      if (res.authSetting['scope.userInfo']) {
        wx.getUserInfo({
          success: (res) => {
            const postData = {
              encryptedData: res.encryptedData,
              iv: res.iv
            }
            console.log('handleGetUserInfo', res);
            this.getCurUserInfo(postData);
          }
        })
      }
    }
  })
},

3.2 wx.getUserProfile

• 适用基础库版本：2.10.4 ～ 2.27.0

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

data: {
    userInfo: {},
    canIUseGetUserProfile: false,
},
onLoad() {
    if (wx.getUserProfile) {
        this.setData({
            canIUseGetUserProfile: true
        })
    }
},
handleGetUserProfile(e) {
  console.log('e', e);
  wx.getUserProfile({
    desc: '用于完善会员资料',
    success: (profileRes) => {
      const postData = {
        encryptedData: profileRes.encryptedData,
        iv: profileRes.iv
      }
      // 调接口获取解密的数据
    }
  })
}

3.3 服务端解密

参考：解密数据解密算法

3.4 获取头像昵称

• 适用基础库版本：2.21.2 及以上

// 获取头像
<button open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
</button> 

onChooseAvatar(e) {
    console.log('e', e);
    const { avatarUrl } = e.detail 
    this.setData({
        avatarUrl,
    });
}

// 获取昵称
<mp-form>
    <mp-cells>
        <mp-cell title="昵称">
            <input type="nickname" class="weui-input" placeholder="请输入昵称"/>
        </mp-cell>
    </mp-cells>
</mp-form>

四、参考

• 小程序用户头像昵称获取规则调整公告
• 官方文档：wx.getUserInfo
• 官方文档：wx.getUserProfile
• 官方文档：获取头像昵称
• 官方文档：wx.getPhoneNumber