how to implement recaptcha in react native app?

2019-08-04 10:55发布

问题:

I have used "npm install react-native-recaptcha-v3" for recaptcha integration. But it gives a warning Failed prop type: The prop 'url' is marked as required in 'ReCaptcha', but its value is 'undefined'. what was I do wrong?

how to resolve it?

     render() {
        return (
        <View>
        <ReCaptcha
          sitekey= {this.props.sitekey}
          verifyCallback={this.verifyCallback.bind(this)}
        />
       </View>
       );
      }

回答1:

Seems like you're looking at React.js vs React Native.

React.js packages are not intended for React Native. Think of React Native as an extremely specific version of React.js because it is built specifically for mobile devices - specifically Android and iOS.

There are packages specific to React Native like this one.

I would also think of the user experience and why you need a Recaptcha on a phone.

It's not exactly an ideal user experience as people get frustrated easily when they have bad connections and will give up.



回答2:

<ReCaptcha
   siteKey={SiteKey}
   action="<action_name>" // it's not required but you can it if you are using recaptcha more than one time.
   url="<use_any_valid_url_or_app_related_url>"
   reCaptchaType={1}
   onExecute={(res) => {
      this.setState({ reCaptcha: res });
   }}
/>

URL props is required for react-native-recaptcha-v3 so you can pass any valid URL or app related URL and make sure URL starts with something like 'https://stackoverflow.com/'. if you simply use 'stackoverflow.com' as URL it shows an error for URL. As soon as from render onExecute() executes and in res variable, you got the recaptcha token, which you can use for verifying the recaptcha. and one more point, there are no props like verifyCallback in react-native-recaptcha-v3. So don't use it.