react-google-invisible-recaptcha - Javascript

介绍

react-google-invisible-recaptcha是一个用于在React应用中使用Google Invisible reCAPTCHA的Javascript库。Google Invisible reCAPTCHA是一个无需用户手动输入验证码的验证系统。它会根据用户行为分析来自动验证用户。

安装

使用npm进行安装：

npm install react-google-invisible-recaptcha --save

使用

载入Google Invisible reCAPTCHA API

首先，您需要在您的网站上载入Google Invisible reCAPTCHA API。该API在您的网站上运行后，将出现一个验证码。当用户单击“我不是机器人”时，系统将验证用户是否是真人。

您应该在public/index.html文件中添加以下标记（在head标签内）：

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

在代码中使用

假设你已经在你的JavaScript文件中引入了react-google-invisible-recaptcha库，现在你可以在你的项目中使用Google Invisible reCAPTCHA了。

初始化

首先，您需要在您的组件中轻松初始化reCAPTCHA组件。您可以使用以下代码创建一个名为recaptchaRef的引用。

import React from 'react';
import ReCAPTCHA from "react-google-invisible-recaptcha";

class MyComponent extends React.Component {
  recaptchaRef = React.createRef();

  render() {
    return (
      <ReCAPTCHA
        ref={this.recaptchaRef}
        sitekey="Your client site key"
        onResolved={() => console.log("Human detected.")}
      />
    )
  }
}

在<ReCAPTCHA>组件中，您需要设置sitekey属性，它是您在Google reCAPTCHA的管理面板中为您的网站生成的。您还需要在onResolved回调中定义您希望使用的函数。当onResolved回调被调用时，意味着用户通过了验证。

您可以在代码中使用this.recaptchaRef.current.execute()来启动reCAPTCHA验证。

   handleClick = () => {
    this.recaptchaRef.current.execute();
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击我</button>
    )
  }

在上面的代码片段中，我们定义了一个handleClick函数，当用户单击按钮时，将启动reCAPTCHA验证。您可以根据需要进一步更改代码。

getConfigs

通过调用getConfigs函数，您可以获取Google Invisible reCAPTCHA的配置。你可以这样来做。

this.recaptchaRef.current.getConfigs().then(configs => console.log(configs));

结论

这是一个基于react的用于验证用户的组件。如果你的用户需要提交表单或执行一些操作，但你想验证他们是否是真实的用户，那么这个库就很适合你了。