推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 835|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(20) : 微信小程序之微信登陸

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:36:23 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

簡介:

微信登陸,在新建一個微信小程序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即可。



2wx.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: 省份






第七步:登錄態維護

通過上面六步,已經成功登陸微信小程序了,但是還需要做登陸維護。

也就是說,登陸小程序后,然后又退出該小程序了。在一段時間內,再次進入該小程序,視為有效登陸,如果超出這個指定的時間,則視為無效登陸,需要重新登陸






本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 江苏7位数第20010期开奖结果 股票入门基础知识k 四川金7乐组六实战技巧 棋牌游戏信誉排行榜 新快3投注技巧 黑龙江快乐十分麻将 立博即时指数 单机麻将免费东北版 黑龙江6+1开奖结果查询今天 炒股入门知识 三中三精准一组三中三 微乐麻将怎么才能赢