react-recaptcha-net v3.2.5

react-recaptcha-net

React 组件，用于 Google reCAPTCHA v2。

基于dozoisch/react-google-recaptcha

强制替换了验证服务地址为recatptcha.net用来规避GFW下使用react-google-recaptcha遇到的一些奇奇怪怪的问题，同时添加了TypeScript类型支持。

被一条龙服务过.jpg

安装

npm install --save react-recaptcha-net

使用

首先，你需要 注册一个 API 密钥对，获取客户端密钥后，便可以使用 <ReCAPTCHA />。

默认使用方式会导入一个封装的组件，异步加载 Google reCAPTCHA 脚本，然后初始化一个 reCAPTCHA，用户可以与之交互。

示例：

import ReCAPTCHA from "react-google-recaptcha";

function onChange(value) {
  console.log("Captcha 值:", value);
}

ReactDOM.render(
  <ReCAPTCHA
    sitekey="你的客户端站点密钥"
    onChange={onChange}
  />,
  document.body
);

组件属性

用于自定义渲染的属性：

组件实例 API

该组件实例还提供了一些可以调用的实用函数，可以通过 ref 访问。

• getValue()：返回验证码字段的值
• getWidgetId()：返回 reCAPTCHA 小部件的 ID
• reset()：强制重置。参见 JavaScript API 文档
• execute()：程序化调用挑战
  • 在使用 "invisible" reCAPTCHA 时需要调用
• executeAsync()：程序化调用挑战，并返回一个 Promise，成功时返回令牌，出错时返回错误。
  • 可与 onChange() 属性结合使用的另一种方法

示例：

const recaptchaRef = React.createRef();
...
onSubmit = () => {
  const recaptchaValue = recaptchaRef.current.getValue();
  this.props.onSubmit(recaptchaValue);
}
render() {
  return (
    <form onSubmit={this.onSubmit} >
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="你的客户端站点密钥"
        onChange={onChange}
      />
    </form>
  )
}

不可见 reCAPTCHA

参见 reCAPTCHA 文档 了解如何配置它。

使用不可见选项时，你需要以不同的方式处理。需要手动调用 execute 方法。

import ReCAPTCHA from "react-google-recaptcha";

const recaptchaRef = React.createRef();

ReactDOM.render(
  <form onSubmit={() => { recaptchaRef.current.execute(); }}>
    <ReCAPTCHA
      ref={recaptchaRef}
      size="invisible"
      sitekey="你的客户端站点密钥"
      onChange={onChange}
    />
  </form>,
  document.body
);

此外，你还可以使用 executeAsync 方法，以基于 Promise 的方式调用挑战。

import ReCAPTCHA from "react-google-recaptcha";

const ReCAPTCHAForm = (props) => {
  const recaptchaRef = React.useRef();

  const onSubmitWithReCAPTCHA = async () => {
    const token = await recaptchaRef.current.executeAsync();

    // 将令牌应用到表单数据
  }

  return (
    <form onSubmit={onSubmitWithReCAPTCHA}>
      <ReCAPTCHA
        ref={recaptchaRef}
        size="invisible"
        sitekey="你的客户端站点密钥"
      />
    </form>
  )
}

ReactDOM.render(
  <ReCAPTCHAForm />,
  document.body
);

高级用法

CSP Nonce 支持

window.recaptchaOptions = {
  nonce: document.querySelector('meta[name=\'csp-nonce\']').getAttribute('content'),
};

手动加载 Google reCAPTCHA 脚本

你也可以使用裸组件来手动加载脚本。使用该组件时，你需要自己管理 grecaptcha 依赖并手动加载脚本。

import { ReCAPTCHA } from "react-google-recaptcha";

const grecaptchaObject = window.grecaptcha; // 必须提供对 Google grecaptcha 对象的访问。

render(
  <ReCAPTCHA
    ref={(r) => this.recaptcha = r}
    sitekey="你的客户端站点密钥"
    grecaptcha={grecaptchaObject}
  />,
  document.body
);

隐藏 reCAPTCHA

根据 Google 文档，如果你在用户流程中明确显示 reCAPTCHA 品牌，允许隐藏徽标。

请添加以下文本：

此站点受 reCAPTCHA 保护，适用 Google
    <a href="https://policies.google.com/privacy">隐私政策</a> 和
    <a href="https://policies.google.com/terms">服务条款</a>。

如果你希望隐藏logo，可以在 CSS 中添加以下内容：

.grecaptcha-badge { visibility: hidden; }