小程式各種姿勢實現登入

mykurisu發表於2018-08-12

喜聞樂見的背景時間--由於最近接觸小程式比較多,又剛好經歷過小程式的自動登入時代以及現在的點選登入時代。結合自己的實踐以及觀察到其他小程式的做法,就有了這篇小分享~

本文可能涉及的內容--

小程式各種姿勢實現登入

更新

首先感謝@shaonialife同學的精彩評論~

本文的小程式登入指的是什麼?

在本篇文章所講的登入不僅僅指的是wx.login而是包括以下三點--

  • 獲取使用者基本資訊
  • 呼叫微信wx.login介面
  • 實現伺服器端登入

我需要獲取使用者頭像和暱稱要怎麼做?

使用者頭像和暱稱對於我們開發小程式幾乎算是剛需,那麼我們應該怎麼樣正確高效的獲取&利用它們呢?

舊時代--自動授權一把梭

小程式各種姿勢實現登入

新時代--使用小程式的open-data

使用open-data時需要注意小程式基礎庫的版本。具體使用方式如下

小程式各種姿勢實現登入

其實可以將open-data看作圖片或字串,想要控制樣式在外層加上view標籤以及相應的class即可。

相比之前獲取使用者基本資訊的方式,這個方案還是比較走心的,如果一些小程式只是對使用者的頭像暱稱等基本資訊有需求的話就不需要和以前一樣大費周章的調一個getUserInfo,拿回來一堆用不上的東西。

我需要使用者在伺服器端實現登入該怎麼做?

按照微信小程式的文件,能在伺服器端完成登入(獲取使用者session_key/openid等),有三個前端傳回的引數是必不可少的:

  • code
  • encryptedData
  • iv

code是通過wx.login獲取的,而encryptedData & iv是從wx.getUserInfo中獲取的。

但是,因為微信基礎庫更新,取消通過api呼叫getUserInfo的能力,需要使用button元件的開放能力[open-type]去呼叫getUserInfo方法。

上述獲取資料的方法具體建議閱讀官方文件:

有關getUserInfo的文件

有關login的文件

踩坑心得:請確保wx.login早於getUserInfo,不僅是程式碼執行層面的早,最好是login回撥成功之後才去getUserInfo,不然可能會出現後端解密失敗的情況,導致登入失敗。

(還可以通過API方式呼叫getUserInfo的時候如何實現後端登入就不在此贅述了。)

儘管已經無法自動授權,我們還可以這樣實現小程式的登入授權

總體來說有兩種授權模式,一種是強制授權,另一種則是按需授權,無論是怎麼樣的流程基本都可以歸類為這兩種授權。

強制授權

  • 適用範圍:對使用者身份強依賴的小程式,使用者一進來就必須要知道使用者的相關資訊,或者是使用者一進來就必須根據使用者id來拉取相關資源。

  • 授權模式:模式多種,但共同特點都是會打斷使用者正常進入小程式的流程,體驗上有點瑕疵,在此列出兩種模式:

    • 不跳轉頁面,無論點選頁面中的任何地方都會彈出授權彈窗,如圖所示(沒有將滑鼠點選錄進去,實際是無論點哪都會觸發授權)↓↓
    小程式各種姿勢實現登入

    這種方案的實現方式其實很簡單也很粗暴--將一個覆蓋全屏的button元件以position: fixed的方式蓋在需要這樣登入的頁面上,然後將其opacity設為0即可。

    小程式各種姿勢實現登入
    • 跳轉頁面,檢測到非登入使用者則強制跳轉到登入頁,在裡面進行登入邏輯的處理。
    小程式各種姿勢實現登入

    就個人而言,還是比較喜歡這種授權模式的,和微信自己生態內的授權有些許相似,對使用者來說不會那麼突兀。

    具體實現方式--相比上一種就複雜一些了,這一種方式屬於全域性性質的攔截授權,會中斷當前頁面的所有動作,跳轉至登入專用的頁面,在登入頁登入成功後再返回原頁面。

    小程式各種姿勢實現登入

按需授權

  • 適用範圍:對使用者身份規劃十分明確、可以接受在使用者做出某些動作之後再獲取使用者身份的小程式。

  • 授權模式:不會打斷小程式頁面的主流程,將授權加入主流程中。實現方式也是十分靈活,無論是列表或是圖片甚至是一段文字,只要是需要使用者手動觸發的,都可以作為授權的發起時機。

    與上述強制授權中不跳轉頁面的方式類似,但是有一個巨大的差異--這種方式不會強制使用者授權,而是在需要授權時才會出現,相對沒有這麼騷擾使用小程式的使用者。

小結

接觸小程式這段時間,對比了一下前後小程式對某些功能的調整,不由有一番感想--小程式由一開始的從開發者角度完善功能,慢慢變成了以使用者的角度去升級功能了。也許對我們開發者來說不太友好,但不可否認 ,這隻能是必然的趨勢,所以還是積極擁抱變化吧~

小程式各種姿勢實現登入

相關文章