logo标签列表

如何在Flutter应用中实现reCaptcha

flutterrecaptcha
9

我正在尝试将 reCaptcha 功能添加到我的 Flutter 应用程序中，但在验证码注册过程中需要提供一个域名，而我没有适用于移动应用的域名。我已经查阅了几篇指南，教授如何将 reCaptcha 添加到移动应用中，然而这些指南使用包名称注册 reCaptcha 而非域名。在 2020 年，实现 flutter 应用程序或任何移动应用程序中的 reCaptcha 的正确方法是什么？

6个回答
14

您可以使用这个插件，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）。

抱歉提起一个旧的线程，但是否可能将此网页嵌入应用程序中，这意味着验证码页面不需要托管？ - Stillie
2
如果你正在寻找Flutter WEB相关的内容，可以尝试使用 g_recaptcha_v3 包。
注意：
  • 该包仅支持reCAPTCHA V3而不是V2版本。
  • 该包仅适用于Flutter Web平台，不支持其他平台。
1
我改进了@JVE999的方法并创建了一个新的包：flutter_firebase_recaptcha。
该包使用InAppWebView进行reCAPTCHA HTML渲染，因此您不再需要单独的网页。
我的小部件支持“可见”和“不可见”的reCAPTCHA。 不可见的reCAPTCHA允许您尝试获取reCAPTCHA令牌，而无需向用户显示任何内容。
0

您可以使用flutter_gcapthca_v3。它与当前的Google reCAPTCHA v3兼容，并支持Android / IOS平台。

0
0
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}");
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接