网站微信扫码登录设计流程

256 阅读1分钟

最近上线的一个项目中pc端登录方式为手机号+短信验证码+密码登录,在上线培训的前两天我们发现短信服务对于三大运营商(联通、移动、电信)并不是完全支持的,我们遇到的问题就是电信的手机号使用无法收到短信。这就导致我们手机号+验证码+密码的登录方式行不通了。 1b1b121e63ac82ef99aedf9a25bc72c.jpg 经过开会激烈的讨论我们最终定下来一套通过微信扫码输入手机号和密码的全新登录方式。与传统的微信扫码登录不同,我们方案依托于配套的微信小程序。通过扫码跳转到小程序页面进行注册登录。

界面展示效果如下:

微信扫码后通知后端扫码成功

pc端在进入页面后就需要开启一个定时器,每秒读取后端此二维码是否已经被使用。 screenshots.gif

设置二维码有效期

pc端进入网站后需要开启一个10分钟的定时器,定时器记录的是二维码有效期的状态 screenshots.gif

流程图如下

image.png