起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識地產中介管理系統的掃碼登錄功能梳理
由于掃碼登錄比賬號密碼登錄更方便、快捷、靈活，在實際使用中更受到用戶的歡迎。在這個趨勢下，一些SAAS軟件也開始增加掃碼登錄的功能。本人在前幾天就對公司的地產中介管理系統的登錄功能進行優化，增加了掃碼登錄功能。在梳理的過程中發現這個小功能還是很有趣的。
背景
產品有手機端和PC端，PC端只有賬號密碼登錄，登錄方式比較單一。
產品的用戶是地產經紀人，在實際工作中，他們沒有固定的使用的電腦，所以每次使用系統都需要重新輸入賬號和密碼，登錄過程不方便。所以需要增加掃碼登錄，方便用戶登錄。
掃碼登錄原理
1、web服務端需要生成了一個唯一KEY,代表此次用戶的登錄事件ID。
2、根據唯一KEY生成二維碼信息，顯示在網頁上。
3、用戶app掃描二維碼
4、掃描后App通知服務端我已經掃描了二維碼。
5、服務端接收消息后，更新網頁提示說已經掃描，把唯一KEY加入將要登錄列表，如果超時將會移除。
6、用戶app端主動獲取當前狀態，如果唯一KEY沒有超時或者沒有異常，將會跳轉到app端的確認登錄頁面。
7、用戶點擊確認登錄后，與服務端通信，提交用戶名和密碼驗證值（可以考慮其他方案）。
8、web服務端接收后，判斷驗證值是否與數據庫的驗證值匹配，如果匹配確認用戶登錄。
9、用戶app端檢測服務端返回值，處理當前返回狀態，登錄成功，失敗。
掃碼登錄邏輯
PC端登錄頁面
進入登錄頁面，默認顯示賬戶登錄；
點擊“賬戶登錄”、“掃碼登錄”，可切換登錄模式；
點擊“掃碼登錄”，彈出二維碼；
點擊“返回”按鈕，或點擊“賬戶登錄”，切換到賬戶登錄模式
掃碼成功
點擊APP首頁的掃碼入口，彈出“掃一掃”頁面：
成功掃碼后，點擊“確認登錄”按鈕，跳轉到APP首頁并提示“登錄成功”；
5秒鐘后提示語消失，首頁顯示PC端登錄狀態；
手機未綁定
當APP處于未綁定狀態，打開APP首頁提示綁定
手機無網絡
當手機沒有網絡連接時，掃碼后提示網絡連接失敗；
點擊“確定”按鈕后回到“掃一掃”頁面
電腦無網絡
當電腦沒有網絡連接，打開客戶端或者網頁，則提示網絡異常。
二維碼過期失效
當在一分鐘內未掃碼，或者掃碼后未確認登錄，則二維碼過期失效。
如果手機端一直沒有確認登錄，則一直是“確認登錄”頁面；一分鐘后PC端的二維碼失效。
手機端掃了失效的二維碼，提示“二維碼”已失效；點擊“確定”按鈕后回到“掃一掃”頁面。
其他APP掃碼
用其他App掃碼后，跳轉到App Store的相應下載頁面，或者跳轉到H5頁面，提示下載。
例如QQ的提示頁：
退出登錄
點擊App首頁中登錄狀態那一欄，彈窗退出頁面，點擊“退出”，PC端退出登錄，手機端的登錄狀態消失。
掃碼登錄的好處
避免密碼泄露
在不考慮電腦中毒的情況下，輸入密碼也有可能被攻擊者肉眼看到或者拍攝到。而掃碼登入，盡管二維碼是公開的，但只有你自己用手機APP掃描才有用。
原先的核心驗證信息是賬號密碼，是暴露在外界的。現在的核心驗證信息變成了手機里的app_token,而這是外界看不到的，只有手機APP自己知道。就這點來說，安全性確實提高了。
避免撞庫攻擊
許多人在設置密碼時，為了省事，會在多個網站設置相同的密碼。這樣一旦任何一個網站被攻破，攻擊者拿到了你的密碼，他就可以嘗試并成功登入其他網站。
而掃碼登入的話，就算攻擊者拿到了?app_token，也找到了偽造請求的正確方法，他也只能登入一個網站，對其他網站束手無策。
便捷性
隨著現在App越來越多，用戶需要設置的密碼也越來越多，很多人是記不住自己的密碼。以我個人為例，我的QQ被盜過幾次，改過幾次密碼，每次登錄時都要試好幾遍，這導致整個登錄過程很繁瑣。
還有就是有人用戶的密碼設置的比較復雜，大小寫+數字+符號等，在輸入密碼時非常容易出錯。在這種時候，掃碼登錄真的是非常讓人愉悅又便捷的選擇了。
提高手機端的使用率
使用掃碼登錄的一個前提就是手機端處于登錄狀態。對于微信來說，這個舉動確實可以保證微信用戶必是移動客戶端用戶，有利于微信移動端戰略。
目前的SAAS產品以PC端為主，但地產中介的SAAS產品也在積極地推動移動端的使用。如果掃碼登錄功能上線，移動端的下載和活躍使用也會有增長。
掃碼登錄的弊端
用戶習慣的改變
大部分用戶習慣了賬戶密碼登錄，突然強制掃碼登錄，強行改變用戶習慣，這容易導致用戶的反對心理。以淘寶為例，之前淘寶在推廣掃碼登錄之初，直接取消掃碼登錄，遭到廣大用戶的投訴。在改進后，賬戶密碼登錄到一半時，強行跳出掃碼登錄彈框。這個操作也遭到很多用戶的吐槽。在不斷地改進后，淘寶目前還是以推廣掃碼登錄為主?？梢钥吹剑詫毜牡哪J登錄方式還是掃碼登錄，點擊右上角進行切換。
當然有比較好的解決方法，就是掃碼登錄和賬號密碼登錄并存，只給用戶多個選擇，不綁架用戶。這樣的話，用戶更容易接納掃碼登錄，時間長了，也愿意使用它。
在某些情況下并不方便快捷
如果用戶是使用固定的個人電腦，網站上的賬戶密碼都自動記住，在登錄時只需點擊“確定”即可登錄?；蛘哂脩舻拿艽a簡單好記，無需太多時間輸入。此時如果使用掃碼登錄的話，還需要掏出手機，解鎖屏幕，找到對應app，打開，找到掃一掃的按鈕，點一下，慢慢等手機相機啟動，掃一下，然后登錄成功。相比之下，掃碼登錄的過程更繁瑣，并沒有幫助用戶方便快捷地登錄。
總結
由于掃碼登錄現在被廣泛應用，微信、QQ、釘釘這些軟件都做得很不錯。所以在思考這個功能的時候有比較成熟的參考例子。在梳理掃碼過程中，不同情況也能夠思考地更完整。
SAAS產品的掃碼登錄比較特殊的一點是，關于權限的問題。但由于各個SAAS產品的登錄權限都不同，所以這里就沒展開講。
總而言之，在查找資料、梳理邏輯的過程中，發現每天使用的掃碼登錄功能背后還是很有趣的。這也正是產品工作的樂趣所在，將最復雜的邏輯考慮清楚，將最簡單的產品呈現給用戶。
作者：異彩，產品新人。公眾號：一只蝸牛慢慢跑
本文由 @異彩 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自?Pixabay，基于?CC0?協議
還是不太理解 綁定這個環節的作用是什么？能詳細解釋一下嗎？
為什么二維碼要設置有效時間呢？出于什么安全考慮呢？
? 估計是防止對二維碼拍照發給遠程的懶人打卡唄
你這個原型圖是用哪個工具做的啊
線框圖用的process on ，原型是用的Axure 。
綁定這個環節是解決什么問題？
就是提示用戶綁定手機端賬戶。這是掃碼登錄的前提。
手機端登錄過后就有用戶的信息呀，掃碼登錄的時候吧用戶信息傳過去就可以識別了。如果你們手機端登錄的賬戶不是員工賬戶，那就需要綁定
現在我們的手機端沒有登錄，就是經紀人用戶直接綁定。