半年前开发过几个个小程序,应女朋友要求,帮她整理一份小程序登录教程。
- 小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
- 开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
- 服务器生成自定义登录状态session,返给前端。
- 小程序把自定义状态session保存到localstroage,以后每次业务请求要携带上。
登录流程时序
以上是小程序官方文档提供的教程,考虑到实际场景用户状态有两种情况:
- 用户第一次访问没有session,即注册
- 用户之后访问存在session,即登录,有两种情况
- session有效
- session失效
(一)注册
- wx.login(),获取code 换取openid 、session_key
- wx.getUserInfo(),获取userInfo、encryptedData、iv,直接和间接得到完整用户信息
考虑到wx.getUserInfo()接口的调整,请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作,然后调用以下login方法
- login方法,获取到的seesion为什么挂载到挂载到App.globalData上,之后会讲
login(){
wx.login({
// 发送 res.code 到后台换取 openId, sessionKey, unionId
success(res){
var code = res.code
wx.getUserInfo({
success(res){
wx.request({
url: 'https://xxx.com/signin',
data: {
userInfo: res.userInfo, //用户信息对象,不包含 openid 等敏感信息
encryptedData: res.encryptedData, //包括敏感数据在内的完整用户信息的加密数据,
iv: res.iv //加密算法的初始向量
},
success(res){
//注册成功
this.stroage.set('session', res.data.session) // 本地存储session
this.globalData.session = res.data.session //挂载到globalData上
//do something
}
})
}
})
}
})
}
- 这里封装了一个request方法,每次业务请求要携带上session,需要挂载到App.globalData以供其他子页面使用
request(url, data, fn){
var session = this.globalData.session
var datas = Object.assign({session}, data) //把session合并data
this.stroage.set('session', res.data.session)
wx.request({
url,
data: datas,
success(res){
//成功回调处理
fn && fn(res)
},
fail(error){
//错误处理
wx.showModal({
title: '提示',
content: '系统错误'
})
}
})
}
- 这里封装了必备的localStroage操作
set(key, val) {
localStorage.setItem(key, JSON.stringify(val))
}
get(key) {
return JSON.parse(localStorage.getItem(key))
}
remove(key) {
localStorage.removeItem(key)
}