一、背景

手机设备相较于台式电脑、笔记本电脑，具备更强的“私有-私密性”，因此在智能手机中安装 APP 应用后，登录态可长期保存，这也直接导致了用户对于应用/站点密码记忆度大幅下降，“扫码登录”技术随之被普及。

但是到了 OTT 大屏电视场景，扫码登录是如何实现的呢？本文将以优酷“CIBN 酷喵影视”为例，详解 OTT 大屏中的“扫码登录“与“扫码反登”的技术实现策略。

二、OTT 端登录需求

OTT 从开发语言、操作理念等都遵循手机 APP 相关规范，区别在于 APP 为触屏操作，OTT 为遥控器操作。自然地，很多年轻人更习惯在手机上完成操作，实现优酷手机 APP 与 OTT APP（CIBN 酷喵影视）的无缝衔接。这其中就涉及到了账号登录态同步的问题，而且二者存在众多登录场景的互动。

所以，除了常规的“扫码登录”（通过手机操作，将手机端登录态同步至 PC/OTT 端），在 OTT 场景下，还衍生出了“扫码反登”。

扫码反登：指将 OTT 端账号登录态，同步至手机端，使手机端在扫码相关操作完成后，跳转至指定页面。优势是，由手机端完成 OTT 相应操作，同时避免手机端无登录态、登录账号不统一等带来业务操作上的偏差。

具体的“扫码反登”业务场景可分为四类：

1）登录：OTT 端酷喵应用登录二维码；

2）客服：各种业务类型客服小蜜二维码；

3）互动：OTT 端活动投放，与小屏配合互动-扫码；

4）支付：OTT 端二维码收银台。

三、同步登录态

在 OTT 端主要有“扫码登录”及“扫码反登录”两类场景业务需求，那么我们先对两种同步登录态实现逻辑进行解读。

1. 扫码正登录

早在数年前已经普及，在 OTT 端也是首发登录方式。虽然这是个程序技术，但是也有不少同学感到好奇：一个光秃秃的二维码，是如何完成识别被哪个手机扫码，又是通过什么逻辑实现 OTT 端/PC 端登录的？下面我们进行逻辑拆解：

1）Tips

因为需要将小屏登录同步至 OTT 端，那么该情景 OTT 端与手机端登录情况分别为：

a）OTT 端-未登录；

b）手机端-未登录/已登录均可。

2）原理图：

3）逻辑解读

①当二维码扫码登录页面被打开时，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 端本身存在交互操作及功能上的局限，例如付费购买，需要将大屏登录态同步至手机端，在手机端完成强登录操作。

1）Tips

因为需要将 OTT 屏登录同步至手机端，那么该情景 OTT 端与手机端登录情况分别为：

a）OTT 端-已登录

b）手机端-未登录/已登录均可

2）原理图：

3）逻辑解读

①当二维码扫码登录页面被打开时，OTT 端会向服务端携带 token 发送一个请求，用以获取平台唯一标识值“authCode”，该值作为本次反登录的核心参数贯穿整个登录始终；

②服务端生成 authCode 之后，会将 authCode 与请求上行 token 记录（redis 服务器），并建立查找索引逻辑。除了 authCode 通过接口返回前端外，接口返回中“登录验证二维码”url 一并返回，此时 authCode 布设与该 url 参数中；

③前端页操作页面视图显示该二维码，该二维码实际为“passport 登录态种植页面”；

④当用户手机端扫码后，“passport 登录态种植页面”被打开，此时该页面 url 中 authCode 参数，随请求发送与 passport 服务端；

⑤服务端接收到请求并且获取到 authCode，并与先前存储的 authCode 进行匹配，已经匹配成功，则将先前存储的 token 返回，此时手机端登录态已经种植成功。

四、指定跳转

扫码正登与反登是 OTT 端登录业务中的核心环节，但这还没有完整满足 OTT 场景实际需求，我们还需要在手机端登录操作完成之后，跳转到指定页面。这相对于登录态同步要简单得多，可以在 passport 页面后追加一个 callback 参数，参数值为指定页面 url，借助 passport 相关逻辑，在手机端确认登录成功后跳转至该 url，从而实现指定页面跳转。

在上述逻辑实现之后，则完整满足了 OTT 场景需求，而借助同步登录态以及指定跳转这两种能力，则可以进行进一步能力扩展、封装。

五、能力沉淀及扩展场景

优酷“CIBN 酷喵影视”的业务量级非常大且场景相对复杂，在 APP 不断的业务迭代及能力升级过程中，扫码登录的能力也在积累沉淀。目前，“酷喵 APP”扫码登录相关能力已实现以下能力：

1）能力组件化封装：完成“同步登录态-二维码”能力封装，实现相关业务零开发，可视化平台搭建；

2）二维码收银台封装：完成“CIBN 酷喵影视”活动收银台能力封装，扫码直达付款，零开发，可视化搭建；

3）客服小蜜搭建化：借助 1，使反馈不再匿名无序，实现问题排查有“账号”可寻；

4）半屏收银台封装：全屏播放中查半屏，实现超大流量精准引导付费。

作者介绍：

阿里文娱高级前端技术开发工程师魏家鲁

创作场景

OTT 端登录态设备穿透：扫码登录与反登录