pc web与手机app跨屏二维码登陆

需求场景

1. pc web端未登录，手机app已登录，pc web显示二维码，手机app扫二维码实现pc web端登陆。
2. pc web端已登陆，手机app未登陆，pc web显示二维码，手机app扫二维码实现手机app端登陆。

实现方式

基本原理是：pc web向passport服务器申请一个token，然后把token信息编码到二维码图片中，pc web端显示二维码图片，之后：

1. 手机端扫描二维码，打开包含token信息的url，这个url代表的请求（包含手机端的登陆的cookie信息）被passport服务器处理，这时token会和手机端登陆状态关联。

2. pc web轮询passport服务器，token有没有和某个手机端登陆状态关联(被手机app扫描)，如果已经关联成功，passport就会返回给pc web端用户信息（app登陆用户的id，昵称，头像地址等）和登陆成功相关的set-cookie headers，pc web端完成登陆。

上面是pc端未登陆，手机app已登录场景下的web-passport-app交互逻辑。

如果是pc端已登录，手机app未登录，这个时候web-passport-app交互逻辑就变成：

pc web向passport服务器申请一个token（申请时附带登陆相关的cookie，这样token和pc web端的登陆状态在passport后台会关联在一起），然后把token信息编码到二维码图片中，pc web端显示二维码图片，之后：手机端扫描二维码，打开包含token信息的url，这个url代表的请求被passport服务器处理，这时passport服务器会返回pc web端登陆信息（pc web登陆用户的id，昵称，头像地址等）和登陆成功相关的set-cookie headers给手机app， app完成登陆。

基本原理就是这样。产品化时，又多加了一个让用户确认环节，让已登录端确认允许在未登录端登陆。

pc web端未登录，app端已登陆时的交互逻辑如下：

pc web端已登录，app端未登陆时的交互逻辑如下：

由于pc web端多了一步用户确认，所以app也要在扫码之后进行轮询才能从passport拿到pc端的登陆用户信息。

花絮

在做pc web与手机app端跨屏登陆之前，TV端和手机app端已经实现了此功能，除了要求支持jsonp以外，之前tv端用的接口直接提供前端使用。所以我这边在开发时很顺畅，唯一比较麻烦的是：手机端app的扫码功能根本没上线，没设备我这边根本没法本地调试整个流程，只能自己打断点，修改passport接口返回的响应内容来伪造扫码成功的场景。

顺便说一下发布上线的问题，andriod app最先上线，其次是pc web紧接着就上线了，但是ios app要两周之后审核通过才能上线，而andriod TV的应用要等下个月了。其实pc web是最晚进入开发环节的，但发布更新上线很快就可以完成，而app不能像web频繁改版，即便app更新发布了，用户也不一定会去下载更新，所以app试错的成本很大。

与app相比，web最大的优势是：可快速迭代，生效快！