ruoyi-vue-pro验证码登录流程

seeklife
657 阅读1分钟

image.png

需要验证表单中的手机号

image.png

点击获取验证码将会调用getSmsCode。

image.png

获取后端的验证码

image.png

我们来到AuthController找到对应的接口

image.png

来到对应的service

首先判断了用户的手机号是否存在，随后发送短信验证码 image.png

接着借助mapstruct将AuthSmsSendReqVo转为SmsCodeSendReqDTO

需要获取用户的ip地址借助ServletUtils工具类的getClientIp，其最终调用的hutool工具类的ServletUtil工具类实现ip地址的获取

image.png

image.png

我们回到短信发送

这里的smsCodeApi根据ruoyi项目的结构介绍，当我们需要将接口暴露给其他模块调用时，我们需要编写Api接口。

image.png

具体实现

image.png

这边通过发送MQ消息来实现了异步调用短信发送的功能，而且是使用redis来实现的消息队列。redis5.0的新功能。 Redis Stream | 菜鸟教程 (runoob.com)

image.png

image.png image.png

最后我们来到真实的短信发送功能

image.png image.png

去到smsClientFactory的getSmsClient方法 该工厂类的构造方法会初始化sms的客户端，这边提供了阿里云，钉钉，以及腾讯的短信客户端。

image.png

image.png

具体就不进行深究了，之后参考ruoyi的开发文档在进行解析。

当获取到正确的验证码并输入之后，我们点击登录调用handleLogin方法。

image.png

来到后端的短信登录接口

image.png

首先验证验证码，其次根据手机号查找用户，最后创建令牌返回给前端

image.png

avatar
文章
阅读
粉丝