如何在反应本机应用程序中实现recaptcha？答案

【问题标题】：how to implement recaptcha in react native app?如何在反应本机应用程序中实现recaptcha？
【发布时间】：2018-09-28 10:48:04
【问题描述】：

我已使用“npm install react-native-recaptcha-v3”进行 recaptcha 集成。但是它给出了一个警告失败的道具类型：道具'url'在'ReCaptcha'中被标记为必需，但它的值是'undefined'。我做错了什么？

如何解决？

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

【问题讨论】：

那个包是给 React 的，React-Native 使用不同的组件。我认为您不能按原样使用它。试试这个：npmjs.com/package/react-native-recaptcha-v3（通过谷歌搜索“react native recaptcha”找到）
但没有说明如何使用。
它在同一页面上有一个 Usage 部分。我猜它当然假设了关于实现 recaptchas 的一般知识。
这个问题是我发布的，因为反应原生对我来说是新的。还有javascript。
好吧，不知道该告诉你什么。 Stackoverflow 不是其他人为您编写免费教程的网站。您需要学习如何使用自己想使用的东西，一旦遇到严重问题并尝试解决数小时后，您就会回来。

标签： javascript react-native recaptcha

【解决方案1】：

似乎您正在查看 React.js 与 React Native。

React.js 包不适用于React Native。将 React Native 视为 React.js 的一个极其特殊的版本，因为它是专门为移动设备构建的——特别是 Android 和 iOS。

有一些特定于 React Native 的包，例如 this one。

我还会考虑用户体验以及为什么需要在手机上使用 Recaptcha。

这并不是一种理想的用户体验，因为人们在连接不好时很容易感到沮丧并会放弃。

【讨论】：

这是注册表单的安全选项。这将有利于避免虚假账户。我尝试使用您建议的，但给出警告 道具类型失败：道具“url”在“ReCaptcha”中标记为必需，但其值为“未定义”。我做错了什么?
@Sam009 不看代码就很难知道发生了什么。你能用相关代码更新这篇文章吗？
URL 是必需的属性：与应用关联的 URL URL（这是您在获取 siteKey 时在 Google 管理控制台上注册的域 URL） 截图：screencast.com/t/O7e2W6vO

【解决方案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 });
   }}
/>

react-native-recaptcha-v3 需要 URL 属性，因此您可以传递任何有效的 URL 或与应用相关的 URL，并确保 URL 以“https://stackoverflow.com/”之类的开头。如果您只是使用“stackoverflow.com”作为 URL，则会显示 URL 错误。一旦从 render onExecute() 执行并在 res 变量中，您就会获得 recaptcha 令牌，您可以使用它来验证 recaptcha。还有一点，react-native-recaptcha-v3 中没有像 verifyCallback 这样的道具。所以不要使用它。

【讨论】：

【解决方案3】：

首先在 https://www.google.com/recaptcha/admin/create

然后你像这样创建一个新组件：

const GetRecaptcha = (props) => {
const onMessage = (data) => {

    console.log('recaptcha', data.nativeEvent.data)
    //here you can put your action to perform(check validation on your server or somthing)
    props.action(data.nativeEvent.data);

};

return <View style={{}}>

    <WebView
        style={{height: 0}}
        onMessage={async (e) => await onMessage(e)}
        containerStyle={{height: 0}}
        source={{
            html: `
            <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://www.google.com/recaptcha/api.js?render=RECAPTCHA-KEY"></script>
        <script>
        function onLoad(e) {
         
            grecaptcha.ready(function () {
                grecaptcha.execute('RECAPTCHA-KEY', {action: 'submit'}).then((token) => {
                    window.ReactNativeWebView.postMessage(token);
                });
            }) 
        }
        </script>
        </head>
        <body onload="onLoad()">
        </body>
        </html>`
        , baseUrl: 'your-url',
    }}/>


</View>;
};

你可以使用其他组件中的这个组件作为这个例子：

const action=(token)=>{
   // validate key on server
   if(token){
    //do some action
   }else{
   //do some action
   }
  }
  const App=()=>{
  return <GetRecaptcha action={action}/>
  }

【讨论】：