小程序03 获取用户信息方案

1 登陆

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

通过wx.login在success中拿到登陆凭证，然后通过wx.request把code传到开发者服务器。如果当前微信用户还没有绑定当前小程序业务的用户身份，那在这次请求应该顺便把用户输入的帐号密码一起传到后台，然后开发者服务器就可以校验账号密码之后再和微信用户id进行绑定，小程序端的示例代码如下所示。

Page({
  tapLogin: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          wx.request({
            url: 'https://test.com/login',
            data: {
              username: 'zhangsan', // 用户输入的账号
              password: 'pwd123456', // 用户输入的密码
              code: res.code
            },
            success: function(res) {
              // 登录成功
              if (res.statusCode === 200) {
                console.log(res.data.sessionId) // 服务器回包内容
              }
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    });
  }
})

res.code就是登陆凭证

开发者的后台就拿到了前边wx.login()所生成的微信登录凭证code，此时就可以拿这个code到微信服务器换取微信用户身份。微信服务器为了确保拿code过来换取身份信息的人就是刚刚对应的小程序开发者，到微信服务器的请求要同时带上AppId和AppSecret，

开发者服务器和微信服务器通信也是通过HTTPS协议，微信服务器提供的接口地址是：
https://api.weixin.qq.com/sns/jscode2session?appid=&secret=&js_code=&grant_type=authorization_code

• openid：微信用户的唯一标识
• session_key：会话密钥
• unionid：用户在微信开放平台的唯一标识符。本字段在满足一定条件的情况下才返回。

开发者服务器和开发者的小程序应该也有会话密钥SessionId。用户登录成功之后，开发者服务器需要生成会话密钥SessionId，在服务端保持SessionId对应的用户身份信息，同时把SessionId返回给小程序。小程序后续发起的请求中携带上SessionId，开发者服务器就可以通过服务器端的Session信息查询到当前登录用户的身份，这样我们就不需要每次都重新获取code，省去了很多通信消耗。

简单来说：

1. 小程序调用wx.login()获取临时登录凭证code，并回传到开发者服务器。
2. 开发者服务器以code换取 用户唯一标识openid和会话密钥session_key。
3. 之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

1.1 wx.login(Object)

调用接口wx.login()获取临时登录凭证（code）

OBJECT参数说明：

• timeout：超时时间，单位ms
• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数
• completeFunction：接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

• errMsg: 调用结果
• code: 用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用api，使用 code 换取openid和session_key等信息

示例代码

//app.js
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    });
  }
})

2 获取用户信息

老的方式是使用wx.getUserInfo接口直接弹出授权框，这种方式从2018年4月30日开始体验版此接口调用失败，改为使用两种方式获取用户基本信息：

1. 使用button组件，open-type指定为getUserInfo，获取用户基本信息
2. 使用open-data展示用户基本信息

2.1 使用button组件

HTML模板

open-type="getUserInfo" 
    lang="zh_CN" 
    bindgetuserinfo="onGotUserInfo">获取用户信息

对应的方法：

onGotUserInfo(e) {
  // mpVue中获取detail
  // const detail = e.mp.detail; 
   const detail = e.detail;
  // 如果用户拒接授权
  if (!detail.userInfo) {
    return;
  }
  // 用户信息
  console.log(detai.userInfo)
}

如果用户曾经时进行过授权，则点击按钮不再弹框，直接调用对应的方法

2.2 使用open-data

用于展示微信开放的数据：

• type：开放数据类型
• open-gid：当type="groupName"时生效, 群id
• lang：当type="user*"时生效，以哪种语言展示userInfo，有效值有：en（默认值）, zh_CN, zh_TW

type有效值：
- groupName：拉取群名称
- userNickName：用户昵称
- userAvatarUrl：用户头像
- userGender：用户性别
- userCity：用户所在城市
- userProvince：用户所在省份
- userCountry：用户所在国家
- userLanguage：用户的语言

<open-data type="groupName" open-gid="xxxxxx">open-data>

<open-data type="userAvatarUrl">open-data>

<open-data type="userGender" lang="zh_CN">open-data>

可以直接展示微信的开放数据，但是无法将开放数据保存

获取uninoId

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

获取途径在这里。

微信官方的推荐方案

1. 调用wx.login获取code，然后从微信后端获取到sessionKey，用于解密getUserInfo返回的敏感数据
2. 使用wx.getSetting获取用户的授权情况
   
   1. 如果用户已经授权，直接调用APIwx.getUserInfo获取用户信息
   2. 如果用户未授权，在界面显示一个按钮提示用户登入，当用户点击并且授权后就获取到用户信息
3. 获取到用户数据后就可以进行展示或者发送给后端

如果已经授权了，那就可以把按钮隐藏，之后的授权直接用APIwx.getUserInfo调用（因为已经授权，所以也不会弹窗），用户也不会再点了

参考

• https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html#wxloginobject
• https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=000cc48f96c5989b0086ddc7e56c0a
• https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=1650183953&docid=0000a26e1aca6012e896a517556c01
• https://developers.weixin.qq.com/miniprogram/dev/component/button.html
• https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
• https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000a2e386a4b60c0f10635d155b801&highline=getUserInfo