小程序模板網(wǎng)

微信用戶訪問小程序的登錄過程

發(fā)布時間:2018-05-08 11:49 所屬欄目:小程序開發(fā)教程

概述

當(dāng)你開發(fā)完了一個小程序并部署上線后,某個微信用戶第一次訪問這個小程序的時候,會彈出一個授權(quán)界面,用戶可以選擇是否使用微信登錄,如果選擇是,則直接進(jìn)入到小程序。當(dāng)你第二次進(jìn)入該小程序的時候,你會發(fā)現(xiàn)授權(quán)界面不會彈出來了,直接就進(jìn)入小程序了。

這個過程看起來非常的簡單,但其實(shí)實(shí)現(xiàn)起來相當(dāng)?shù)穆闊┖头爆崱I婕暗綍?、安全、?yàn)證等各種各樣的問題。下面筆者介紹一下實(shí)現(xiàn)這個登錄過程的思路。

微信提供小程序登錄流程圖

我們可以從 登錄流程時序 找到這張圖。想完全看懂張圖,需要了解很多東西。我們先來看看微信提供的幾個接口。

小程序接口介紹

wx.login()

這個方法是 小程序端 發(fā)起的,如果是使用騰訊團(tuán)隊(duì)推出的小程序組件化開發(fā)框架的wepy的話,偽代碼如下:

wepy.login()
     .then(res => {
      const code = res.code
  })

這樣子就可以從微信平臺獲取一個code,這個code是 臨時登錄憑證 ,用于獲取 openid 的。

wx.request()

這個也是 小程序端 發(fā)起的,用于請求開發(fā)者服務(wù)器(也即是我們的應(yīng)用服務(wù)器)上的接口,調(diào)用的偽代碼如下:

wepy.request({
          url: `xxurl`,
          data: {
          //入?yún)?
          },
        })
        .then(res => {
          //從res中獲取應(yīng)用服務(wù)器返回的數(shù)據(jù)
        })

獲取openid的接口

當(dāng)某個開發(fā)主體開發(fā)了一個小程序后,當(dāng)用戶訪問這個小程序的時候,微信平臺會為這個用戶分配一個openid。如下接口:

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

這個微信接口一般是我們的應(yīng)用服務(wù)器發(fā)起調(diào)用的,而不是小程序端發(fā)起的。

wx.getUserInfo

getUserInfo 這個接口用于在微信平臺獲取用戶信息。注意,如果微信用戶第一次訪問小程序,是彈出一個授權(quán)界面的。當(dāng)用戶授權(quán)后,getUserInfo才能調(diào)用并返回用戶數(shù)據(jù)。

這個四個接口在使用微信訪問小程序的時候都會用到的。

基于token保持會話和登錄認(rèn)證

小程序雖然不支持cookie的機(jī)制,但是支持在header里設(shè)置token。

這個token是應(yīng)用服務(wù)器生成的。

header: {
        'xxxxtoken': token,
 }

當(dāng)小程序調(diào)用應(yīng)用服務(wù)器接口的時候,必須帶上這個token,應(yīng)用服務(wù)端則對這個token進(jìn)行解析和認(rèn)證。 當(dāng)然如果是第一次訪問小程序,只能由應(yīng)用服務(wù)器先生成token。 筆者打算用偽代碼來表達(dá)使用token后,整個登錄的過程,因?yàn)橛梦淖只蛘邎D比較難表達(dá)。

const code = wx.login();
if (code ) {//code存在
//從小程序的本地中獲取toten
const token = wx.getStorageSync('xxxxxtoken')
     if (token ) {//小程序本地存有token,無需彈出授權(quán)界面
        //直接傳入code字段,調(diào)用應(yīng)用服務(wù)器的驗(yàn)證token的方法,如果校驗(yàn)成功,需要返回用戶信息。
        const userinfo = wx.request(http://xxxxxValidateToken(code ));
        if (userinfo) {
           //說明登錄成功,直接進(jìn)入小程序的主界面。
        }
     }
     else {
        //說明小程序本地沒有token,這個時候需要彈出授權(quán)界面,讓微信用戶決定是否訪問小程序,如果用戶選擇是的話。
        const  weixinuserinfo = wx.getUserInfo();//會彈出授權(quán)界面,微信提供的
        if (weixinuserinfo ){
           //生成或者驗(yàn)證token
           const userinfo = wx.request(http://xxxxxValidateToken(code ));

          const token = userinfo.getToken();
          //將token存儲到小程序本地
          wx.setStorageSync('xxxxxtoken', token )
        }
     }       
}

上面的偽代碼中,會調(diào)用應(yīng)用服務(wù)器(我們的應(yīng)用服務(wù)器)的

http://xxxxxValidateToken(code )

方法。這個方法的實(shí)現(xiàn)邏輯大概如下:

1、先驗(yàn)證這個微信用戶是否存在,可以調(diào)用微信提供的 jscode2session 方法,該方法會返回一個openid。我們必須在業(yè)務(wù)代碼里,將這個openid保存到數(shù)據(jù)庫,并和userid關(guān)聯(lián)起來。

2、判斷是否是新的用戶,如果是,則生成token和生成新的一個用戶信息存儲到數(shù)據(jù)庫。如果不是新的用戶,則驗(yàn)證token。

這個流程走完后,小程序就可以通過 wx.request 方法,帶上token,真正的訪問應(yīng)用服務(wù)器的業(yè)務(wù)方法,獲取業(yè)務(wù)數(shù)據(jù)。

token的生成和校驗(yàn)

見過有些公司是直接將userid和openid,加密后返回給小程序。也見過用userid和password加密后返回給小程序。如果是選擇第二種方式的話,驗(yàn)證token的邏輯大概如下:

先解密,獲取userid和password,并根據(jù)userid從數(shù)據(jù)庫中獲取到用戶密碼,跟從token中解密出來的password進(jìn)行比對,如果相等,則校驗(yàn)通過。

總結(jié)

現(xiàn)在再回頭看看微信提供登錄路程圖,是否好理解一些了。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24334.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