2

我正在尝试使用 react-recaptcha-v3 （https://www.npmjs.com/package/react-recaptcha-v3），并且我准确地编写了示例：

import React, { Component } from 'react';
import { ReCaptcha } from 'react-recaptcha-v3'
import { loadReCaptcha } from 'react-recaptcha-v3'

class ExampleComponent extends Component {

  verifyCallback = (recaptchaToken) => {
    // Here you will get the final recaptchaToken!!!  
    console.log(recaptchaToken, "<= your recaptcha token")
  }

  componentDidMount() {
    loadReCaptcha('site key (I can't give it here)')
  }

  render() {
    return (
      <div>

        <ReCaptcha
            sitekey="site key (I can't give it here)"
            action={console.log('action')}
            verifyCallback={this.verifyCallback}
        />

        <h2>Google ReCaptcha with React </h2>

        <code>
          1. Add <strong>your site key</strong> in the ReCaptcha component. <br/>
          2. Check <strong>console</strong> to see the token.
        </code>
      </div>
    );
  };
};

export default ExampleComponent;

我这样写我的域名：

  • 本地主机
  • 本地主机：3000

我得到了一个站点密钥和一个密钥。

这是我在控制台中得到的：

在此处输入图像描述

4

1 回答 1

0

新答案:)

首先，我不确定您是否说您将 localhost 和 localhost:3000 添加到允许的域。如果你这样做了，你应该删除它们

我们建议使用单独的密钥进行开发和生产，并且不允许在您的生产站点密钥上使用 localhost。

即使您将其用于测试环境，我也不推荐它。而是使用测试站点密钥和密钥。已启用 localhost 进行测试。

接下来，我注意到您对使用 reCaptcha v2 的评论。如果您尝试按照 v3 的意图实施 reCaptcha，这将不起作用。

验证码 v2

将脚本添加到 div 以检测用户输入检查他们是否是人。

验证码 v3

添加一个不可见的 div 来检测它是否认为用户是机器人。您必须设置一个后端才能使其正常工作。它创建一个从 0.0 到 1.0 的分数。0.0 表示它很可能是机器人，1.0 表示它很可能是人类。它使用令牌，然后在您的后端为您提供如下所示的响应。

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

https://developers.google.com/recaptcha/docs/faq

接下来，我检查了包的文档。您不能loadReCaptcha在同一个组件中使用，它必须在父级中。还action={console.log('action')}需要是一个字符串action="action"，你在你的谷歌帐户中配置这个字符串。 https://developers.google.com/recaptcha/docs/v3#frontend_integration

接下来，我不建议在创建 uanessacry 依赖项时依赖包。我在这里写了一篇关于它的文章https://medium.com/@alexjamesdunlop/unnecessary-packages-b3623219d86。

import React, { Component } from 'react';

class ExampleComponent extends Component {
  componentDidMount() {
    const script = document.createElement("script")
    script.src = "https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"
    script.addEventListener("load", () => {
      window.grecaptcha.ready(function() {
        window.grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
         // ...
        });
      });
    })
    document.body.appendChild(script)
  }

  render() {
    return (
      <div
         className="g-recaptcha"
         data-sitekey="_Your_Key_"
         data-size="invisible"
      >
      </div>
    )
  }
}

export default ExampleComponent;

如果您确实想继续使用该软件包，它应该是这样的。

import React, { Component } from 'react';
import { loadReCaptcha, ReCaptcha } from 'react-recaptcha-v3'

class ExampleComponent extends Component {
  verifyCallback = (token) => {
    // This is the token you send to your backend 
    console.log("token: ", token)
  }

  render() {
    return (
      <div>
        <ReCaptcha
          sitekey={your_site_key}
          // This must be a string and an example google gives is 'homepage' or 'login'
          action="action"
          verifyCallback={this.verifyCallback}
        />
      </div>
    )
  }
}

class ParentComponent extends Component {
  componentDidMount() {
    loadReCaptcha(your_site_key)
  }

  render() {
    return <ExampleComponent />
  }
}

export default ParentComponent;

现在，如果您确实想使用 v2 而不是 v3，我将在文章 https://medium.com/@alexjamesdunlop/unnecessary-packages-b3623219d86中展示如何做到这一点

我建议远离 react 组件并转向钩子，现在远离它是一种常见的做法，不支持组件。 https://reactjs.org/docs/hooks-effect.html

于 2020-03-11T02:23:26.310 回答