如何在Create React App中添加Google Recaptcha？

Question

我正在尝试获取recaptcha响应，以便可以通过redux-form传递它。
尝试了以下2种方法...

尝试1 ：
在<head>指定回调。

index.html ：

<script src='https://www.google.com/recaptcha/api.js?onload=callback&render=explicit'></script>

这里的问题是回调是在全局范围内的，但是我需要在React组件中访问它。

尝试2 ：
在DOM中指定回调。

组件：handleRecaptcha（resp）

handleRecaptcha(resp) {
  console.log(resp);
}

组件：render（）：

<div className="g-recaptcha" data-callback={this.handleRecaptcha.bind(this)}  data-sitekey="***"></div>

index.html ：

<script src='https://www.google.com/recaptcha/api.js'></script>

提交验证ReCAPTCHA couldn't find user-provided function: function () { [native code] }后，我收到消息ReCAPTCHA couldn't find user-provided function: function () { [native code] } 。 可能也是范围问题。

我试图避免使用其他库，因为我认为这是一个相当琐碎的问题。
会有人碰巧知道如何去做吗？

我所需要做的就是grecaptcha.getResponse(widget) widget实例，并执行grecaptcha.getResponse(widget)以获取响应。 API参考

Answer 1

使用react-recaptcha

import Recaptcha from 'react-recaptcha'

<Recaptcha
  sitekey="xxxxxxxxxxxxxxxxxxxx"
  render="explicit"
  verifyCallback={verifyCallback}
  onloadCallback={callback}
/>

Answer 2

您也可以尝试Reaptcha 。

它更干净，更现代，并且在处理reCAPTCHA小部件时具有更多的React-way方法。

<Reaptcha 
  sitekey="YOUR_API_KEY" 
  onVerify={() => {
    // Do something
  }}
/>

Answer 3

对于那些希望使用此线程并且不想使用第三方库的人，我想出了一个自动加载ReCaptcha组件，没有第三方依赖项，希望对您有所帮助

要旨：

https://gist.github.com/ivansnek/8b69055ddef6b6a43769ed95bd7360f8

CodeSandbox：

https://codesandbox.io/embed/ Patient-shape-k8r1l？fontsize = 14

如何在Create React App中添加Google Recaptcha？

问题描述

2 个解决方案

解决方案1
3 2017-05-29 09:58:09

解决方案2
0 2018-06-13 22:04:37

解决方案3
0 2019-10-20 00:37:06

如何在Create React App中添加Google Recaptcha？

问题描述

2 个解决方案

解决方案1 3 2017-05-29 09:58:09

解决方案2 0 2018-06-13 22:04:37

解决方案3 0 2019-10-20 00:37:06

解决方案1
3 2017-05-29 09:58:09

解决方案2
0 2018-06-13 22:04:37

解决方案3
0 2019-10-20 00:37:06