Clever Geek Handbook

How to add google recaptcha to react generation app?

I am trying to get the recaptcha response to pass it through redux-form

.
Have tried 2 methods below ...

Attempt 1 :
Specifying a callback in <head>

.

index.html

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

The problem here is that the callback is in the global scope, but I need to access it in React components.

Attempt 2 :
Specifying a callback in the DOM.

Component : handleRecaptcha (resp)

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

Component : 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>

I get a message ReCAPTCHA couldn't find user-provided function: function () { [native code] }

after sending recaptcha. Probably a scope issue.

I am trying to avoid using a different library as I think this is a rather trivial problem.
Someone might have some idea how to do this?

I only need to get an instance widget

and do grecaptcha.getResponse(widget)

to get a response. API ref

+4


source to share


3 answers


Use react-recaptcha



import Recaptcha from 'react-recaptcha'

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


source


You can also try Reaptcha .

It's much cleaner, more modern, and has a more React-way approach for handling the reCAPTCHA widget.



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


source


For those looking for this thread and don't want to use a third party library, I suggested a ReCaptcha component with auto loading, no third party dependencies, I hope this helps

The essence:

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

CodeSandbox:

https://codesandbox.io/embed/patient-shape-k8r1l?fontsize=14

0


source






More articles:


All Articles