聊聊小程式的登入邏輯

聊聊小程式的登入邏輯

一直聊的都是客戶運營方面的話題，畢竟鬥金客戶運營系統小程式產品是依靠技術實現的，今天來聊聊大家都能感知到的小程式登入問題吧，大家可能都碰到過很多小程式剛開啟就要求授權獲取資訊之類的煩人彈框，如果點拒絕後續有些功能沒法用，使用者覺得產品好想再同意又找不到地方，這樣做其實使用者體驗非常差。

微信小程式官方也發現了這個問題，其實與他們最初介面設計不太合理也有一定關係，所以 18年4月份官方對獲取使用者資訊的 wx.getUserInfo 介面 進行了調整。雖然這方面文章網上也有不少，但在實際中，仍有很多產品把這塊沒實現好。要麼彈出授權框，要麼安全性上處理的不好，或多或少存在一些問題。今天藉此機會分享一下鬥金客戶運營系統小程式在開發中的一些心得體會或收穫吧。

如何設計好小程式登入流程呢？有關產品設計方面的問題及關於使用者體系產品架構方面的問題不做過多展開討論。只討論小程式的登入，且只討論沒有自己的使用者體系，不存在繫結賬號等操作，完全藉助微信使用者體系的設計和開發邏輯。文中涉及的一些專有名詞大家可以參考微信官方文件尋求解釋。

我們做登入流程設計的原則是，在保證良好使用者體驗的情況下做好安全性設計工作。

首先在小程式啟動時，不要彈出任何需要授權的彈框，有些文章說在啟動 onLanuch時可以透過wx.login靜默獲取使用者openid在資料庫建立使用者資訊，我個人覺得這也是不可取的，這樣做的話很多僅僅只是開啟小程式而非目標使用者的人也會被資料庫記錄，資料庫冗餘的垃圾資料就非常多。使用者開啟小程式後不做任何干擾，讓他正常檢視使用，只是在使用者做敏感操作比如支付、檢視餘額、檢視我的訂單、檢視我的拼團、檢視我的優惠券、領優惠券、參加拼團等需要登入操作時才進行登入。首先判斷localStorage是否存在自定義登入態，如果存在則wx.checkSession檢查微信伺服器上的登入態，如果有效則為真正的已登入允許繼續做敏感操作；如果localStorage存在登入態，但是wx.checkSession過期，則重新呼叫wx.login獲取session_key和openid（只更新session_key即可），然後返回給小程式自定義登入態並更新本地localStorage，在使用者無感知的情況下進行了更新登入態；如果localStorage不存在自定義登入態，則提示使用者需要登入並跳轉到個人中心頁面，等使用者點選個人中心的“授權登入”按鈕時進行下一步操作。

     使用者點選 “授權登入”時（提前先先靜默呼叫wx.login介面獲取session_key和openid）獲取使用者微信繫結的手機號，如果資料庫表中同一條記錄存在該手機號和openid，則直接更新session_key並返回登入態到本地localStorage即可；如果資料庫表中不存在該手機號和openid，則插入一條記錄（相當於註冊）並返回登入態到本地localStorage；如果資料庫表中同一條記錄只存在手機號或只存在openid，則提示使用者登入失敗需要聯絡管理員處理。登入以後使用者如果獲取過頭像、暱稱等資訊則進行展示，如果是初次登入或沒有獲取過頭像暱稱，則使用者點選預設頭像或暱稱時呼叫 wx.getUserInfo 介面獲取使用者頭像暱稱等資訊進行插入資料庫表並展示。

最佳實踐，由於使用者可能會更改自己的微信頭像和暱稱，應該定時比如使用者點選個人中心 Tab時使用wx.getSetting獲取使用者的授權情況，如果使用者已經授權，直接呼叫 wx.getUserInfo介面獲取使用者的最新資訊進行更新和展示。

上圖是微信小程式官方的一張登入流程圖，在圖中官方建議開發者用隨機數作為自定義登入態。這樣必須和 session_key建立關聯關係，這裡的隨機數非常像SessionID。對於使用token機制的開發者其實也是可以的，透過使用者ID來進行使用者身份識別，不用隨機數減少了頻繁更新資料庫表中自定義登入態的操作。

如有不明白或不清晰的地方歡迎交流，如果有錯誤，還請指正。