微信小程序中如何實(shí)現(xiàn)用戶登錄與登錄態(tài)維護(hù)-創(chuàng)新互聯(lián)

小編給大家分享一下微信小程序中如何實(shí)現(xiàn)用戶登錄與登錄態(tài)維護(hù)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到欒城網(wǎng)站設(shè)計與欒城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋欒城地區(qū)。

在微信小程序中，我們大致會涉及到以下三類登錄方式：

• 自有的賬號注冊和登錄

• 使用其他第三方平臺賬號登錄

• 使用微信賬號登錄（即直接使用當(dāng)前已登錄的微信賬號來作為小程序的用戶進(jìn)行登錄）

第一和第二種方式是目前Web應(yīng)用中最常見的兩種方式，在微信小程序中同樣可以使用，但是需要值的注意的是，小程序中沒有Cookie的機(jī)制，所以在使用這2種方式前，請確認(rèn)你們或第三方的API是否需要依賴Cookie；還有小程序中也不支持HTML頁面，那些需要使用頁面重定向來進(jìn)行登錄的第三方API就需要改造，或不能用了。

我們今天主要來討論一下第三種方式，即如何使用微信賬號進(jìn)行登錄，因?yàn)檫@種方式和微信平臺結(jié)合最緊密，用戶體驗(yàn)比較好。

登錄流程

引用小程序官方文檔的登錄流程圖，整個登錄流程基本如下圖所示：

登錄流程圖

該圖中，“小程序”指的就是我們使用小程序框架寫的代碼部分，“第三方服務(wù)器”一般就是我們自己的后臺服務(wù)程序，“微信服務(wù)器”是微信官方的API服務(wù)器。

下面我們來逐步分解一下這個流程圖。

步驟1：在客戶端獲取當(dāng)前登錄微信用戶的登錄憑證(code)

在小程序中登錄的第一步，就是先獲取登錄憑證。我們可以使用wx.login()方法并得到一個登錄憑證。

我們可以在小程序的App代碼中發(fā)起登錄憑證請求，也可以在其他任何Page頁面代碼中發(fā)起登錄憑證請求，主要根據(jù)你小程序的實(shí)際需要。

App({
 onLaunch: function() {
 wx.login({
  success: function(res) {
  var code = res.code;
  if (code) {
   console.log('獲取用戶登錄憑證：' + code);
  } else {
   console.log('獲取用戶登錄態(tài)失敗：' + res.errMsg);
  }
  }
 });
 }
})

步驟2：將登錄憑證發(fā)往你的服務(wù)端，并在你的服務(wù)端使用該憑證向微信服務(wù)器換取該微信用戶的唯一標(biāo)識(openid)和會話密鑰(session_key)

首先，我們使用wx.request()方法，請求我們自己實(shí)現(xiàn)的一個后臺API，并將登錄憑證(code)攜帶過去，例如在我們前面代碼的基礎(chǔ)上增加：

