如何将 Google 的 reCAPTCHA 集成到 React Native 应用程序中？答案

【问题标题】：How to integrate Google's reCAPTCHA in a React Native app?如何将 Google 的 reCAPTCHA 集成到 React Native 应用程序中？
【发布时间】：2016-10-07 22:49:53
【问题描述】：

我没有找到任何 React Native 库来帮助 reCAPTCHA，我发现的唯一 Android 库是 Android-Lib-reCAPTCHA，但它使用旧 API（显示密码而不是复选框）。

我尝试使用 react-native-webview-bridge 显示 Javascript reCAPTCHA，但我无法让它工作，而且它非常缓慢且不稳定。此外，有时验证码需要更多空间来显示图片，而不仅仅是一个复选框。

除了 WebView，您还知道其他方式吗？我还检查了原生 Android 验证系统，但它们都太旧/太复杂（密码）。

另外，机器人安装应用和订阅的频率是多少？也许我不需要验证码，只需要一个密钥/CSRF 令牌？

【问题讨论】：

标签： webview react-native captcha recaptcha

【解决方案1】：

你可以尝试像这样使用 webview 组件：

首先在 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}/>
  }

【讨论】：

【解决方案2】：

对于网络或移动网络应用程序，有一堆用于谷歌验证码的反应包装器。例如github/react-grecaptcha 为我工作就像一个魅力。

【讨论】：

那么如何在原生移动应用中测试用户是否是人类？
那么您究竟如何保护您的 REST API 免受机器人攻击？当来自某个 ip/设备的请求太多时......您只需显示用户验证码以过滤从您的 API 窃取数据的机器人......
@Ľubomír 这不再是在客户端。即使您有验证码，机器人仍然可以找到您的 API URL 并直接发送垃圾邮件。你需要在你的 API 中实现某种保护，例如速率限制。
感谢 cmets，这是正确的想法。我已经更新了答案。
@Alex 可以在 ReactNative 应用中使用 React 组件吗？