hCaptcha Flutter

在其中一个我参与的项目中，我发现 Flutter 中没有“足够健壮”的验证码实现。

在遵循 [https://medium.com/@hCaptcha/implementing-hcaptcha-in-your-flutter-app-13ea6ddca71b](this 官方指南]
和 https://www.hcaptcha.com/ 后，我决定创建一个“一体化”解决方案，负责
处理状态和与使用 HCaptcha 配合您的 Flutter 项目所需的组件。

这个仓库是 Hacktoberfest 2021 挑战的一部分！如果它看起来有点空，那是因为它是故意留空的。
查看 issues 标签，了解需要完成的工作，并获得免费的 T 恤！

功能

  • 使用 Flutter BLOC 来管理状态。
  • 提供了一个类，用于在解决验证码时添加您的任何数据（例如表单数据）。

验证码 HTML 页面创建

为了使此包正常工作，我们假设您正在开发的应用程序是基于客户端-服务器的，这意味着
有一个后端来支持它。

在您处理包的安装和实现之前，您需要在服务器上添加一个简单的 HTML
页面（不要忘记添加您的密钥！！！）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Captcha Challenge</title>
    </head>

    <body>
        <div style="display: flex; justify-content: center;">
            <form method="POST">
                <div class="h-captcha" data-sitekey="YOUR_SECRET_GOES_HERE" data-callback="captchaCallback"></div>
                <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
            </form>
        </div>

        <script>
            function captchaCallback(response) {
                if (typeof Captcha!=="undefined") {
                    Captcha.postMessage(response);
                }
            }
        </script>
    </body>
</html>

此页面负责将您的验证码提供给您的移动设备。<script> 内部的 Captcha
就是发生魔术的地方。这是一个 JavaScript Channel
它的工作是通过集成的 WebView 将数据传回 Flutter 应用程序
（我们将在下一步中设置）。

在这种情况下，我们假设指向此页面的 URL 是 myapp.kgiannakis.me/captcha-challenge。

安装

注意： 目前，在项目的大部分脚手架工作完成之前，包括文档等方面，该项目将仅在此处发布，而不会在 pub.dev 上发布。

  1. 将此插件克隆到您选择的目录。

  2. 将其包含在您的 pubspec 文件中

dependencies:
  ...
  hcaptcha_flutter:
    path: ../hcaptcha_flutter
  1. 创建一个 HCaptchaProvider

HCaptchaProvider(
  captchaUrl: "https://myapp.kgiannakis.me/captcha-challenge",
  onPreCaptcha: const SomeForm(),
  onCaptcha: const CaptchaScreen(),
  onCaptchaCompleted: (result, cbloc, data) {
    // This is the part where you pass the result to the server for verification
    final username = data.getData(key: "username");
    log(result);
    log(username);
  })

这提供了验证码过程的脚手架工作。它将 CaptchaBloc 注入到组件
树中，以及一个 CaptchaDataContainer。将数据容器视为一种在处理验证码挑战时临时存储
内容的方法。

  1. 在您的表单中，在提交时添加验证码逻辑

if (_formKey.currentState!.validate()) {
  // Add the username to the data container.
  var dataContainer = CaptchaUtils.getDataContainer(context);
  dataContainer.addData(
      key: "username", dataIn: _usernameController.value.text);

  // This advances the user to the second step (the challenge)
  CaptchaUtils.goToCaptcha(context);
}
  1. 最后，添加 HCaptcha 组件本身

class CaptchaScreen extends StatelessWidget {
  const CaptchaScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(minHeight: 450),
      child: HCaptcha(),
    );
  }
}
  1. 当用户完成挑战后，步骤 3 中的回调 (onCaptchaCompleted)
    将被调用。然后，您可以将结果传递给您的后端进行 验证。

GitHub

https://github.com/kerk12/hcaptcha_flutter