react-recaptcha-net

React 组件，用于 [Google reCAPTCHA v2][reCAPTCHA]。

基于dozoisch/react-google-recaptcha

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

被一条龙服务过.jpg

安装

npm install --save react-recaptcha-net

使用

首先，你需要 [注册一个 API 密钥对][signup]，获取客户端密钥后，便可以使用 <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
);

组件属性

用于自定义渲染的属性：

| 名称 | 类型 | 描述 | |------------------|---------|------------------------------------------------------------| | asyncScriptOnLoad | func | 可选 在 Google reCAPTCHA 脚本加载完成后的回调函数 | | badge | enum | 可选 bottomright、bottomleft 或 inline，设置 reCAPTCHA 的徽标位置。仅适用于不可见的 reCAPTCHA | | hl | string | 可选 设置 hl 参数，使 reCAPTCHA 支持多种语言。请参见 [reCAPTCHA hl] | | isolated | bool | 可选 插件开发者用来避免与页面上已有的 reCAPTCHA 实例冲突。如果为 true，此 reCAPTCHA 实例将处于一个独立的 ID 空间。（默认值：false） | | onChange | func | 用户成功完成验证码后调用的函数 | | onErrored | func | 可选 在挑战过程中出错时的回调，通常是由于网络问题。 | | onExpired | func | 可选 在挑战过期后调用的回调，用户需要重新完成验证码。默认会调用 onChange，并传入 null 来表示过期回调。 | | sitekey | string | API 客户端密钥 | | size | enum | 可选 compact、normal 或 invisible，用来设置验证码的大小或使用不可见验证码 | | stoken | string | 可选 设置 stoken 参数，使 reCAPTCHA 支持从不同域名使用。参见 [reCAPTCHA secure-token] | | tabindex | number | 可选 元素的 tabindex （默认值：0） | | type | enum | 可选 image 或 audio，设置初始验证码的类型 （默认值：image） | | theme | enum | 可选 light 或 dark，设置小部件的主题 （默认值：light）。参见 [example][docs_theme] |

组件实例 API

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

• getValue()：返回验证码字段的值
• getWidgetId()：返回 reCAPTCHA 小部件的 ID
• reset()：强制重置。参见 [JavaScript API 文档][js_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; }