微信登录

小程序登录

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

登录流程

• 简单代码示例

wx.checkSession({
	success() {
		// session_key 未过期，并且在本生命周期一直有效
	},
	fail() {
		// session_key 已经失效，需要重新执行登录流程
		wx.login({
			success(res) {
				console.log(res); // {errMsg: "login:ok", code: "0210xBz62OfDHQ0CgwD62pt1A620xBzM"}
				if (res.code) {
					// ajax调用后台登录
				} else {
					console.log('登录失败！', res)
					wx.showToast({
						title: '登录失败！',
						icon: 'none'
					})
				}
			}
		})
	}
})  

• 说明
  • wx对象只有在小程序环境才存在，可以看做是浏览器环境的windows对象一样为内置对象
  • 使用code换取用户openid(用户唯一标识)，此时可根据openid自动注册用户或在数据库中查询此用户，并生成自定义access_token来标识用户登录状态
    • 后端服务器请求：GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code，返回如 {"session_key":"EpgmAsaqeyWTvqb2AAhA+g==","expires_in":7200,"openid":"oDJ8P0b1z7GwfSzRx6AlkCP1gACM"}
    • 参考：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
  • 如果需要获取用户信息，则需要用户授权，见下文

获取用户信息

• 示例（https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html）

<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>


Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    // 第一次使用，获得用户授权，此处可以更新用户信息
    console.log(e.detail.userInfo)
  }
})