图解前端面试问题：扫码登录原理
2022-04-19 19:45:02
图解前端面试问题：扫码登录原理
扫码登录是一种常见的登录方式，它通过扫描二维码的方式，将移动端的登录状态同步到PC端或其他设备上。下面将详细图解扫码登录的原理，包括自有账户扫码登录和第三方扫码登录（以微信为例）。
一、自有账户扫码登录前置条件：用户手机已经登录账号（如知乎），因此有完备的用户信息。
扫码登录过程：
请求二维码和key：
用户访问登录页面，前端向后端请求登录的二维码和key。
这个key用来索引用户登录状态，确保整个登录过程的关联性。
生成二维码并保存key：
服务端生成二维码，并将key（假设是"123"）保存（本地或redis）。
将二维码和参数返给前端，前端展示二维码。
前端轮询登录状态：
前端获取到key="123"和二维码后，使用key开始轮询登录状态。
等待用户扫码登录，这里的轮询可以用websocket长连接代替。
移动端扫码并授权：
用户手机扫码后，移动端跳转到授权登录页（携带参数key="123"）。
用户点击登录后，前端调用后端接口，通知后端："123"对应的用户是我，我已经授权PC网页登录了。
后端更新登录状态：
后端找到"123"对应的信息，更新用户登录状态为true，并更新用户信息。
前端轮询再发轮询时候，后端发现状态改变，则返回给前端登录成功，并返回登录的用户信息。
前端更新登录状态：
前端收到登录成功的返回，更新登录状态，展示用户信息，停止轮询。
注意：授权登录页只是实现移动端和服务端通信的一种方式，也可以用其他方式实现通信。
二、第三方扫码登录（以微信为例）微信公众号扫码登录：
微信扫码登录和基本的扫码登录的原理基本类似，但由于手机登录的是微信，而PC登录的是业务方，属于第三方登录，需要微信服务器和业务服务器通信，因此多了一些交互过程。
接入微信扫码登录的准备工作：
- 权限：认证的服务号，订阅号和未认证的服务号都没有获取带参二维码接口的权限。
- 开通微信公众号开发者。
- 配置公众号服务地址并验证。
- 配置公众号的ip白名单。
- 实现access_token刷新模块。
微信扫码登录过程：
请求二维码和key：
用户访问登录页面，前端向后端请求登录的二维码和key。
这个key用来索引用户登录状态。
业务服务器请求带参二维码：
业务服务器向微信请求带参二维码，这个参数是自定义的（假设是"123"），微信中称为“场景值”。
请求时候需要带上access_token。
返回二维码给前端：
业务服务端收到二维码和“场景值”key="123"，保存场景值后，一起返回给前端。
前端轮询登录状态：
前端获取到key="123"和二维码后，使用key开始轮询登录状态。
用户扫码并授权：
用户手机使用微信扫码后，移动端跳转到二维码对应的地址（带有场景值信息）。
微信客户端解析地址后会和微信服务器通信，告知微信服务器：“这个场景值123，我已经授权登录”。
微信服务器推送扫码事件：
如果用户已经关注公众号，微信会推送一个扫码事件给业务服务器。
如果用户未关注公众号，会跳转到公众号详情，用户点击关注后，推送关注后的用户扫码事件给业务服务器。
业务服务器处理事件：
业务服务器收到事件时，找到"123"，根据用户信息走登录注册流程。
更新用户登录状态为true，并更新用户信息。
前端再发轮询时，后端发现状态改变，则返回给前端登录成功，并返回登录的用户信息。
前端更新登录状态：
前端收到登录成功的返回，更新登录状态，展示用户信息，停止轮询。
总结：
扫码登录实际上就是把移动端的登录状态同步到PC端或其他设备上，这个同步过程需要服务器进行校验和传递数据。扫码过程其实就是把PC的信息同步给移动端，从而能够让整个数据链路串联起来。自有账户扫码登录和第三方扫码登录（如微信）在流程上有所不同，但基本原理相似。通过扫码登录，用户可以更便捷、安全地在不同设备间切换登录状态。
热门标签
