微信小程序之微信登陆 —— 微信小程序教程系列（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
注冊上線篇
------------------------------------------------------------
微信小程序之如何注冊微信小程序
微信小程序之小程序上線
基礎篇
------------------------------------------------------------
微信開發者工具的快捷鍵
微信小程序的文件結構 —— 微信小程序教程系列（1）
微信小程序的生命周期實例演示 —— 微信小程序教程系列（2）
微信小程序的動態修改視圖層的數據 —— 微信小程序教程系列（3）
微信小程序的新建頁面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）
微信小程序的頁面跳轉 —— 微信小程序教程系列（6）
微信小程序標題欄和導航欄的設置 —— 微信小程序教程系列（7）
微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）
微信小程序視圖層的數據綁定 —— 微信小程序教程系列（9）
微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）
微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）
微信小程序視圖層的模板 —— 微信小程序教程系列（12）
微信小程序之wxss —— 微信小程序教程系列（13）
微信小程序的網絡請求 —— 微信小程序教程系列（14）
微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api獲取天氣信息 —— 微信小程序教程系列（16）
微信小程序獲取系統日期和時間 —— 微信小程序教程系列（17）
微信小程序之上拉加載和下拉刷新 —— 微信小程序教程系列（18）
微信小程序之組件 —— 微信小程序教程系列（19）
微信小程序之微信登陸 —— 微信小程序教程系列（20）
實戰篇
------------------------------------------------------------
微信小程序之頂部導航欄實例 —— 微信小程序實戰系列（1）
微信小程序之上拉加載（分頁加載）實例 —— 微信小程序實戰系列（2）
微信小程序之輪播圖實例 —— 微信小程序實戰系列（3）
微信小程序之仿android fragment之可滑動的底部導航欄實例 —— 微信小程序實戰系列（4）
微信小程序之登錄頁實例 —— 微信小程序實戰系列（5）
微信小程序之自定義toast實例 —— 微信小程序實戰系列（6）
微信小程序之自定義抽屜菜單（從下拉出）實例 —— 微信小程序實戰系列（7）
微信小程序之自定義模態彈窗（帶動畫）實例 —— 微信小程序實戰系列（8）
電商篇
------------------------------------------------------------
微信小程序之側欄分類 —— 微信小程序實戰商城系列（1） 微信小程序之仿淘寶分類入口 —— 微信小程序實戰商城系列（2）
微信小程序之購物數量加減 —— 微信小程序實戰商城系列（3）
微信小程序之商品屬性分類 —— 微信小程序實戰商城系列（4）
微信小程序之購物車 —— 微信小程序實戰商城系列（5）
未完待續。。。
更多小程序的教程：http://blog.csdn.net/column/details/14653.html
總結
以上是生活随笔為你收集整理的微信小程序之微信登陆 —— 微信小程序教程系列（20）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 说一下字典的：addEntriesFro
- 下一篇： abap 创建出口历程_走进SAP ER