Flutter验证码验证插件hcaptcha_flutter的使用

Flutter验证码验证插件hcaptcha_flutter的使用

HCaptcha for Flutter

Pub Version

Getting Started

在使用 hcaptcha_flutter 插件之前,首先需要设置一个方法调用处理器来接收验证结果。

HCaptchaFlutter.setMethodCallHandler((MethodCall call) async {
  if (kDebugMode) {
    print('method: ${call.method}, arguments: ${call.arguments}');
  }

  // 检查是否为成功回调,并获取 token
  if (call.method == 'success' && call.arguments != null) {
    final res = call.arguments as Map<dynamic, dynamic>;
    final token = res['token'] as String?;
  }
});

然后通过以下代码展示验证码界面:

await HCaptchaFlutter.show({
  'siteKey': 'your site key', // 替换为您的 HCaptcha 站点密钥
  'language': 'en', // 设置语言
});

完整示例 Demo

以下是一个完整的示例代码,展示了如何使用 hcaptcha_flutter 插件进行验证码验证。

示例代码

import 'dart:developer';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:hcaptcha_flutter/hcaptcha_flutter.dart'; // 导入 hcaptcha_flutter 插件

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatefulWidget {
  const MyApp({super.key}); // 构造函数

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 创建状态类
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 配置 Material UI 主题
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HCaptcha Plugin'), // 设置标题
        ),
        body: Center(
          child: TextButton( // 添加按钮
            onPressed: () async {
              // 设置方法调用处理器
              HCaptchaFlutter.setMethodCallHandler((MethodCall call) async {
                if (kDebugMode) {
                  print('method: ${call.method}, arguments: ${call.arguments}');
                }

                // 检查是否为成功回调,并获取 token
                if (call.method == 'success' && call.arguments != null) {
                  final res = call.arguments as Map<dynamic, dynamic>;
                  final token = res['token'] as String?;
                  log('token: $token'); // 打印 token
                }
              });

              // 显示 HCaptcha 验证码界面
              await HCaptchaFlutter.show({
                'siteKey': 'a5f74b19-9e45-40e0-b45d-47ff91b7a6c2', // 替换为您的 HCaptcha 站点密钥
                'language': 'en', // 设置语言
              });
            },
            child: const Text('Show Captcha'), // 按钮文本
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


hcaptcha_flutter 是一个用于在 Flutter 应用中集成 hCaptcha 验证的插件。hCaptcha 是一种人机验证系统,类似于 Google 的 reCAPTCHA,用于防止自动化脚本和机器人滥用。

安装 hcaptcha_flutter 插件

首先,你需要在 pubspec.yaml 文件中添加 hcaptcha_flutter 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  hcaptcha_flutter: ^1.0.0  # 请检查最新版本

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

使用 hcaptcha_flutter 插件

  1. 初始化 hCaptcha

    在你的 Flutter 应用中,首先需要初始化 hCaptcha。你可以在 main.dart 或任何其他合适的地方进行初始化。

    import 'package:hcaptcha_flutter/hcaptcha_flutter.dart';
    
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await HCaptchaFlutter.initialize(
        siteKey: 'your-site-key',  // 替换为你的 hCaptcha site key
      );
      runApp(MyApp());
    }
    
  2. 显示 hCaptcha 验证

    在你的应用中,你可以通过调用 HCaptchaFlutter.show() 来显示 hCaptcha 验证。通常,你会在用户点击某个按钮时触发这个操作。

    import 'package:flutter/material.dart';
    import 'package:hcaptcha_flutter/hcaptcha_flutter.dart';
    
    class MyApp extends StatelessWidget {
      [@override](/user/override)
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('hCaptcha Flutter Example'),
            ),
            body: Center(
              child: ElevatedButton(
                onPressed: () async {
                  try {
                    final token = await HCaptchaFlutter.show();
                    print('hCaptcha token: $token');
                    // 你可以将 token 发送到服务器进行验证
                  } catch (e) {
                    print('hCaptcha error: $e');
                  }
                },
                child: Text('Verify with hCaptcha'),
              ),
            ),
          ),
        );
      }
    }
    
  3. 处理验证结果

    当用户完成 hCaptcha 验证后,HCaptchaFlutter.show() 会返回一个 token。你需要将这个 token 发送到你的服务器,服务器再通过 hCaptcha 的 API 进行验证。

    final token = await HCaptchaFlutter.show();
    // 发送 token 到服务器
    
  4. 服务器端验证

    在服务器端,你需要使用 hCaptcha 的 API 来验证 token 的有效性。通常,你会向 https://hcaptcha.com/siteverify 发送一个 POST 请求,包含 secretresponse(即 token)参数。

    curl -X POST https://hcaptcha.com/siteverify \
    -d "secret=your-secret-key" \
    -d "response=user-response-token"
    

    服务器会返回一个 JSON 响应,指示验证是否成功。

    {
      "success": true,
      "challenge_ts": "2023-10-01T12:34:56Z",
      "hostname": "example.com"
    }
    

注意事项

  • Site Key 和 Secret Key: 你需要从 hCaptcha 获取 siteKeysecretKeysiteKey 用于客户端,secretKey 用于服务器端验证。
  • 网络请求: 确保你的应用有网络权限,并且能够访问 hCaptcha 的 API。
  • 错误处理: 在调用 HCaptchaFlutter.show() 时,务必处理可能出现的异常,例如用户取消验证或网络错误。

示例代码

以下是一个完整的示例代码:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await HCaptchaFlutter.initialize(
    siteKey: 'your-site-key',  // 替换为你的 hCaptcha site key
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('hCaptcha Flutter Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                final token = await HCaptchaFlutter.show();
                print('hCaptcha token: $token');
                // 你可以将 token 发送到服务器进行验证
              } catch (e) {
                print('hCaptcha error: $e');
              }
            },
            child: Text('Verify with hCaptcha'),
          ),
        ),
      ),
    );
  }
}
回到顶部