Flutter人机验证插件hcaptcha的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter人机验证插件hcaptcha的使用

开始使用

首先,你需要在你的Flutter项目中安装hcaptcha插件。通过pub来安装这个包:

flutter pub add hcaptcha

然后,在你的应用初始化时,使用以下代码来初始化hCaptcha

HCaptcha.init(initialSite: 'https://YOUR-SITE.com/path-to-captcha.html');
// 或者
HCaptcha.init(siteKey: 'YOUR-SITE-KEY');

如果你使用initialSite,则需要提供一个包含以下内容的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>

使用示例

在表单提交时,添加验证码逻辑:

import 'package:flutter/material.dart';
import 'package:hcaptcha/hcaptcha.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('hCaptcha 示例'),
        ),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: '姓名'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入姓名';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () async {
              if (_formKey.currentState!.validate()) {
                Map? captchaDetails = await HCaptcha.show(context);

                // 验证成功
                if (captchaDetails != null) {
                  // 现在可以使用 captchaDetails['code']
                  print('验证码结果: ${captchaDetails['code']}');
                } else {
                  print('验证码未通过');
                }
              }
            },
            child: Text('提交表单'),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter人机验证插件hcaptcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter人机验证插件hcaptcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成hCaptcha人机验证插件可以提升应用的安全性,防止自动化脚本和机器人的滥用。虽然Flutter社区中可能没有直接官方支持的hCaptcha插件,但你可以通过调用hCaptcha的Web API来实现这一功能。下面是一个基本的实现思路,包括如何在Flutter中调用一个Web视图来加载和验证hCaptcha。

步骤概述

  1. 创建Flutter项目:如果还没有Flutter项目,先创建一个。
  2. 添加Web视图插件:使用webview_flutter插件来加载hCaptcha的Web界面。
  3. 与hCaptcha服务器交互:通过HTTP请求与hCaptcha服务器进行验证。

代码实现

1. 创建Flutter项目

flutter create captcha_demo
cd captcha_demo

2. 添加依赖

pubspec.yaml文件中添加webview_flutter依赖:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 确保使用最新版本

然后运行flutter pub get来安装依赖。

3. 实现Web视图加载hCaptcha

创建一个新的Dart文件,例如hcaptcha_screen.dart,用于显示Web视图:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HCaptchaScreen extends StatefulWidget {
  @override
  _HCaptchaScreenState createState() => _HCaptchaScreenState();
}

class _HCaptchaScreenState extends State<HCaptchaScreen> {
  late WebViewController _controller;
  final _siteKey = 'your_site_key_here';  // 替换为你的hCaptcha站点密钥
  final _secretKey = 'your_secret_key_here';  // 替换为你的hCaptcha密钥

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hCaptcha Verification'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          '''
          <!DOCTYPE html>
          <html>
            <head>
              <script src="https://hcaptcha.com/1/api.js" async defer></script>
            </head>
            <body>
              <h1>Please complete the hCaptcha challenge</h1>
              <div class="g-recaptcha" data-sitekey="$_siteKey"></div>
              <button id="submitBtn" disabled>Submit</button>
              <script>
                var verifyCallback = function(response) {
                  document.getElementById('submitBtn').disabled = false;
                  window.flutter_webview_plugin.postMessage(response);
                };
                var expiredCallback = function() {};
                var errorCallback = function(error) {};
                var onloadCallback = function() {};
                grecaptcha.ready(function() {
                  grecaptcha.render('example', {
                    'sitekey': '$_siteKey',
                    'callback': verifyCallback,
                    'expired-callback': expiredCallback,
                    'error-callback': errorCallback
                  });
                });
              </script>
            </body>
          ''',
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _controller.setNavigationDelegate(
            NavigationDelegate(
              onPageStarted: (NavigationRequest request) async {
                // 可以在这里处理页面开始加载的逻辑
              },
              onPageFinished: (NavigationResponse response) async {
                // 页面加载完成,可以监听来自Web视图的消息
                _controller.addJavaScriptChannel(
                  JavascriptChannel(
                    name: 'flutter_webview_plugin',
                    onMessageReceived: (JavascriptMessage message) {
                      // 收到hCaptcha的响应
                      _handleCaptchaResponse(message.message);
                    },
                  ),
                );
              },
              onNavigationRequest: (NavigationRequest request) {
                // 阻止导航到外部链接
                if (request.url!.startsWith('http')) {
                  return NavigationDecision.prevent;
                }
                return NavigationDecision.navigate;
              },
            ),
          );
        },
      ),
    );
  }

  void _handleCaptchaResponse(String captchaResponse) {
    // 在这里发送captchaResponse到你的服务器进行验证
    // 可以使用dio或http包来发送POST请求
    // 例如:
    // var response = await http.post(
    //   Uri.parse('https://hcaptcha.com/siteverify'),
    //   body: {
    //     'secret': _secretKey,
    //     'response': captchaResponse,
    //     'remoteip': 'user_ip_address', // 用户的IP地址,可以从请求头中获取
    //   },
    // );
    // if (response.statusCode == 200) {
    //   var data = jsonDecode(response.body);
    //   if (data['success']) {
    //     // 验证成功
    //   } else {
    //     // 验证失败
    //   }
    // } else {
    //   // 请求失败
    // }

    // 为了简化示例,这里只打印响应
    print('Captcha Response: $captchaResponse');
  }
}

注意:在实际应用中,你应该将_secretKey和验证逻辑放在你的服务器端,而不是在客户端代码中。客户端只需要将用户完成的验证码响应发送到服务器,服务器再与hCaptcha进行验证。

4. 在主应用中使用HCaptchaScreen

打开main.dart文件,并修改如下:

import 'package:flutter/material.dart';
import 'hcaptcha_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter hCaptcha Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => HCaptchaScreen()),
              );
            },
            child: Text('Verify with hCaptcha'),
          ),
        ),
      ),
    );
  }
}

总结

以上代码展示了如何在Flutter应用中使用Web视图加载hCaptcha并进行基本的响应处理。实际的生产环境中,你应该将验证逻辑放在服务器端,并且确保敏感信息(如_secretKey)不会被暴露在客户端代码中。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!