请描述前端实现扫码登录的整体流程与关键交互机制,包括从二维码生成、状态轮询到登录成功的具体步骤。
考察说明
考察对扫码登录前端实现流程、状态管理与安全细节的理解。
回答思路
- 【回答框架 1】扫码登录前端核心流程是:后端生成一次性ticket并与用户会话绑定,前端展示二维码且携带该ticket轮询后端登录状态;用户手机扫描后确认授权,后端将ticket与用户绑定并标记状态;前端轮询发现状态变为已确认后,获取临时凭证并跳转登录。
- 【回答框架 2】二维码展示:前端从后端获取二维码内容(通常为url或ticket),用库渲染为二维码图片;二维码需带过期时间,通常2至5分钟,过期后前端停止轮询并提示刷新。
- 【回答框架 3】状态轮询:前端使用setInterval或requestAnimationFrame定时请求状态接口,间隔一般1至2秒;收到成功状态后立即停止轮询并处理登录结果;需处理网络异常、重复扫码、取消授权等边界。
- 【回答框架 4】交互细节:手机端扫码需唤起应用或浏览器,并传递确认信息;PC端展示等待动画和成功提示;需处理二维码被占用(多设备同时扫)的情况,后端保证ticket唯一性。
- 【回答框架 5】安全要点:ticket需短时效且一次性,轮询接口需校验来源;登录成功后前端应清理轮询和二维码状态,防止泄露;可加入扫码确认时的用户信息展示以增强安全性。
- 【关键点 1】核心是ticket+轮询,后端维护状态机
- 【关键点 2】二维码必须有过期时间并配套停止轮询逻辑
- 【关键点 3】轮询间隔需平衡实时性和服务器压力
- 【关键点 4】需处理重复扫码、过期、取消等异常状态
- 【关键点 5】扫码成功后立即清理前端定时器与状态
- 【易错点 1】轮询间隔过短可能导致服务器压力大,过长则体验差
- 【易错点 2】忽略二维码过期导致用户扫码后无反应
- 【易错点 3】无条件信任轮询结果而不做状态校验,可能被伪造请求利用