OTT端登录态设备穿透：扫码登录与扫码反登录 | 《优酷OTT互联网大屏前端技术实践》第二章

上一章：OTT大屏前端建设之路 | 《优酷OTT互联网大屏前端技术实践》第一章>>>

下一章：OTT端性能优化建设之Weex实践之路 | 《优酷OTT互联网大屏前端技术实践》第三章>>>

点击免费下载
《优酷OTT互联网大屏前端技术实践》>>>

作者| 阿里巴巴文娱技术 魏家鲁

一、背景

手机设备相较于台式电脑、笔记本电脑，具备更强的“私密性”，因此在智能手机中安装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、半屏收银台封装：全屏播放中查半屏，实现超大流量精准引导付