微信小程序登錄授權(quán)界面如何開發(fā)

當(dāng)用戶進入微信小程序登陸時，會出現(xiàn)一個登錄界面，比如獲取用戶用戶頭像和昵稱等，這些在微信小程序開發(fā)者而言，是可以獲取用戶數(shù)據(jù)的，下面就為大家介紹小程序各種姿勢實現(xiàn)登錄的方法 

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

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

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

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

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

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

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

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

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

我需要用戶在服務(wù)器端實現(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的時候如何實現(xiàn)后端登錄就不在此贅述了。）

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

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

強制授權(quán)

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

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

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

   

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

   

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

   

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

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

   

按需授權(quán)

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

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

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

以上就是微信小程序登錄授權(quán)界面如何開發(fā) ，更多小程序開發(fā)文檔可以關(guān)注網(wǎng)站。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店