概要

整体流程

前端

页面代码

请求验证码和登录的 service (src/services/login.js)

处理登录的 model (src/models/login.js)

后端

短信验证码的处理

生成固定长度的数字

调用短信接口

保存已经验证码, 以备验证用

登录验证

FAQ

antd 版本问题

可以优化的点

概要

最近使用 antd pro 开发项目时遇到个新的需求, 就是在登录界面通过短信验证码来登录, 不使用之前的用户名密码之类登录方式.

这种方式虽然增加了额外的短信费用, 但是对于安全性确实提高了不少. antd 中并没有自带能够倒计时的按钮,

但是 antd pro 的 ProForm components 中倒是提供了针对短信验证码相关的组件.

组件说明可参见: https://procomponents.ant.design/components/form

整体流程

通过短信验证码登录的流程很简单:

请求短信验证码(客户端)

生成短信验证码, 并设置验证码的过期时间(服务端)

调用短信接口发送验证码(服务端)

根据收到的短信验证码登录(客户端)

验证手机号和短信验证码, 验证通过之后发行 jwt-token(服务端)

前端

页面代码

1 import React, { useState } from 'react'; 2 import { connect } from 'umi'; 3 import { message } from 'antd'; 4 import ProForm, { ProFormText, ProFormCaptcha } from '@ant-design/pro-form'; 5 import { MobileTwoTone, MailTwoTone } from '@ant-design/icons'; 6 import { sendSmsCode } from '@/services/login'; 7 8 const Login = (props) => { 9 const [countDown, handleCountDown] = useState(5);10 const { dispatch } = props;11 const [form] = ProForm.useForm();12 return (13 19 dom.pop(),26 submitButtonProps: {27 size: 'large',28 style: {29 width: '100%',30 },31 },32 onSubmit: async () => {33 const fieldsValue = await form.validateFields();34 console.log(fieldsValue);35 await dispatch({36 type: 'login/login',37 payload: { username: fieldsValue.mobile, sms_code: fieldsValue.code },38 });39 },40 }}41 >42 ,46 }}47 name="mobile"48 placeholder="请输入手机号"49 rules={[50 {51 required: true,52 message: '请输入手机号',53 },54 {55 pattern: new RegExp(/^1[3-9]\d{9}$/, 'g'),56 message: '手机号格式不正确',57 },58 ]}59 />60 ,64 }}65 countDown={countDown}66 captchaProps={{67 size: 'large',68 }}69 name="code"70 rules={[71 {72 required: true,73 message: '请输入验证码！',74 },75 ]}76 placeholder="请输入验证码"77 onGetCaptcha={async (mobile) => {78 if (!form.getFieldValue('mobile')) {79 message.error('请先输入手机号');80 return;81 }82 let m = form.getFieldsError(['mobile']);83 if (m[0].errors.length > 0) {84 message.error(m[0].errors[0]);85 return;86 }87 let response = await sendSmsCode(mobile);88 if (response.code === 10000) message.success('验证码发送成功!');89 else message.error(response.message);90 }}91 />92 93