小白随笔，大神勿理 —— 微信小程序之登录注册流程
-
Reference material（参考材料）：
微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/index.html
授权登陆流程，参看 官方API - 登陆接口
官方文档给出的登录流程：
20180521140234249.png Prerequisite（前提条件）:知道的微信小程序的一些API接口的规则
- wx.login()：调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。调用此方法获取的code只能用与一次校验。即检验后是否成功都会失效。
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
- wx.getSetting() ： 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
-
wx.getUserInfo()：获取用户信息。
-wx.getStorageSync()：获取本地缓存中指定的 key。
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
- wx.request()：发起 HTTPS 网络请求。
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
-
重头戏：
-
正常流程：如微信官方文档所示：
3.1. 调用wx.login获取code → code用于wx.request向服务器请求参数，（服务器会调用appid+appsecret+code校验后返回session_key+openid等)，服务器认证成功后会返回一个自定义登录态（token之类）。
3.2. 后端返回自定义登录态后，我们便可以用这个登录态通过wx.request()去向服务器请求数据啦~~ -
自我见解：在官方demo的结论下，我们可以延申一下整个登录注册的流程：
jianshu1.png - 注意！！：由于自定义登录态有使用时效，对于使用本地过期的自定义登录态，用户信息等去请求数据不成功的时候，应该调用login方法重新去获取自定义登录态和用户信息。
- demo
demo: function() {
var token = wx.getStorageSync('token')
var userInfo=wx.getStorageSync('userInfo')
if(token&&userInfo){
app.globalData.token = token;
app.globalData.userInfo=userInfo;
wx.navigateTo({
url: "路径"
})
}else{
this.login()
}
},
//判断与获取用户信息
login: function(url) {
var that = this;
// 登录
wx.login({
success: allres => {
//去服务器获取token,即登录或注册
listrequest.miniLogin(allres.code).then(function(res) {
if (res返回的数据不存在？) {
//如果不存在，转过去注册
that.register(url)
} else {
app.globalData.token=res.data.data.token
app;globalData.userInfo=res.data.data.userInfo
wx.setStorage({
key:'token',
data:res.data.data.token
})
wx.setStorage({
key: 'userInfo',
data: res.data.data.userInfo,
})
console.log(res2);
wx.navigateTo({
url: url
})
}
})
}
})
},
//注册
register: function(url) {
var that = this;
wx.login({
success: allres => {
//重新调用一次wx.login，因为每次的code只能用一次
wx.getUserInfo({
success: res => {
var data = {
code: allres.code,
iv: res.iv,
encryptedData: res.encryptedData
}
var header = {
'content-type': 'application/x-www-form-urlencoded' //默认值
}
//调用服务器注册
listrequest.miniRegister(data, header).then(function(res) {
if(res.data.code==200){
app.globalData.token = res中的token;
app.globalData.userInfo=res中的userinfo
wx.setStorage({
key: 'token',
data: res.data.token
})
wx.setStorage({
key: 'userInfo',
data: res.data.data.userInfo,
})
wx.navigateTo({
url: url
})
}
})
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
},
fail: res => {
console.log("获取用户信息失败")
}
})
}
})
},
