So integrieren Sie die grafische Verifizierungscode-Komponente in die Ant Design Pro-Anmeldefunktion

importiere React, {useState, useEffect} von „react“;
importiere {Eingabe, Nachricht} von 'antd';
importiere {SafetyCertificateOutlined} aus '@ant-design/icons';
API aus „@/utils/api“ importieren;
importiere stringUtil aus "@/utils/stringUtil";
Importiere die Anfrage aus "@/utils/request";
importiere {useIntl} von "umi";
 
 
Schnittstelle CaptchaInputValue {
  CaptchaCode?: Zeichenfolge;
  CaptchaKey?: Zeichenfolge;
}
 
Schnittstelle CaptchaInputProps {
  Wert?: CaptchaInputValue;
  beiÄnderung?: (Wert: CaptchaInputValue) => ungültig;
}
 
/**
 * Bestätigungscode erhalten */
const getCaptcha = async () => {
  versuchen {
    const data = warte auf Anfrage(api.captcha);
    wenn (Datencode === 1) {
      Daten.Daten zurückgeben;
    }
  } Fehler abfangen {
    message.error('Abteilungsbaum konnte nicht abgerufen werden. Bitte versuchen Sie es erneut.');
    zurückkehren [];
  }
  message.error('Abteilungsbaum konnte nicht abgerufen werden. Bitte versuchen Sie es erneut.');
  zurückkehren [];
}
 
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>('');
 
  // Änderung auslösen const triggerChange = (changedValue: { captchaCode?: string; captchaKey?: string }) => {
    wenn (beiÄnderung) {
      beiÄnderung({CaptchaCode, CaptchaSchlüssel, ...Wert, ...geänderterWert});
    }
  };
 
  useEffect(() => {
    getCaptcha().then((Daten: beliebig) => {
      setCaptchaKey(Daten.captchaKey);
      setImageData(Daten.Bild);
      triggerChange({captchaKey: data.captchaKey});
    })
  }, []);
 
 
  // Änderungen im Eingabefeld const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const code = e.ziel.wert || '';
    wenn (stringUtil.isNotEmpty(code)) {
      setzeCaptchaCode(Code);
    }
    triggerChange({captchaCode: code});
  }
 
  // Zeittypänderungen const onClickImage = () => {
    getCaptcha().then((Daten: beliebig) => {
      setCaptchaKey(Daten.captchaKey);
      setImageData(Daten.Bild);
      triggerChange({captchaKey: data.captchaKey});
    })
  };
 
  zurückkehren (
    <span>
       <Eingabe.Gruppe kompakt>
          <Eingabepräfix={<SafetyCertificateOutlined style={{color: "#319cff"}}/>} Platzhalter={intl.formatMessage({
            ID: "pages.login.captcha.placeholder",
            defaultMessage: 'Bitte geben Sie den Bestätigungscode ein',
          })}
                 beiÄnderung={beiÄnderungseingabe}
                 Stil = {{Breite: '75 %', rechter Rand: 5, Polsterung: '6,5px 11px 6,5px 11px', vertikale Ausrichtung: 'Mitte'}}/>
                   <img Stil = {{Breite: '23 %', Höhe: '35px', vertikale Ausrichtung: 'Mitte', Polsterung: '0px 0px 0px 0px'}}
                        src={Bilddaten} beim Klicken={beiKlickBild}/>
       </Eingabe.Gruppe>
    </span>
  );
};
Standard-CaptchaInput exportieren;

importiere CaptchaInput aus „./components/CaptchaInput“;
 
... ... 
 
  const handleSubmit = (Werte: LoginParamsType) => {
    const { dispatch } = Requisiten;
    Werte.Client_ID = "hanxiaozhang";
    Werte.client_secret = "hanxiaozhang";
    Werte.Umfang = "hanxiaozhang";
    values.grant_type = "Passwort";
    Werte.captcha_key = Werte.captchaComp.captchaKey;
    Werte.Captcha_Code = Werte.CaptchaComp.CaptchaCode;
    lösche values.captchaComp;
    versenden({
      Typ: 'login/login',
      Nutzlast: {...Werte, Typ},
    });
  };
 
... ... 
 
            <Form.Item name="captchaComp" Regeln={[{
              validateTrigger: 'beiUnschärfe',
              Validator: async (Regel, Wert) => {
                // console.log(Regel)
                wenn (stringUtil.isEmpty(value.captchaCode)) {
                  throw new Error('Bitte geben Sie den Bestätigungscode ein!');
                }
              }
            },]}>
              <CaptchaInput/>
            </Form.Item>
 
... ...