App({
 onLaunch: function() {
 wx.login({
  success: function(res) {
  var code = res.code;
  if (code) {
   console.log('獲取用戶登錄憑證：' + code);

   // --------- 發(fā)送憑證 ------------------
   wx.request({
   url: 'https://www.my-domain.com/wx/onlogin',
   data: { code: code }
   })
   // ------------------------------------

  } else {
   console.log('獲取用戶登錄態(tài)失?。?#39; + res.errMsg);
  }
  }
 });
 }
})

你的后臺服務(wù)(/wx/onlogin)接著需要使用這個傳遞過來的登錄憑證，去調(diào)用微信接口換取openid和session_key，接口地址格式如下所示：

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

這里是我使用了Node.js Express構(gòu)建的后臺服務(wù)的代碼，僅供參考：

router.get('/wx/onlogin', function (req, res, next) {
 let code = req.query.code

 request.get({
 uri: 'https://api.weixin.qq.com/sns/jscode2session',
 json: true,
 qs: {
  grant_type: 'authorization_code',
  appid: '你小程序的APPID',
  secret: '你小程序的SECRET',
  js_code: code
 }
 }, (err, response, data) => {
 if (response.statusCode === 200) {
  console.log("[openid]", data.openid)
  console.log("[session_key]", data.session_key)

  //TODO: 生成一個唯一字符串sessionid作為鍵，將openid和session_key作為值，存入redis，超時時間設(shè)置為2小時
  //偽代碼: redisStore.set(sessionid, openid + session_key, 7200)

  res.json({ sessionid: sessionid })
 } else {
  console.log("[error]", err)
  res.json(err)
 }
 })
})

這段后臺代碼成功執(zhí)行的話，就可以得到openid和session_key。這個信息就是當(dāng)前微信賬戶在微信服務(wù)器那邊的登錄態(tài)了。

但是，為了安全方面的原因，請不要直接使用這些信息作為你小程序的用戶標(biāo)識和session標(biāo)識回傳到小程序客戶端中去，我們應(yīng)該在服務(wù)器端做一層自己的session，將這個微信賬號登錄態(tài)生成一個session id并維護(hù)在我們自己的session機(jī)制中，然后把這個session id派發(fā)到小程序客戶端作為session標(biāo)識來使用。

關(guān)于如何在服務(wù)器端做這個session機(jī)制，我們現(xiàn)在一般采用鍵值對存儲工具來做，比如redis。我們?yōu)槊總€session生成一個唯一的字符串作為鍵，然后可以將session_key和openid作為值，存入redis中，為了安全，存入的時候還應(yīng)設(shè)置一個超時的時間。

步驟3：在客戶端保存sessionid

開發(fā)Web應(yīng)用的時候，在客戶端（瀏覽器）中，我們通常將session id存放在cookie中，但是小程序沒有cookie機(jī)制，所以不能采用cookie了，但是小程序有本地的storage，所以我們可以使用storage來保存sessionid，以供后續(xù)的后臺API調(diào)用所使用。

在之后，調(diào)用那些需要登錄后才有權(quán)限的訪問的后臺服務(wù)時，你可以將保存在storage中的sessionid取出并攜帶在請求中（可以放在header中攜帶，也可以放在querystring中，或是放在body中，根據(jù)你自己的需要來使用），傳遞到后臺服務(wù)，后臺代碼中獲取到該sessionid后，從redis中查找是否有該sessionid存在，存在的話，即確認(rèn)該session是有效的，繼續(xù)后續(xù)的代碼執(zhí)行，否則進(jìn)行錯誤處理。

這是一個需要session驗(yàn)證的后臺服務(wù)示例，我的sessionid是放在header中傳遞的，所以在這個示例中，是從請求的header中獲取sessionid：

router.get('/wx/products/list', function (req, res, next) {
 let sessionid = req.header("sessionid")
 let sessionVal = redisStore.get(sessionid)

 if (sessionVal) {
 // 執(zhí)行其他業(yè)務(wù)代碼
 } else {
 // 執(zhí)行錯誤處理
 }
})

好了，通過微信賬號進(jìn)行小程序登錄和狀態(tài)維護(hù)的簡單流程就是這樣，了解這些知識點(diǎn)之后，再基于此進(jìn)行后續(xù)的開發(fā)就會變得更容易了。

另外，騰訊前端團(tuán)隊也開源了他們封裝的相關(guān)庫，可以借鑒和使用。

服務(wù)器端庫 weapp-session

小程序端庫 weapp-session-client

以上是“微信小程序中如何實(shí)現(xiàn)用戶登錄與登錄態(tài)維護(hù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：微信小程序中如何實(shí)現(xiàn)用戶登錄與登錄態(tài)維護(hù)-創(chuàng)新互聯(lián)
路徑分享：http://muchs.cn/article16/dphcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、域名注冊、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)