如何将 reCaptcha 实现到 flutter 应用程序中
How to implement reCaptcha into a flutter app
我正在尝试为我的 flutter 应用程序实现 reCaptcha 功能，但在验证码注册中我需要提供一个域，而我没有用于移动应用程序的域。我浏览了一些指导如何将 reCaptcha 实施到移动应用程序中的指南，但这些指南使用包名而不是域名注册了他们的 reCaptcha。在 Flutter 应用程序或 2020 年的任何移动应用程序中实现 reCaptcha 的正确方法是什么？
你可以使用这个插件，flutter_recaptcha。
对于域，我遇到了同样的问题。我首先发现我需要使用 here and I had to check the github repository 中的 "I'm not a robot" 复选框选项来查找此信息，“!!! 请记住将此域添加到 reCaptcha 设置中：recaptcha-flutter- plugin.firebaseapp.com,”这解释了它。
在主页上没有看到它之后我有点迷茫，但现在它是有道理的。希望对您有所帮助。
编辑
我在尝试后注意到了一些事情，我想提一下。该插件不提供用于验证用户服务器端的验证码响应，因此它看起来并不是很有用。但是，它是一个简单的插件，因此可以将其用作示例。我认为，这些步骤将是创建一个带有验证码的网页。与插件一样，使用webview打开页面，然后捕获表单的post输出和用户提交表单的ip地址，using something like this, then send it to flutter and then submit your request with that information, and use the Google library验证验证码。
说明
我刚刚实现了这个，我发现了一个行之有效的好方法。
首先，创建一个 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>
然后，将其托管在您的域中，例如。com/captcha。
然后，创建一个flutter Widget，像这样：
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 注册了验证码（点击右上角的 "Admin Console"）。
那么，你已经构建了前端。要调用验证码，只需 运行:
Navigator.of(context).push(
MaterialPageRoute(
builder: (context){
return Captcha((String code)=>print("Code returned: "+code));
}
),
);
您可以使用任何您想要的回调，如下所示：
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);
}
),
);
}
}
}
服务器端，您可以按照说明here（我按照"Direct Download"和"Usage"部分进行操作）。我发现对于用法，我可以简单地使用代码：
$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）。
如果你正在寻找Flutter WEB，你可以尝试g_recaptcha_v3 package
注意：
- 它仅支持 reCAPTCHA V3，不支持 V2
- 仅适用于 Flutter Web，其他平台不支持
我改进了@JVE999 方法并创建了一个新包：
flutter_firebase_recaptcha
该软件包使用 InAppWebView 进行 recapcha HTML 渲染，因此您不再需要单独的网页。
我的小部件支持 'visible' 和 'invisible' recapcha。不可见的 recapcha 允许您在不向用户显示任何内容的情况下尝试获取 recapcha 令牌。
我正在尝试为我的 flutter 应用程序实现 reCaptcha 功能，但在验证码注册中我需要提供一个域，而我没有用于移动应用程序的域。我浏览了一些指导如何将 reCaptcha 实施到移动应用程序中的指南，但这些指南使用包名而不是域名注册了他们的 reCaptcha。在 Flutter 应用程序或 2020 年的任何移动应用程序中实现 reCaptcha 的正确方法是什么？
你可以使用这个插件，flutter_recaptcha。
对于域，我遇到了同样的问题。我首先发现我需要使用 here and I had to check the github repository 中的 "I'm not a robot" 复选框选项来查找此信息，“!!! 请记住将此域添加到 reCaptcha 设置中：recaptcha-flutter- plugin.firebaseapp.com,”这解释了它。
在主页上没有看到它之后我有点迷茫，但现在它是有道理的。希望对您有所帮助。
编辑
我在尝试后注意到了一些事情，我想提一下。该插件不提供用于验证用户服务器端的验证码响应，因此它看起来并不是很有用。但是，它是一个简单的插件，因此可以将其用作示例。我认为，这些步骤将是创建一个带有验证码的网页。与插件一样，使用webview打开页面，然后捕获表单的post输出和用户提交表单的ip地址，using something like this, then send it to flutter and then submit your request with that information, and use the Google library验证验证码。
说明
我刚刚实现了这个，我发现了一个行之有效的好方法。 首先，创建一个 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>
然后，将其托管在您的域中，例如。com/captcha。
然后，创建一个flutter Widget，像这样：
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 注册了验证码（点击右上角的 "Admin Console"）。
那么，你已经构建了前端。要调用验证码，只需 运行:
Navigator.of(context).push(
MaterialPageRoute(
builder: (context){
return Captcha((String code)=>print("Code returned: "+code));
}
),
);
您可以使用任何您想要的回调，如下所示：
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);
}
),
);
}
}
}
服务器端，您可以按照说明here（我按照"Direct Download"和"Usage"部分进行操作）。我发现对于用法，我可以简单地使用代码：
$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）。
如果你正在寻找Flutter WEB，你可以尝试g_recaptcha_v3 package
注意：
- 它仅支持 reCAPTCHA V3，不支持 V2
- 仅适用于 Flutter Web，其他平台不支持
我改进了@JVE999 方法并创建了一个新包： flutter_firebase_recaptcha
该软件包使用 InAppWebView 进行 recapcha HTML 渲染，因此您不再需要单独的网页。
我的小部件支持 'visible' 和 'invisible' recapcha。不可见的 recapcha 允许您在不向用户显示任何内容的情况下尝试获取 recapcha 令牌。