如何将 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 令牌。