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

本文可能涉及的內容--

更新

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

• 可能由于用詞不當，讓大家誤認為getUserInfo被棄用，其實是我們在用戶未授權的情況下無法通過API調用的方式使用getUserInfo。

• 文章里少體現一個重要內容：獲取用戶頭像昵稱，第一次需要使用 button 組件授權，如果已經用組件授權了，wx.getUserInfo 可直接返回用戶數據，無需重復授權彈窗。這意味著我們可以先使用wx.getSetting來判斷用戶是否授權過getUserInfo，倘若授權過我們則可以調用wx.getUserInfo靜默拿到想要的數據，如果沒授權過的話就該怎么干就怎么干~

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

在本篇文章所講的登錄不僅僅指的是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即可。

  • 跳轉頁面，檢測到非登錄用戶則強制跳轉到登錄頁，在里面進行登錄邏輯的處理。

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

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

按需授權

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

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

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

小結

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

總結

以上是生活随笔為你收集整理的小程序各种姿势实现登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。