Question

我正在尝试使用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

我有一个站点密钥和一个秘密密钥。

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

Answer 1

新答案：）

首先，我不确定您是否说过将localhost和localhost：3000添加到允许的域中。如果已删除，则应将其删除

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

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

接下来，我注意到您对使用reCaptcha v2的评论。如果您尝试以v3的方式实施reCaptcha，那么它将无法正常工作。

reCaptcha v2

将脚本添加到div中，以检测用户输入是否为人类。

reCaptcha 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"，您需要在Google帐户中配置此字符串。 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组件，而转向挂钩，通常的做法是现在远离它，不支持Components。 https://reactjs.org/docs/hooks-effect.html

React Recaptcha v3未捕获（承诺）null

1 个答案: