Skip to content

Instantly share code, notes, and snippets.

@shukerullah

shukerullah/ReCaptcha.js

Last active May 31, 2020 19:56
Show Gist options
  • Save shukerullah/63ba00f1eca4268629f788a387aa3d3a to your computer and use it in GitHub Desktop.
Save shukerullah/63ba00f1eca4268629f788a387aa3d3a to your computer and use it in GitHub Desktop.
Download ZIP
A react native wrapper for google invisible reCAPTCHA v3
Raw
ReCaptcha.js
import React from 'react';
import {WebView} from 'react-native-webview';
const getReCaptchaContent = (captchaKey, action) => {
const webForm = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width; initial-scale=1; maximum-scale=1"
/>
<style>
.text-xs-center {
text-align: center;
}
.g-recaptcha {
display: inline-block;
}
</style>
<script src="https://www.google.com/recaptcha/api.js?render=${captchaKey}"></script>
<script type="text/javascript">
grecaptcha.ready(function () {
grecaptcha
.execute("${captchaKey}", {
action: "${action}",
})
.then(function (token) {
window.ReactNativeWebView.postMessage(token);
});
});
</script>
</head>
</html>
`;
return webForm;
};
type Props = {
action?: string,
domain: string,
captchaKey: string,
onSuccess?: Function,
};
export default class ReCaptcha extends React.PureComponent<Props> {
webview: WebView;
static defaultProps = {
action: 'verify',
onSuccess: () => {},
};
render() {
const {domain, captchaKey, action, onSuccess} = this.props;
return (
<WebView
ref={ref => {
this.webview = ref;
}}
onMessage={({nativeEvent}: Object) => {
onSuccess(nativeEvent.data);
}}
source={{
baseUrl: domain,
html: getReCaptchaContent(captchaKey, action),
}}
/>
);
}
}
@shukerullah
Copy link
Author

A react native wrapper for google invisible reCAPTCHA v3

Example:

return (
  <ReCaptcha
    domain={DOMAIN}
    captchaKey={reCAPTCHA_site_key}
    onSuccess={token => {
      console.log(token);
    }}
  />
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment