我正在努力为反应本机应用程序上的登录屏幕实现 reCaptcha 验证器，该应用程序必须在网络和移动环境上工作。
由于我作为一名程序员相当新，并且对反应本机的经验很少，我知道我可能错过了一些非常基本/明显的东西，这就是为什么我决定问这个问题，即使这个问题已经被问过之前有过几次。
我想this https://github.com/douglasjunior/react-native-recaptcha-that-works库，因为它是 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 https://i.stack.imgur.com/qe3i8.png警告信息。
首先创建验证码密钥https://www.google.com/recaptcha/admin/create 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}/>
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
