Repository navigation
.verifyCallback() does not work with es6 classes #231
Description
Hello,
When calling the .execute() method on the recaptcha instance, the verifyCallback function is not called if within an es6 class. The verifyCallback is only called when outside the class. This is not ideal as it doesn't allow you to submit a form.
Doesn't work
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
var Recaptcha = require('react-recaptcha');
export class Submit extends React.Component<RouteComponentProps<{}>, {}>{
recaptchaInstance: any;
constructor() {
super();
this.executeCaptcha = this.executeCaptcha.bind(this);
this.verifyCallback = this.verifyCallback.bind(this);
}
executeCaptcha() {
this.recaptchaInstance.execute();
}
verifyCallback(response){
console.log(response); // never is called
// submit form
}
render() {
return <div>
<form onSubmit={this.executeCaptcha}>
<button>Send</button>
</form>
<Recaptcha
ref={e => this.recaptchaInstance = e}
sitekey="xxxxxxxxxxxxxxxxxxxx"
size="invisible"
verifyCallback={this.verifyCallback}
/>
</div>;
}
}
It does work this way
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
var Recaptcha = require('react-recaptcha');
const verifyCallback = function(response){
console.log(response);
// can't submit form now!? (or is there a way)
}
export class Submit extends React.Component<RouteComponentProps<{}>, {}>{
recaptchaInstance: any;
constructor() {
super();
this.executeCaptcha = this.executeCaptcha.bind(this);
this.verifyCallback = this.verifyCallback.bind(this);
}
executeCaptcha() {
this.recaptchaInstance.execute();
}
verifyCallback(response){
console.log(response); // never is called
}
render() {
return <div>
<form onSubmit={this.executeCaptcha}>
<button>Send</button>
</form>
<Recaptcha
ref={e => this.recaptchaInstance = e}
sitekey="xxxxxxxxxxxxxxxxxxxx"
size="invisible"
verifyCallback={this.verifyCallback}
/>
</div>;
}
}
Is there a way we can stick the verifyCallback in the class?
Activity
zhuangya commentedon Apr 23, 2018
workaround: pass any function to
onloadCallbackwhy:
react-recaptcha/src/index.js
Line 69 in 52a22d8
if the component mount BEFORE the
grecaptchaarrives, it would not call_renderGrecaptchaifrender === 'explicit' && onloadCallback && this.state.ready && !prevState.readyis false.ioziian commentedon Apr 23, 2018
I changed my key using this instruction
https://codelabs.developers.google.com/codelabs/reCAPTCHA/index.html#2
and verifyCallback began to work after execute.
Perhaps this will help someone.
jstorm31 commentedon Apr 27, 2018
@zhuangya workaround works, but only for 1 form submit. Even if a function is passed to
onloadCallback, repeated form submit does not triggerverifyCallback.jsardev commentedon May 28, 2018
@zhuangya The workaround doesn't work for me :(
verifyCallbackstill does not execute.jsardev commentedon Jun 13, 2018
Hey guys! As I encountered the same issue and couldn't solve it in a clean way I decided to create my own library. It has some improvements comparing to this lib and most important - it works completely fine! 🚀 Verify callback just works and what's awesome - you can have everything in your React component (not outside in some global variables).
Library: https://github.com/sarneeh/reaptcha
Example: https://sarneeh.github.io/reaptcha/
Hope it helps! 😄 🎉
thomasjthomasj commentedon Jun 28, 2018
@sarneeh Had this exact problem and this helped a bunch, and is much nicer to use that the appleboy library! Do you intend to continue to maintain it, for instance, after Google deprecate V2 for V3?
jsardev commentedon Jun 29, 2018
@thomasjthomasj As the library is very small and the functionality isn't a big deal I think I'll have time to maintain it for a longer period of time :) I'm "active" (not contributing much, but following things that happen) on GitHub, so I think it won't be a problem.
About reCAPTCHA v3 - I've actually thought about implementing it right away, but I've noticed that reCAPTCHA v3 is still in development and there might be major changes. So I've decided to leave it for now and when it will get stable - I will add support for it.