概要

整體流程

前端

頁面代碼

請求驗證碼和登錄的 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

94 );95 };96 97 export default connect()(Login);

總結

以上是生活随笔為你收集整理的java antd实现登录,基于 antd pro 的短信验证码登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。