Question

我正在尝试为我的flutter应用程序实现reCaptcha功能，但是在验证码注册中，我需要提供一个我没有用于移动应用程序的域。我浏览了一些指南，教如何在移动应用程序中实现reCaptcha，但是这些指南使用程序包名称而非域注册了他们的reCaptcha。在2020年或在任何移动应用中实现reCaptcha的正确方法是什么？

Answer 1

您可以使用此插件flutter_recaptcha。

对于域，我遇到了同样的问题。我首先发现我需要使用here中的“我不是机器人”复选框，我必须检查github repository才能找到此信息，“ !!!”将此域添加到reCaptcha设置：recaptcha-flutter-plugin.firebaseapp.com，”中进行了说明。

在主页上看不到它后，我迷失了一下，但是现在这很有意义。希望它会有所帮助。

修改

我想提一下之后，发现了一些东西。该插件未提供用于验证用户服务器端的验证码响应，因此它似乎并不是很有用。但是，它是一个简单的插件，因此有可能将其用作示例。我认为，这些步骤将是使用验证码创建网页。与插件一样，使用Web视图打开页面，然后捕获表单的发布输出以及提交表单的用户的IP地址：using something like this，然后是send it to flutter，然后使用该信息提交您的请求，然后使用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>

然后将其托管在您的域中，例如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));
                    }
                  ),
                );

您可以使用所需的任何回调，例如：

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的说明进行操作（我遵循了“直接下载”和“用法”部分）。我发现对于用法，我可以简单地使用以下代码：

$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
    // Verified!
} else {
    $errors = $resp->getErrorCodes();
}

像示例中一样，不需要使用setExpectedHostname。

之后，一切正常！我认为，这是目前（在iOS和Android中）快速实施Google reCaptcha V2的最佳方法。

如何在reflapp中实现reCaptcha

1 个答案: