小白隨筆，大神勿理 —— 微信小程序之登錄注冊(cè)流程
-
Reference material（參考材料）：
微信開發(fā)者工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信小程序開發(fā)文檔：https://developers.weixin.qq.com/miniprogram/dev/index.html
授權(quán)登陸流程，參看 官方API - 登陸接口
官方文檔給出的登錄流程：
20180521140234249.png Prerequisite（前提條件）:知道的微信小程序的一些API接口的規(guī)則
- wx.login()：調(diào)用接口獲取登錄憑證（code）。通過憑證進(jìn)而換取用戶登錄態(tài)信息，包括用戶的唯一標(biāo)識(shí)（openid）及本次登錄的會(huì)話密鑰（session_key）等。調(diào)用此方法獲取的code只能用與一次校驗(yàn)。即檢驗(yàn)后是否成功都會(huì)失效。
wx.login({
success (res) {
if (res.code) {
//發(fā)起網(wǎng)絡(luò)請(qǐng)求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
})
- wx.getSetting() ： 獲取用戶的當(dāng)前設(shè)置。返回值中只會(huì)出現(xiàn)小程序已經(jīng)向用戶請(qǐng)求過的權(quán)限。
-
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()：發(fā)起 HTTPS 網(wǎng)絡(luò)請(qǐng)求。
wx.request({
url: 'test.php', //僅為示例，并非真實(shí)的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success (res) {
console.log(res.data)
}
})
-
重頭戲：
-
正常流程：如微信官方文檔所示：
3.1. 調(diào)用wx.login獲取code → code用于wx.request向服務(wù)器請(qǐng)求參數(shù)，（服務(wù)器會(huì)調(diào)用appid+appsecret+code校驗(yàn)后返回session_key+openid等)，服務(wù)器認(rèn)證成功后會(huì)返回一個(gè)自定義登錄態(tài)（token之類）。
3.2. 后端返回自定義登錄態(tài)后，我們便可以用這個(gè)登錄態(tài)通過wx.request()去向服務(wù)器請(qǐng)求數(shù)據(jù)啦~~ -
自我見解：在官方demo的結(jié)論下，我們可以延申一下整個(gè)登錄注冊(cè)的流程：
jianshu1.png - 注意?。。河捎谧远x登錄態(tài)有使用時(shí)效，對(duì)于使用本地過期的自定義登錄態(tài)，用戶信息等去請(qǐng)求數(shù)據(jù)不成功的時(shí)候，應(yīng)該調(diào)用login方法重新去獲取自定義登錄態(tài)和用戶信息。
- 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 => {
//去服務(wù)器獲取token,即登錄或注冊(cè)
listrequest.miniLogin(allres.code).then(function(res) {
if (res返回的數(shù)據(jù)不存在？) {
//如果不存在，轉(zhuǎn)過去注冊(cè)
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
})
}
})
}
})
},
//注冊(cè)
register: function(url) {
var that = this;
wx.login({
success: allres => {
//重新調(diào)用一次wx.login，因?yàn)槊看蔚腸ode只能用一次
wx.getUserInfo({
success: res => {
var data = {
code: allres.code,
iv: res.iv,
encryptedData: res.encryptedData
}
var header = {
'content-type': 'application/x-www-form-urlencoded' //默認(rèn)值
}
//調(diào)用服務(wù)器注冊(cè)
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 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
},
fail: res => {
console.log("獲取用戶信息失敗")
}
})
}
})
},
