如何在React Native 上实现reCaptcha

ktca8awb 于 2023-03-19 发布在 React

关注(0)|答案(2)|浏览(232)

我正在为一个React原生应用程序的登录屏幕实现一个reCaptcha验证器，该应用程序必须在网络和移动的环境中工作。
由于我是一个相当新的程序员，对react-native几乎没有经验，我意识到我可能错过了一些非常基本/明显的东西，这就是为什么我决定问这个问题，尽管这个问题以前已经被问过几次了。
我正在尝试this库，因为它是NPMjs上最流行的库。
在登录屏幕页面上，我调用组件<RecaptchaComponent/>，这是我目前在该组件中拥有的代码。

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import Recaptcha, { RecaptchaHandles } from "react-native-recaptcha-that-works";

export const Recaptcha_Component = () => {

    let url = "mySiteUrl";
    let key = "publicKey";

    const recaptcha: any = useRef<RecaptchaHandles>();

    const send = () => {
        console.log('send!');
        recaptcha.current?.open();
    };

    const onVerify = (token: string) => {
        console.log('success!', token);
    };

    const onExpire = () => {
        console.warn('expired!');
    }

    return (
        <View>
            <Recaptcha
                ref={recaptcha}
                siteKey={key}
                baseUrl={url}
                onVerify={onVerify}
                onExpire={onExpire}
                size={"invisible"}
            />
            <Button title="Send" onPress={send} />
        </View >
    )
}

当我按下应用程序中的发送按钮时，我看到一个小的加载指示器，但之后什么也没有发生。在控制台上，我看到this警告消息。

react-native

来源：https://stackoverflow.com/questions/70129467/how-to-implemet-a-recaptcha-on-react-native

2条答案

按热度按时间

4xrmg8kj1#

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

赞(0）回复(0）举报 2023-03-19

p5cysglq2#

我不知道它是否仍然相关，但为了使用该ref，需要将其初始化为null：
const recaptcha: any = useRef<RecaptchaHandles>(null);
另外，去掉“any”--你已经把它声明为RecaptchaHandles的一个示例了。最后，如果你在开发模式下，使用google开发站点密钥和url。在生产环境中，使用你自己的密钥和url
Google开发站点密钥：6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI谷歌基地网址：https://www.google.com/recaptcha/api

赞(0）回复(0）举报 2023-03-19

我来回答

如何在React Native 上实现reCaptcha

2条答案

相关问题

热门标签

最新问答