ant design pro 5 添加 google recaptcha V2 人机验证

google recaptcha是google的人机验证
recaptcha的申请和配置不赘述,这里只输出antd prod的配置

$ yarn add reaptcha

// src/pages/User/Login/index.tsx

// 在Login页面添加reaptcha组件
import Reaptcha from 'reaptcha';
import  {Component, useRef} from 'react';

interface RecaptchaItemProps {
  onChange: (result: string) => void; // Define the type of onChange prop
}

class RecaptchaItem extends Component {
  render() {
    return (
      <Reaptcha
        sitekey="你的reptcha site key"
        hl="zh-CN"
        ref={e => (this.reCaptcha = e)}
        onVerify={result => this.props.onChange(result)}
      />
    );
  }
}

// 登录失败后重置
const handleSubmit = async (values: API.LoginParams) => {
    try {
      // ....
    } catch (error) {
      // 登录失败后重置
      // 关键代码
      reCaptchaItem.current.reCaptcha.reset()
      
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '登录失败，请重试！',
      });
      // ...
    }
  };

// 在页面上添加组件
<ProFormText.Password
  name="password"
  fieldProps={{
    size: 'large',
    prefix: <LockOutlined/>,
  }}
  placeholder={intl.formatMessage({
    id: 'pages.login.password.placeholder',
    defaultMessage: '密码',
  })}
  rules={[
    {
      required: true,
      message: (
        <FormattedMessage
          id="pages.login.password.required"
          defaultMessage="请输入密码！"
        />
      ),
    },
  ]}
/>
// 关键代码（dev环境不展示验证组件）

{
    REACT_APP_ENV && REACT_APP_ENV !== 'dev' && (
        <FormItem
         // name替换成你后端对应的captcha的name
            name="googleCaptchaToken"
            rules={[{required: true, message: '请点击机器人验证'}]}
        >
          <RecaptchaItem ref={reCaptchaItem}/>
        </FormItem>
    )
}