微信小程式之微信登陸 —— 微信小程式教程系列（20）
簡介：
微信登陸，在新建一個微信小程式Hello World專案的時候，就可以看到專案中出現了我們的微信頭像，其實這個Hello World專案，就有一個簡化版的微信登陸。只不過是，還沒有寫入到咱們自家的後臺中而已。
新建一個Hello World專案，找到app.js檔案開啟，程式碼如下：
app.js：
App({
onLaunch: function () {
//呼叫API從本地快取中獲取資料
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//呼叫登入介面
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
黃色標註的部分就是登陸部分
下面詳細介紹微信小程式的微信登陸
第一步：獲取登陸態code
微信登陸部分，首先需要使用微信小程式的api—— wx.login(OBJECT)來獲取登入態
這個登陸態的作用是為了獲取使用者的openid（使用者的唯一標識）
相關連結：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
示例：官方示例
js：
//呼叫登入
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
//發起網路請求
//doSomething
} else {
console.log('獲取使用者登入態失敗！' + res.errMsg)
}
},
fail: function(){
console.log("啟用wx.login函式，失敗！");
},
complete:function(){
console.log("已啟用wx.login函式");
}
});
TIPS：
上面這段程式碼的console.log(res);輸出wx.login(OBJECT)的success成功回撥函式返回值res的內容如下：
情況一：
出現這個code:”the code is a mock one”是在專案沒有使用appid的情況下返回的，正常不是返回這個的！！
情況二：
專案在繫結appID後才能成功返回登入態，正確的登陸態如下圖所示：
第二步：將登陸態code傳送給第三方伺服器（即自家的伺服器）
上面通過wx.login(OBJECT)獲取了登入態後，接下來就是將code傳送給第三方伺服器
我們先看看微信登陸的序時圖：
序時圖所示，通過wx.login()獲取了code後，就使用wx.request()傳送code給第三方伺服器（也就是自家的伺服器）
下面用程式碼來進行講解這一步如何操作
示例：官方示例
把wx.login獲取到的res.code返回值，直接以引數的形式，發起網路請求傳送登陸態給自家伺服器
js：
//呼叫登入
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
//就是在這裡發起網路請求，使用wx.request()，將登陸態傳送給自家的伺服器上
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
},
method: 'POST',
header: {'content-type': 'application/json'},
success: function(data){
}
})
} else {
console.log('獲取使用者登入態失敗！' + res.errMsg)
}
},
fail: function(){
console.log("啟用wx.login函式，失敗！");
},
complete:function(){
console.log("已啟用wx.login函式");
}
});
如何使用微信小程式發起網路請求？
請看如下教程：微信小程式的網路請求 ——微信小程式教程系列（14）
第三步：code 換取 session_key和openid
登陸態傳送給自家的伺服器後，接下來就是後臺進行操作。
下面我把 自家的伺服器簡稱 後臺，方便閱讀（你知道我說的後臺指的是我們自己的伺服器，而不是微信的伺服器就行）。
後臺接收到登陸態後，由後臺發起網路請求給微信伺服器
備註：後臺沒有語言要求！！任意一門後臺語言都可以。
介面地址：
https://api.weixin.qq.com/sns/jscode2session
引數說明：
備註：
appid和secret登陸微信公眾平臺，開啟設定——開發設定，即可獲取（app secret需要生成）。
grant_type是固定寫法，值為authorization_code即可。
返回結果：
後臺傳送請求成後，騰訊伺服器會返回session_key 和 openid，如下圖：
成功返回的結果
失敗返回的結果
第四步：生成3rd_session返回給客戶端
第四步也是做後臺中的操作！！
此時把微信伺服器返回的session_key 和 openid保留在後臺中，由於考慮安全性的問題，不要直接返回給客戶端。
然後用作業系統提供的隨機數演算法生成一個新的session，微信把它叫做3rd_session。（注意：這個session要有足夠的長度，建議有2^128種組合，即長度為16B；設定一定的時效性）
以3rd_session為名作為key，返回的session_key和openid作為值，儲存在後臺上。
最後只需要在後臺，返回一個3rd_session給客戶端即可。
以後客戶端部分，就使用這個3rd_session傳送給後臺，後臺接收3rd_session獲取對應的session_key和openid，再通過session_key和openid判斷對應的使用者返回該使用者相關的資料
備註：小程式用這種方法來代替瀏覽器自身傳送的cookie，因為web的做法是伺服器A會儲存起訪問登入介面的這個cookie到session中，當你再次訪問其他介面的時候，伺服器A首先會判斷這個session，是否是之間的cookie從而知道是不是對應的使用者。（http協議是一種短連結的關係，其特點是客戶端發起請求連結到服務端，服務端返回資料，連結斷開！因此之間是不會有任何資料的儲存。）
示例：接上示例
js：
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
},
method: 'POST',
header: {'content-type': 'application/json'},
// 在傳送請求成功的部分，返回的資料是後臺返回的3rd_session
success: function(data){
console.log(data)
}
})
} else {
console.log('獲取使用者登入態失敗！' + res.errMsg)
}
},
fail: function(){
console.log("啟用wx.login函式，失敗！");
},
complete:function(){
console.log("已啟用wx.login函式");
}
});
PS：
要是閱讀到這裡，有不明之處，請叫上後臺的小夥伴一起過來閱讀這篇文章
第三步，和第四步，要交給後臺的同事去處理！！！
第五步：客戶端儲存3rd_session
回到客戶端的工作了。
從第四步後臺返回的3rd_session後，需要將3rd_session存入快取中。
小程式提供了儲存到本地快取的api，使用非常簡單。
（1）wx.setStorage(OBJECT)
傳入key和data即可。
（2）wx.setStorageSync(KEY,DATA)
第六步：獲取使用者資訊
相關連線：https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html
示例：接上示例
js：
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
},
method: 'POST',
header: {'content-type': 'application/json'},
success: function(data){
console.log(data)
}
})
// 使用wx.getUserInfo獲取使用者資訊
wx.getUserInfo({
success: function (res) {
utils.log(res);
},
fail:function(){
console.log("啟用app.getUserInfo函式，失敗！");
},
complete:function(){
console.log("已啟用app.getUserInfo函式");
});
} else {
console.log('獲取使用者登入態失敗！' + res.errMsg)
}
},
fail: function(){
console.log("啟用wx.login函式，失敗！");
},
complete:function(){
console.log("已啟用wx.login函式");
}
});
輸出wx.getUserInfo的success成功回撥函式返回值res的內容如下：
userInfo物件內是使用者的資訊：
avatarUrl: 使用者頭像
city: 城市
country: 國家
gender: 性別
language: 語言
nickName: 暱稱
province: 省份
第七步：登入態維護
通過上面六步，已經成功登陸微信小程式了，但是還需要做登陸維護。
也就是說，登陸小程式後，然後又退出該小程式了。在一段時間內，再次進入該小程式，視為有效登陸，如果超出這個指定的時間，則視為無效登陸，需要重新登陸
微信小程式教程系列
相關連線：http://blog.csdn.net/michael_ouyang/article/details/54700871
註冊上線篇
------------------------------------------------------------
基礎篇
------------------------------------------------------------
微信小程式的生命週期例項演示 —— 微信小程式教程系列（2）
微信小程式的動態修改檢視層的資料 —— 微信小程式教程系列（3）
微信小程式的如何使用全域性屬性 —— 微信小程式教程系列（5）
微信小程式標題欄和導航欄的設定 —— 微信小程式教程系列（7）
微信小程式檢視層的條件渲染 —— 微信小程式教程系列（10）
微信小程式檢視層的列表渲染 —— 微信小程式教程系列（11）
微信小程式的百度地圖獲取地理位置 —— 微信小程式教程系列（15）
微信小程式使用百度api獲取天氣資訊 —— 微信小程式教程系列（16）
微信小程式獲取系統日期和時間 —— 微信小程式教程系列（17）
微信小程式之上拉載入和下拉重新整理 —— 微信小程式教程系列（18）
實戰篇
------------------------------------------------------------
微信小程式之上拉載入（分頁載入）例項 —— 微信小程式實戰系列（2）
微信小程式之仿android fragment之可滑動的底部導航欄例項 —— 微信小程式實戰系列（4）
微信小程式之自定義toast例項 —— 微信小程式實戰系列（6）
微信小程式之自定義抽屜選單（從下拉出）例項 —— 微信小程式實戰系列（7）
微信小程式之自定義模態彈窗（帶動畫）例項 —— 微信小程式實戰系列（8）
電商篇
------------------------------------------------------------
微信小程式之側欄分類 —— 微信小程式實戰商城系列（1） 微信小程式之仿淘寶分類入口 —— 微信小程式實戰商城系列（2）
微信小程式之購物數量加減 —— 微信小程式實戰商城系列（3）
微信小程式之商品屬性分類 —— 微信小程式實戰商城系列（4）
未完待續。。。