appleboy
verifyCallback not called
On many occasions, verifyCallback is not called. I don't think it's a deterministic process, but it always happens after the recaptcha asks the user to filter some images.
It was behaving slightly differently in my case (Gatsby website), in that the callback was only getting called if landing on the form from another page, not if accessing the form page directly :confused:
Possibly some bug hiding somewhere in the isReady() polling? Btw, I noticed state being mutated directly here: https://github.com/appleboy/react-recaptcha/blob/master/src/index.js#L103 -> which usually causes things to break, although I doubt that's what's causing this issue...
Anyways, after copy-pasting the code down and starting to dissect it to pinpoint the issue, I ended up using this stripped-down version, which works a charm for me:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
// Wait for the recaptcha object to become available
// The promise will resolve as soon as needed, keep resolving with the
// cached object.
const waitForRecaptcha = new Promise(resolve=> {
let interval = setInterval(()=> {
if (typeof window !== 'undefined' && typeof window.grecaptcha !== 'undefined') {
clearInterval(interval);
resolve(window.grecaptcha);
}
}, 1000);
});
export default class Recaptcha extends Component {
constructor(props) {
super(props);
this.state = {widget: null};
this._containerRef = null;
}
componentDidMount() {
this._renderGrecaptcha();
}
_renderGrecaptcha() {
const {sitekey, theme, type, size, tabindex, hl, badge,
verifyCallback, expiredCallback, onloadCallback} = this.props;
waitForRecaptcha.then(grecaptcha=> {
const widget = grecaptcha.render(this._containerRef, {
sitekey, theme, type, size, tabindex, hl, badge,
callback: verifyCallback,
'expired-callback': expiredCallback,
});
this.setState({widget});
});
if (onloadCallback) {
onloadCallback();
}
}
render() {
return <div ref={el=> this._containerRef = el} />;
}
}
Recaptcha.propTypes = {
onloadCallback: PropTypes.func,
verifyCallback: PropTypes.func,
expiredCallback: PropTypes.func,
sitekey: PropTypes.string.isRequired,
theme: PropTypes.string,
type: PropTypes.string,
size: PropTypes.string,
tabindex: PropTypes.string,
hl: PropTypes.string,
badge: PropTypes.string,
};
Recaptcha.defaultProps = {
onloadCallback: undefined,
verifyCallback: undefined,
expiredCallback: undefined,
theme: 'light',
type: 'image',
size: 'normal',
tabindex: '0',
hl: 'en',
badge: 'bottomright',
};
The problem is that this library is not following the newest Recaptcha API.
For example: react-recaptcha is basing on data-onloadcallbackname and data-verifycallbackname tag attributes for explicit rendering, but these attributes don't exist anymore. I don't know if this library was based on Recaptcha V1, but there are few properties that are doing completely nothing and these might be the reasons why it doesn't work at all.
I have some spare time tomorrow and I'll try to make this library compatible with the current Recaptcha API so it would work in all the cases described in the docs.
Btw, can I ask pretty please people finding this issue in the future to just click the "thumbs up" on the issue description, instead of commenting with just a +1?
Hey guys! It took me a little bit more time to make it happen, but it's here! My approach has some improvements comparing to this lib and most important - it works! 😄 🚀 What's awesome - you can have everything in your React component (not outside in some global variables). Verify callback also works like a charm!
Library: https://github.com/sarneeh/reaptcha Example: https://sarneeh.github.io/reaptcha/
Hope it helps! 😄 🎉
If you'll encounter any problems, just file an issue - I'm available right now and will fix anything pretty fast. 💃
