产品经理如何实现用户登录网页使用APP扫码登录？

“ 在PC上我们可以经常看到很多网站提供扫码登录，最常见的如微信登录。除了微信扫码登录，很多网页都支持App扫码登录如哔哩哔哩、脉脉、小红书、知乎等。自己做的帐号登录功能不支持，所以研究一下输出产品方案让开发做起来。”

01

扫码登录功能是什么样？

我们在浏览网址的时候看到如bilibili类似的登录页面，提供扫码登录、短信验证码登录、三方应用登录等。为了让用户登录网页更加方便与安全，使用手机应用客户端扫一扫登录，变得顺理成章，需要手机装上哔哩哔哩客户端等App应用进行扫码登录。在生活中微信、支付宝扫码支付也让我们对扫码变得不陌生。

在登录网页上显示一个二维码，用App扫码确认登录了以后，如何知道谁扫了二维码并且登录了，并同步相关的用户信息是扫码登录的关键。

02

扫码登录如何实现？

1、登录页面请求二维码（web）

用户打开登录页面，不同的产品的登录页面不同，有的直接展示扫码登录，有的展示短信登录切换到扫码登录。当需要二维码扫码登录时前端请求服务端生成唯一标识key及登录验证并生成二维码返回给前端。二维码也可以服务端返回相关信息，前端进行生成二维码。

2、网页展示二维码（web）

收到返回的二维码进行展示并进行失效计时，并1秒钟请求一次服务端查询当前唯一标识用户是否扫码及是否确认登录。

二维码失效或关闭重新打开登录页需要再次重新请求服务端生成二维码，唯一的标识也需要再次更新。

产品方案交互涉及到web的页面展示，包括二维码展示页面、二维码失效展示、二维码扫码成功展示。

3、扫码登录（App）

用户通过App扫描二维码扫码成功，获取唯一标识key及登录验证信息，App通知服务端扫码成功，web二维码展示扫码成功标识，二维码失效。用户在App确认登录，App将唯一标识和用户信息等传输到服务端。

产品方案交互涉及到App的页面展示，包括扫码入口、扫码页面、确认页面。

4、服务端生成登录token令牌（服务端）

服务端收到App返回的唯一标识key和用户信息等进行验证，并调用内部登录方式生成token令牌。

基于token令牌的认证机制在移动端登录也常用。

基于token的登录认证机制和我们常用的手机号验证码或者三方登录等方式不同。在通过手机号验证码登录时，还会传入手机的设备信息，服务端验证手机号验证码正确同时也会将帐号与设备等关联生成一个token令牌。将用户信息、登录成功的状态及token返回给到移动端或者web端，并存入本地，后续移动端或web端通过token令牌访问服务端接口，验证token令牌及设备信息等。

token令牌有过期时间，在过期时间前需要重新进行请求替换新的token令牌。用户在清除浏览器、应用缓存会清除本地缓存信息，token也会失效。

5、获取token令牌登录成功（web）

web端每秒钟请求服务端获取生成的token令牌和用户信息，并提示用户登录成功。将token保存在本地，后续直接通过token请求服务端进行验证。

在输出产品方案时，主要涉及到登录整个流程的状态、信息流转及网页和App在不同状态的交互设计。并对相应页面进行数据埋点。