在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟

更新時間：2021年05月24日 14:26:32 作者：hanxiaozhang2018

這篇文章主要介紹了在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟，這里的登錄功能其實就是一個表單提交，實現(xiàn)起來也很簡單，具體實例代碼跟隨小編一起看看吧

前言：

本篇文章只介紹在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟，服務端方法請參考《基于OAuth2.0授權(quán)系統(tǒng)的驗證碼功能》

正文：

在Ant Design Pro模板中，使用賬號密碼登錄功能部分（如下圖），并沒有做圖形驗證碼的開發(fā)，所以這部分功能就需要我們自己去實現(xiàn)。這里登錄功能其實本質(zhì)是一個表單提交，所以我們只需自己開發(fā)一個圖形驗證碼表單控件就可以，具體實現(xiàn)如下。

1. 圖形驗證碼表單控件代碼CaptchaInput.tsx：

import React, {useState, useEffect} from 'react';
import {Input, message} from 'antd';
import {SafetyCertificateOutlined} from '@ant-design/icons';
import api from '@/utils/api';
import stringUtil from "@/utils/stringUtil";
import request from "@/utils/request";
import {useIntl} from "umi";
 
 
interface CaptchaInputValue {
  captchaCode?: string;
  captchaKey?: string;
}
 
interface CaptchaInputProps {
  value?: CaptchaInputValue;
  onChange?: (value: CaptchaInputValue) => void;
}
 
/**
 * 獲取驗證碼
 */
const getCaptcha = async () => {
  try {
    const data = await request(api.captcha);
    if (data.code === 1) {
      return data.data;
    }
  } catch (error) {
    message.error('獲取部門樹失敗,請重試');
    return [];
  }
  message.error('獲取部門樹失敗,請重試');
  return [];
}
 
const CaptchaInput: React.FC<CaptchaInputProps> = ({value = {}, onChange}) => {
 
  const intl = useIntl();
  const [captchaCode, setCaptchaCode] = useState<string>('');
  const [captchaKey, setCaptchaKey] = useState<string>('');
  const [imageData, setImageData] = useState<string>('');
 
  // 觸發(fā)改變
  const triggerChange = (changedValue: { captchaCode?: string; captchaKey?: string }) => {
    if (onChange) {
      onChange({captchaCode, captchaKey, ...value, ...changedValue});
    }
  };
 
  useEffect(() => {
    getCaptcha().then((data: any) => {
      setCaptchaKey(data.captchaKey);
      setImageData(data.image);
      triggerChange({captchaKey: data.captchaKey});
    })
  }, []);
 
 
  // 輸入框變化
  const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const code = e.target.value || '';
    if (stringUtil.isNotEmpty(code)) {
      setCaptchaCode(code);
    }
    triggerChange({captchaCode: code});
  }
 
  // 時間類型變化
  const onClickImage = () => {
    getCaptcha().then((data: any) => {
      setCaptchaKey(data.captchaKey);
      setImageData(data.image);
      triggerChange({captchaKey: data.captchaKey});
    })
  };
 
  return (
    <span>
       <Input.Group compact>
          <Input prefix={<SafetyCertificateOutlined style={{color: "#319cff"}}/>} placeholder={intl.formatMessage({
            id: 'pages.login.captcha.placeholder',
            defaultMessage: '請輸入驗證碼',
          })}
                 onChange={onChangeInput}
                 style={{width: '75%', marginRight: 5, padding: '6.5px 11px 6.5px 11px', verticalAlign: 'middle'}}/>
                   <img style={{width: '23%', height: '35px', verticalAlign: 'middle', padding: '0px 0px 0px 0px'}}
                        src={imageData} onClick={onClickImage}/>
       </Input.Group>
    </span>
  );
};
export default CaptchaInput;

2.登錄頁面集成組件：

import CaptchaInput from './components/CaptchaInput';
 
...   ... 
 
  const handleSubmit = (values: LoginParamsType) => {
    const {dispatch} = props;
    values.client_id = "hanxiaozhang";
    values.client_secret = "hanxiaozhang";
    values.scope = "hanxiaozhang";
    values.grant_type = "password";
    values.captcha_key = values.captchaComp.captchaKey;
    values.captcha_code = values.captchaComp.captchaCode;
    delete values.captchaComp;
    dispatch({
      type: 'login/login',
      payload: {...values, type},
    });
  };
 
...   ... 
 
            <Form.Item name="captchaComp" rules={[{
              validateTrigger: 'onBlur',
              validator: async (rule, value) => {
                // console.log(rule)
                if (stringUtil.isEmpty(value.captchaCode)) {
                  throw new Error('請輸入驗證碼!');
                }
              }
            },]}>
              <CaptchaInput/>
            </Form.Item>
 
...   ...

3.使用：

集成之后的效果如下：