喜聞樂見的背景時間--由于最近接觸小程序比較多，又剛好經(jīng)歷過小程序的自動登錄時代以及現(xiàn)在的點(diǎn)擊登錄時代。結(jié)合自己的實(shí)踐以及觀察到其他小程序的做法，就有了這篇小分享~

本文可能涉及的內(nèi)容--

 

本文的小程序登錄指的是什么？

在本篇文章所講的登錄不僅僅指的是wx.login而是包括以下三點(diǎn)--

• 獲取用戶基本信息
• 調(diào)用微信wx.login接口
• 實(shí)現(xiàn)服務(wù)器端登錄

我需要獲取用戶頭像和昵稱要怎么做？

用戶頭像和昵稱對于我們開發(fā)小程序幾乎算是剛需，那么我們應(yīng)該怎么樣正確高效的獲取&利用它們呢？

舊時代--自動授權(quán)一把梭

 

***--使用小程序的open-data

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

其實(shí)可以將open-data看作圖片或字符串，想要控制樣式在外層加上view標(biāo)簽以及相應(yīng)的class即可。

相比之前獲取用戶基本信息的方式，這個方案還是比較走心的，如果一些小程序只是對用戶的頭像昵稱等基本信息有需求的話就不需要和以前一樣大費(fèi)周章的調(diào)一個getUserInfo，拿回來一堆用不上的東西。

我需要用戶在服務(wù)器端實(shí)現(xiàn)登錄該怎么做？

按照微信小程序的文檔，能在服務(wù)器端完成登錄（獲取用戶session_key/openid等），有三個前端傳回的參數(shù)是必不可少的：

• code
• encryptedData
• iv

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

但是，因為微信基礎(chǔ)庫更新，取消通過api調(diào)用getUserInfo的能力，需要使用button組件的開放能力[open-type]去調(diào)用getUserInfo方法。

上述獲取數(shù)據(jù)的方法具體建議閱讀官方文檔：

有關(guān)getUserInfo的文檔

有關(guān)login的文檔

踩坑心得：請確保wx.login早于getUserInfo，不僅是代碼執(zhí)行層面的早，最好是login回調(diào)成功之后才去getUserInfo，不然可能會出現(xiàn)后端解密失敗的情況，導(dǎo)致登錄失敗。

（還可以通過API方式調(diào)用getUserInfo的時候如何實(shí)現(xiàn)后端登錄就不在此贅述了。）

盡管已經(jīng)無法自動授權(quán)，我們還可以這樣實(shí)現(xiàn)小程序的登錄授權(quán)

總體來說有兩種授權(quán)模式，一種是強(qiáng)制授權(quán)，另一種則是按需授權(quán)，無論是怎么樣的流程基本都可以歸類為這兩種授權(quán)。

強(qiáng)制授權(quán)

• 適用范圍：對用戶身份強(qiáng)依賴的小程序，用戶一進(jìn)來就必須要知道用戶的相關(guān)信息，或者是用戶一進(jìn)來就必須根據(jù)用戶id來拉取相關(guān)資源。

• 授權(quán)模式：模式多種，但共同特點(diǎn)都是會打斷用戶正常進(jìn)入小程序的流程，體驗上有點(diǎn)瑕疵，在此列出兩種模式：

  • 不跳轉(zhuǎn)頁面，無論點(diǎn)擊頁面中的任何地方都會彈出授權(quán)彈窗，如圖所示(沒有將鼠標(biāo)點(diǎn)擊錄進(jìn)去，實(shí)際是無論點(diǎn)哪都會觸發(fā)授權(quán))↓↓

  

  這種方案的實(shí)現(xiàn)方式其實(shí)很簡單也很粗暴--將一個覆蓋全屏的button組件以position: fixed的方式蓋在需要這樣登錄的頁面上，然后將其opacity設(shè)為0即可。

  

  • 跳轉(zhuǎn)頁面，檢測到非登錄用戶則強(qiáng)制跳轉(zhuǎn)到登錄頁，在里面進(jìn)行登錄邏輯的處理。

  

  就個人而言，還是比較喜歡這種授權(quán)模式的，和微信自己生態(tài)內(nèi)的授權(quán)有些許相似，對用戶來說不會那么突兀。

  具體實(shí)現(xiàn)方式--相比上一種就復(fù)雜一些了，這一種方式屬于全局性質(zhì)的攔截授權(quán)，會中斷當(dāng)前頁面的所有動作，跳轉(zhuǎn)至登錄專用的頁面，在登錄頁登錄成功后再返回原頁面。

  

按需授權(quán)

• 適用范圍：對用戶身份規(guī)劃十分明確、可以接受在用戶做出某些動作之后再獲取用戶身份的小程序。

• 授權(quán)模式：不會打斷小程序頁面的主流程，將授權(quán)加入主流程中。實(shí)現(xiàn)方式也是十分靈活，無論是列表或是圖片甚至是一段文字，只要是需要用戶手動觸發(fā)的，都可以作為授權(quán)的發(fā)起時機(jī)。

  與上述強(qiáng)制授權(quán)中不跳轉(zhuǎn)頁面的方式類似，但是有一個巨大的差異--這種方式不會強(qiáng)制用戶授權(quán)，而是在需要授權(quán)時才會出現(xiàn)，相對沒有這么騷擾使用小程序的用戶。