我正在尝试将 reCaptcha 功能添加到我的 Flutter 应用程序中,但在验证码注册过程中需要提供一个域名,而我没有适用于移动应用的域名。我已经查阅了几篇指南,教授如何将 reCaptcha 添加到移动应用中,然而这些指南使用包名称注册 reCaptcha 而非域名。在 2020 年,实现 flutter 应用程序或任何移动应用程序中的 reCaptcha 的正确方法是什么?
您可以使用这个插件,flutter_recaptcha。
对于域名的问题,我也遇到了相同的问题。我首先发现需要使用“我不是机器人”复选框选项,在这里,并且我必须检查github存储库以找到此信息,“!!!记得将此域添加到reCaptcha设置:recaptcha-flutter-plugin.firebaseapp.com,”,解释了这一点。
在主页面中未看到这一点后,我有点迷茫,但现在它有意义了。希望能有所帮助。
编辑
试用之后,我发现了一些要提到的事情。该插件没有提供用于服务器端身份验证的验证码响应,因此似乎并不是非常有用。然而,它是一个简单的插件,所以可能可以用作示例。我认为步骤是创建一个带验证码的网页。像插件一样,使用Webview打开页面,然后捕获表单的提交输出和提交表单的用户的IP地址,使用类似这样的方法,然后将其发送到Flutter,然后使用Google库来验证验证码。
说明
我刚刚完成了实现,并找到了一个有效的方法。首先,创建一个html页面,就像这样:
<html>
<head>
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body style='background-color: aqua;'>
<div style='height: 60px;'></div>
<form action="?" method="POST">
<div class="g-recaptcha"
data-sitekey="YOUR-SITE-KEY"
data-callback="captchaCallback"></div>
</form>
<script>
function captchaCallback(response){
//console.log(response);
if(typeof Captcha!=="undefined"){
Captcha.postMessage(response);
}
}
</script>
</body>
</html>
接下来,将其托管在你的域名下,例如example.com/captcha。
然后,创建一个Flutter小部件,类似于以下内容:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Captcha extends StatefulWidget{
Function callback;
Captcha(this.callback);
@override
State<StatefulWidget> createState() {
return CaptchaState();
}
}
class CaptchaState extends State<Captcha>{
WebViewController webViewController;
@override
initState(){
super.initState();
}
@override
Widget build(BuildContext context) {
return Center(
child: WebView(
initialUrl: "https://example.com/captcha.html",
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: Set.from([
JavascriptChannel(
name: 'Captcha',
onMessageReceived: (JavascriptMessage message) {
//This is where you receive message from
//javascript code and handle in Flutter/Dart
//like here, the message is just being printed
//in Run/LogCat window of android studio
//print(message.message);
widget.callback(message.message);
Navigator.of(context).pop();
})
]),
onWebViewCreated: (WebViewController w) {
webViewController = w;
},
)
);
}
}
请确保您已在https://www.google.com/recaptcha注册了验证码密钥(单击右上角的“管理员控制台”)。
然后,您已经构建了前端。要调用验证码,请运行:
Navigator.of(context).push(
MaterialPageRoute(
builder: (context){
return Captcha((String code)=>print("Code returned: "+code));
}
),
);
您可以使用任何您想要的回调函数,像这样:You can use whatever callback you want to, like this:
class GenericState extends State<Generic>{
void methodWithCaptcha(String captchaCode){
// Do something with captchaCode
}
@override
Widget build(BuildContext context) {
return Center(child:FlatButton(
child: Text("Click here!"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context){
return Captcha(methodWithCaptcha);
}
),
);
}
}
}
在服务器端,您可以按照这里的指示(我遵循了“直接下载”和“用法”部分)。我发现对于使用,我只需要使用以下代码:
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
// Verified!
} else {
$errors = $resp->getErrorCodes();
}
使用像示例中的setExpectedHostname
一样的方法是不必要的。
之后,一切都可以正常运作! 我认为这目前是在flutter中实现Google reCaptcha V2的最佳方式(适用于iOS和Android)。
InAppWebView
进行reCAPTCHA HTML渲染,因此您不再需要单独的网页。void buildCaptcha() {
const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const length = 6;
final random = Random();
final randomString = String.fromCharCodes(List.generate(
length, (index) => letters.codeUnitAt(random.nextInt(letters.length))));
print("the random string is ${randomString}");
}