acsant / react-native-recaptcha Goto Github PK
View Code? Open in Web Editor NEWA react native wrapper for google recaptcha v3
License: MIT License
A react native wrapper for google recaptcha v3
License: MIT License
I implemented an invisible Recaptcha in my app. The onReady fires for both Android and iOS but onExecute doesn't for iOS, at least on my iPhone. Is there a way to get the token with a function call?
<ReCaptcha
ref={ref => {
this.recaptcha = ref;
}}
containerStyle={{ backgroundColor: 'transparent' }}
siteKey={Config.RECAPTCHA_SITE_KEY}
action="my_action"
url={Config.RECAPTCHA_URL}
reCaptchaType={1}
onReady={this.onRecaptchaReady()}
onExecute={res => {
this.onRecaptchaExecute(res);
}}
/>
I've been trying to use this component in an app but everytime it pop's up and i solve the challenge, it shows me that "Can't handle url: https://our_url.com/".
<ReCaptcha
onReady={() => console.log('on ready')}
siteKey={constants.CAPTCHA_SITE_KEY}
url={'https://our_url.com/'}
action={'verify'}
reCaptchaType={1}
onExecute={this.onCaptchaExecute} />
The onCaptchaExecute function just console logs the token but it's never called and neither is the on ready.
Tested on both iOS and Android.
Hello, I tried using it but when my app loads it opens a tab in my browser pointing to the domain I set for siteKey
and exiting the app of course. Not sure what am I doing wrong.
hello can you help me if I'm using the component correctly, I can not render the view of the captcha
"react-native-recaptcha-v3": "0.0.13",
import ReCaptcha from 'react-native-recaptcha-v3'
onReady(value) {
console.log("Captcha value:", value);
}
onExecute(value) {
console.log("Captcha value:", value);
}
<ReCaptcha
containerStyle={{height:200}}
siteKey='SITEKEY'
url='DOMAIN'
action='verify'
reCaptchaType={2}
onReady={this.onReady.bind(this)}
onExecute={this.onExecute.bind(this)}
/>
My code is:
render() {
return (
<ReCaptcha
siteKey="MY_SITE_KEY"
url='https://www.google.com/recaptcha/api/MY_SITE_KEY'
action='verify'
reCaptchaType={1}
onExecute={(token) => this.captureResponseToken(token)} // I use this function to
save the response token but not receiving any response
/>
)
};
captureResponseToken = (token) => {
console.log(token)
}
Version:
"react-native-recaptcha-v3": "0.0.16",
"react-native": "0.61.5",
"react": "16.9.0",
Am i doing anything wrong?
Hi, thanks for making this package! I'm copying it locally for development testing (#10 is getting in the way) and noticed that MessageWebView
's postMessage
refers to this.WebView
and doesn't seem to be used by anything. Should that code be deleted?
PropTypes.oneOf
only accepts an array but an object is passed.
reCaptchaType: PropTypes.oneOf(type).isRequired
Instead, what you could do is:
reCaptchaType: PropTypes.oneOf(Object.values(type)).isRequired
Also, what exactly is the url
prop for?
render() {
//https://github.com/facebook/react-native/issues/19986 webview
const re_captcha_props = {
url:config.re_captcha_url,
reCaptchaType:1,
action:'verify',
siteKey:config.re_captcha_site_key,
onExecute:(result)=>{
console.log('re_captcha_props.onExecute',result);
alert('onExecute'+JSON.stringify(result));
},
onReady:()=>{
alert('onReady');
console.log('re_captcha_props.onReady');
},
};
return (
<View>
<ReCaptcha
{...re_captcha_props} />
</View>
);
}
re_captcha_site_key:'your key',
re_captcha_url:'http://127.0.0.1/',
How can I delay my request for a recaptcha token?
I got response token after recaptcha was loading, for now. But I need execute recaptcha only when user fill my form.
How I can do this?
The captcha is not being rendered properly. It's super small, even though the container is 100% width and 80px high.
<View style={{ width: '100%', height: 80, borderWidth: 1}}>
<ReCaptcha
onReady={() => console.log("Captcha is ready")}
siteKey={site_key}
url={url}
action={'verify'}
reCaptchaType={1} //invisible
containerStyle={{ height: '100%', width: '100%', marginButton: 0 }}
onExecute={this.captureResponseToken.bind(this)}
/>
</View>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.