OTT端登录态设备穿透:扫码登录与扫码反登录 | 《优酷OTT互联网大屏前端技术实践》第二章-阿里云开发者社区

开发者社区> 阿里文娱技术> 正文

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

简介: 常规“扫码登录”业务,一般由PC端和手机端两部分组成,而且PC端一般作为“被扫码方”,登录态则由手机端进行操作及确认。那以“CIBN酷喵影视”为代表的OTT大屏电视场景,其扫码登录实现情况又是怎样的呢?

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

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

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

test

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

一、背景

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

常规“扫码登录”业务,一般由PC端和手机端两部分组成,而且PC端一般作为“被扫码方”,登录态则由手机端进行操作及确认。那以“CIBN酷喵影视”为代表的OTT大屏电视场景,其扫码登录实现情况又是怎样的呢?

1、OTT大屏特点

OTT从开发语言、操作理念等都遵循手机APP相关规范,不同之处在于手机APP为触屏操作,OTT一般为遥控器操作;

OTT端的最常见登录,与常见的PC端扫码登录一致,由OTT端展示登录二维码,手机端扫码操作确认登录,即“扫码登录”;

我们希望将OTT端登录态同步至手机端,由手机端完成相应操作,同时避免手机端无登录态、登录账号不统一等带来业务操作上的偏差,即“扫码反登”。

2、扫码登录和扫码反登的示例:

常规扫码登录:大屏端未登录、小屏端操作登录(如下图)

image.png

OTT特殊场景:大屏端已登录、登录态同步小屏端(如下图)

image.png

既然以上两种扫码路数相反,当然实现理念也有较大差别,那么我们就“扫码登录”和“扫码反登”两种情况,对其技术实现进行剖析解读。

二、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)手机端-未登录/已登录均可

原理图

image.png

逻辑解读

①当二维码扫码登录页面被打开时,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)手机端-未登录/已登录均可

原理图

image.png

逻辑解读

① 当二维码扫码登录页面被打开时,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、半屏收银台封装:全屏播放中查半屏,实现超大流量精准引导付

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

带你了解阿里文娱技术

官方博客
官网链接