官方介绍

【小程序】授权登录 - 图1
根据这张图,我们基本可以理解,小程序授权登录需要这几步:

  1. 小程序初始化调用wx.login获取到code
  2. 通过ajax发送code到后台进行交互
  3. 后台接收code通过appi+appsecret+code调取微信接口服务获取session_key+openid等
  4. 后台服务处理session_key+openid等参数,自定义登录状态,返回应有的参数给前台,比如我公司除了返回session_key+openid以外,还有uid,unionId等参数,供前台使用
  5. 前台小程序自定义登录状态存入storage(比如cookie,session等)
  6. 前台通过header携带自定义登录状态与后台进行交互
  7. 后台通过自定义登录状态查询相应的openid等,将业务数据返回给前天

    这里面有一个坑: 第2步,可能不止发送code,还要发送其他数据 比如我公司需要发送:mpId品牌方id,source标识小程序,data用户授权的信息 根据公司业务不同,传的参数也不一样

用户授权登录

1. wx.login获取code

  1. wx.login({
  2.         timeout: 10000,
  3.         success: (res) => {
  4.           console.log(res.code) // 这里获取到code
  5.         },
  6.         fail: (err) => {
  8.         }
  9.       });

2. 用户授权

  1.     <button open-type="getUserInfo" bind:getuserinfo="onGotUserInfo" class="authorizedBtn">确认授权</button>

image.png

  1. // 获取用户授权信息
  2. onGotUserInfo(event) {
  3.     const { userInfo } = event.detail
  4.     wx.getUserInfo({
  5.       lang: 'zh_CN',
  6.       success: (data) => {
  7.         console.log(data); // 获取的用户授权信息
  8.       },
  9.     });
  10.   },

3. 通过code,用户授权信息与后台进行交互

  1. wx.request({
  2.     // url, mpid,source2,小程序登录code
  3.     url:  app.data.url + '/wx/user/miniApp/login?mpId=' + app.data.mpId + '&source2=miniapp&code=' + code,
  4.     data: userInfo, // 传入用户授权信息
  5.     method: 'POST',
  6.     header: {
  7.         "Accept": "application/json, text/javascript, */*; q=0.01",
  8.         "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  9.     },
  10.     success: function (res) {
  11.         console.log(res) //登录成功获取后台返回的数据
  12.     }
  13. })