React Native与reCATPCHA
问题描述:
我试图在我的反应本机应用程序中实现google reCAPTCHA。我正在使用一个包装的webview。React Native与reCATPCHA
<WebView
javaScriptEnabled={true}
mixedContentMode={'always'}
style={{height: 200}}
source={{
html: this.getWebviewContent()
}}/>
getWebviewContent(){
var originalForm = '<!DOCTYPE html><html><head><script src="https://www.google.com/recaptcha/api.js"></script></head><body><form action="[POST_URL]" method="post"><input type="hidden" value="[TITLE]"><input type="hidden" value="[DESCRIPTION]"><input type="hidden" value="[URL]"><div class="g-recaptcha" data-sitekey="<My key>"></div><input type="submit" value="Send"/></form></body></html>'
var tmp = originalForm
.replace("[POST_URL]", "http://localhost:3000/v1/video")
.replace("[TITLE]", this.state.form.title)
.replace("[DESCRIPTION]", this.state.form.description)
.replace("[URL]", this.state.form.url);
return tmp;
}
我有一个理论,它不希望合作,因为我跑它作为一个“文件” WebView
,并且您无法将文件作为Google信息中心的域的一部分进行添加。
是否有任何方式在Google的reCAPTCHA仪表板中添加file://
权限或以任何方式伪造域,以便我可以在仪表板中添加该伪造的域。还是我完全失去了,这个问题是另一回事?
答
您可以通过在source
道具设置baseUrl
设置您的WebView域:
<WebView
javaScriptEnabled={true}
mixedContentMode={'always'}
style={{height: 200}}
source={{
html: this.getWebviewContent(),
baseUrl: 'http://your-domain.com' // <-- SET YOUR DOMAIN HERE
}}/>
getWebviewContent(){
var originalForm = '<!DOCTYPE html><html><head><script src="https://www.google.com/recaptcha/api.js"></script></head><body><form action="[POST_URL]" method="post"><input type="hidden" value="[TITLE]"><input type="hidden" value="[DESCRIPTION]"><input type="hidden" value="[URL]"><div class="g-recaptcha" data-sitekey="<My key>"></div><input type="submit" value="Send"/></form></body></html>'
var tmp = originalForm
.replace("[POST_URL]", "http://localhost:3000/v1/video")
.replace("[TITLE]", this.state.form.title)
.replace("[DESCRIPTION]", this.state.form.description)
.replace("[URL]", this.state.form.url);
return tmp;
}
是否行得通? '
mihai1990
是的,这确实有效!非常感谢您的反馈。如果您编写示例解决方案,我可以将其设置为接受的答案。 –