登录

Overview

• 借助小程序的宿主环境，通过小程序的授权实现登录
• 必须要用户主动授权才可以实现；基于用户对产品充分了解并预知可能的风险
• 可以自定义登录，如：使用用户名、密码或邮箱、验证码登录
• 多使用表单实现

API

• 以下接口均被官方回收或调整，建议使用 头像昵称填写 完善用户信息，即新项目示例代码所示

1. wx.getUserProfile
2. wx.getUserInfo
3. UserInfo
4. <button> 的 open-type
5. <open-data>

wx.login()

• 调用 wx.login() 获取 code
• 使用 code、appid 和 appserv 向微信请求用户的 openod 和 session
• 保存并自定义用户状态
• 启动时检查：在 onLaunch 中自动检查登录状态
• 状态标记：使用 globalData.isLogin 标记登录状态
• 多层验证：

  检查本地是否有 token

  验证 token 是否过期

  检查微信 session 是否有效

• 数据持久化：使用 wx.setStorageSync 保存登录信息
• 页面使用：在页面中通过 getApp().globalData.isLogin 获取登录状态
• 登录/登出：提供完整的登录和登出功能
• 前端 - 演示获取 openid 和 session 的过程

onLaunch: function () {
  this.login()
},

login() {
  wx.login({
    success(res) {
      if (res.code) {
        wx.request({
          url: 'http://127.0.0.1:3000/login',
          // req.body
          // 如果没有指定为 post，则在 req.query
          method: 'POST',
          data: {
            code: res.code
          },
          success: res => {
            console.log(res);
            wx.setStorageSync('openis', res.data.openid)
            wx.setStorageSync('session_key', res.data.session_key)
          }
        })
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })
}

• 后端 - 使用 Node.js 搭建本地服务器

const wx = {
  appid: 'wxf878bb2864a8f765',
  assServ: 'f084f92acca09b2b19081c2e2758b082'
}

app.post('/login', (req, res) => {
fetch(`https://api.weixin.qq.com/sns/jscode2session?appid=${wx.appid}&secret=${wx.assServ}&js_code=${req.body.code}&grant_type=authorization_code`)
  .then(res => res.json())
  .then(result => {
    res.json({
      errno: 0,
      session_key: result.session_key,
      openid: result.openid
    })
  })
})

• 可以使用微信头像或者从相册中选择、或者拍照
• 可以使用微信昵称或者输入
• 头像或昵称变化后，及时更新数据；头像还可以 上传 到服务器

<button open-type="chooseAvatar" bind:chooseavatar="chooseAvatar">
  <image src="{{userInfo.avatar}}" mode="aspectFill" />
</button>
<input type="nickname" bindinput="iptName" value="{{userInfo.avatar}}"/>

const defaultAvatarUrl = 'https://glpla.github.io/imgs/qrcode_glpla.github.io.png'

Page({
  data: {
    userInfo:{
      avatar: defaultAvatarUrl,
      nickName:''
    }
  },

  chooseAvatar(e) {
    this.setData({
        'userInfo.avatar': e.detail.avatarUrl
    })
    wx.setStorageSync('userInfo', this.data.userInfo);
    app.globalData.userInfo = this.data.userInfo
  },

  iptName(e){
    this.setData({
      'userInfo.nickName': e.detail.value
    })
    wx.setStorageSync('userInfo', this.data.userInfo);
    app.globalData.userInfo = this.data.userInfo
  }
})