作者| 阿里巴巴文娛技術 魏家魯
一、背景
手機設備相較於臺式電腦、筆記本電腦，具備更強的“私密性”，因此在智能手機中安裝APP應用後，登錄態可長期保存，這也直接導致了用戶對於應用/站點密碼記憶度大幅下降，"掃碼登錄"技術隨之被普及。
常規“掃碼登錄”業務，一般由PC端和手機端兩部分組成，而且PC端一般作為“被掃碼方”，登錄態則由手機端進行操作及確認。那以“CIBN酷喵影視”為代表的OTT大屏電視場景，其掃碼登錄實現情況又是怎樣的呢？
1、OTT大屏特點
OTT從開發語言、操作理念等都遵循手機APP相關規範，不同之處在於手機APP為觸屏操作，OTT一般為遙控器操作；
OTT端的最常見登錄，與常見的PC端掃碼登錄一致，由OTT端展示登錄二維碼，手機端掃碼操作確認登錄，即“掃碼登錄”；
我們希望將OTT端登錄態同步至手機端，由手機端完成相應操作，同時避免手機端無登錄態、登錄賬號不統一等帶來業務操作上的偏差，即“掃碼反登”。
2、掃碼登錄和掃碼反登的示例：
常規掃碼登錄：大屏端未登錄、小屏端操作登錄(如下圖)
OTT特殊場景：大屏端已登錄、登錄態同步小屏端(如下圖)
既然以上兩種掃碼路數相反，當然實現理念也有較大差別，那麼我們就“掃碼登錄”和“掃碼反登”兩種情況，對其技術實現進行剖析解讀。
二、OTT端登錄需求
OTT從開發語言、操作理念等都遵循手機APP相關規範，區別在於APP為觸屏操作，OTT為遙控器操作。自然地，很多年輕人更習慣在手機上完成操作，實現優酷手機APP與OTT APP（CIBN酷喵影視）的無縫銜接。這其中就涉及到了賬號登錄態同步的問題，而且二者存在眾多登錄場景的互動。
所以，除了常規的“掃碼登錄”（通過手機操作，將手機端登錄態同步至PC/OTT端），在OTT場景下，還衍生出了“掃碼反登”。
掃碼反登：指將OTT端賬號登錄態，同步至手機端，使手機端在掃碼相關操作完成後，跳轉至指定頁面。優勢是，由手機端完成OTT相應操作，同時避免手機端無登錄態、登錄賬號不統一等帶來業務操作上的偏差。
具體的“掃碼反登”業務場景可分為四類：
登錄：OTT端酷喵應用登錄二維碼；
客服：各種業務類型客服小蜜二維碼；
互動：OTT端活動投放，與小屏配合互動-掃碼；
支付：OTT端二維碼收銀臺。
三、同步登錄態
在OTT端主要有“掃碼登錄”及“掃碼反登錄”兩類場景業務需求，那麼我們先將兩種同步登錄態實現邏輯進行解讀。
1、掃碼正登錄
這一快捷登錄方式，早在數年前已經普及，目前不光在PC端，在OTT端也是首發登錄方式。雖然這是個程序技術，但是也有不少同學感到好奇：這裡只有一個光禿禿的二維碼，它是如何完成識別被那個手機掃碼，之後又是通過什麼邏輯實現OTT端/PC端本身登錄的？下面我們進行邏輯拆解
Tips
因為需要將小屏登錄同步至OTT端，那麼該情景OTT端與手機端登錄情況分別為：
a）OTT端-未登錄
b）手機端-未登錄/已登錄均可
原理圖
邏輯解讀
①當二維碼掃碼登錄頁面被打開時，OTT端會想服務端發送一個請求，用以獲取平臺唯一標識值（當然也可以有客戶端根據算法自行得出後通知服務端，但嚴密性存在問題），我們姑且稱之為“uuid”，該值作為本次登錄的核心參數貫穿整個登錄始終；
②服務端在生成這個uuid之後，會將其記錄（redis服務器），並建立查找索引邏輯，除了uuid通過接口返回前端外，接口返回中“登錄驗證二維碼”url一併返回，此時uuid佈設與該url參數中；
③前端頁操作頁面視圖顯示該二維碼，該二維碼實際為passport登錄驗證頁面；
④在展示二維碼的同時，前端將以uuid為參數進行登錄狀態接口驗證輪詢；
④現在登錄狀態輪詢已開啟，而二維碼則開始等待手機掃碼；
⑤當用戶手機端掃碼後，會出現兩種情況：用戶已經登錄、用戶未登錄，那麼此時就面臨兩種邏輯：
a）用戶已登錄：則uuid及用戶cookie隨校驗頁面直接到達passport服務端，服務端跟據cookie校驗登錄狀態，並根據本次上行uuid去匹配先前（第①項）已記錄的uuid，一經查找成功，則通過內部方法將cookie解析生成的token，與先前uuid形成鍵值關係；
b）用戶未登錄：則手機端掃碼後，一經校驗無登錄態，則該“passport登錄驗證頁面”跳轉至登錄頁面，此時，登錄頁url參數中，依舊攜帶有uuid參數，以及掃碼登錄標識，用於passport服務端後續邏輯處理，用戶在鍵入賬號密碼後點擊登錄，則登錄頁跳轉回““passport登錄驗證頁面”，後續流程與前段落一致；
⑥在以上④-1中已經提到，OTT端一直在輪詢接口登錄狀態，此時，在完成上文第⑤後，輪詢接口再次攜帶uuid請求passport服務端，此時，經由uuid查詢匹配，可以確定本次狀態為“手機端已操作確認登錄”，那麼該次輪詢接口返回中已經明確登錄狀態，並且將第⑤項中生成的token一併返回。
至此六大過程形成閉環，宣告登錄成功，並顯示相應已登錄視圖，掃碼正登錄也已經完成。
2、掃碼反登錄
OTT端存在一種特有場景：OTT端本身存在交互操作及功能上的侷限，例如付費購買，需要將大屏登錄態同步至手機端，在手機端完成強登錄操作。
Tips
因為需要將OTT屏登錄同步至手機端，那麼該情景OTT端與手機端登錄情況分別為：
a）OTT端-已登錄
b）手機端-未登錄/已登錄均可
原理圖
邏輯解讀
① 當二維碼掃碼登錄頁面被打開時，OTT端會向服務端攜帶token發送一個請求，用以獲取平臺唯一標識值“authCode”，該值作為本次反登錄的核心參數貫穿整個登錄始終；
② 服務端生成authCode之後，會將authCode與請求上行token記錄（redis服務器），並建立查找索引邏輯。除了authCode通過接口返回前端外，接口返回中“登錄驗證二維碼”url一併返回，此時authCode佈設與該url參數中；
③前端頁操作頁面視圖顯示該二維碼，該二維碼實際為“passport登錄態種植頁面”；
④當用戶手機端掃碼後，“passport登錄態種植頁面”被打開，此時該頁面url中authCode參數，隨請求發送與passport服務端；
⑤服務端接收到請求並且獲取到authCode，並與先前存儲的authCode進行匹配，已經匹配成功，則將先前存儲的token返回，此時手機端登錄態已經種植成功。
3、指定跳轉
掃碼正登與反登是OTT端登錄業務中的核心環節，但這還沒有完整滿足OTT場景實際需求，我們還需要在手機端登錄操作完成之後，跳轉到指定頁面。這相對於登錄態同步要簡單得多，我們可以在passport頁面後追加一個callback參數，參數值為指定頁面url，藉助passport相關邏輯，在手機端確認登錄成功後跳轉至該url，從而實現指定頁面跳轉。
在上述邏輯實現之後，則完整滿足了OTT場景需求，而藉助同步登錄態以及指定跳轉這兩種能力，則可以進行進一步能力擴展、封裝。
四、能力沉澱及擴展場景
優酷“CIBN酷喵影視”的業務量級非常大且場景相對複雜，在APP不斷的業務迭代及能力升級過程中，掃碼登錄的能力也在積累沉澱。目前，“酷喵APP”掃碼登錄相關能力已實現以下能力：
1、能力組件化封裝：完成“同步登錄態-二維碼”能力封裝，實現相關業務零開發，可視化平臺搭建；
2、二維碼收銀臺封裝：完成“CIBN酷喵影視”活動收銀臺能力封裝，掃碼直達付款，零開發，可視化搭建；
3、客服小蜜搭建化：藉助1，使反饋不再匿名無序，實現問題排查有“賬號”可尋；
4、半屏收銀臺封裝：全屏播放中查半屏，實現超大流量精準引導付