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

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

本项目是一个新的Flutter插件项目。它是一个专门的包，包括针对Android和/或iOS平台的特定实现代码。

对于如何开始使用Flutter，您可以查看我们的在线文档，其中提供了教程、示例、移动开发指南以及完整的API参考。

示例代码

以下是一个简单的示例，展示了如何在Flutter应用中使用geetest_captcha_flutter插件。

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

import 'package:flutter/services.dart';
import 'package:geetest_captcha_flutter/geetest_captcha_flutter.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = '未知';
  String api1 = "https://www.geetest.com/demo/gt/validate-slide";

  @override
  void initState() {
    GeetestCaptchaFlutter.initCallHandler();
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      // 获取平台版本
      platformVersion = await GeetestCaptchaFlutter.platformVersion ?? '未知平台版本';
    } on PlatformException {
      // 如果获取失败，则返回错误信息
      platformVersion = '获取平台版本失败。';
    }
    if (!mounted) return;

    // 更新UI状态
    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: TextButton(
            child: Text('运行在: $_platformVersion\n'),
            onPressed: () {
              // 初始化Geetest验证码插件
              GeetestCaptchaFlutter.initGeetest(
                api1: api1,
                authToken: "Token", // 你的认证令牌
                onRequest: (String result) async {
                  // 在请求验证码时调用的回调函数
                  return true;
                },
                onClose: () {
                  // 关闭验证码时调用的回调函数
                  print("关闭");
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

使用说明

  1. 导入依赖： 首先，在项目的pubspec.yaml文件中添加geetest_captcha_flutter依赖项。
    dependencies:
  geetest_captcha_flutter: ^1.0.0

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

1 回复

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


geetest_captcha_flutter 是一个用于在 Flutter 应用中集成极验验证码的插件。极验验证码（Geetest Captcha）是一种常见的人机验证解决方案，可以帮助应用防止恶意机器人攻击。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 geetest_captcha_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  geetest_captcha_flutter: ^1.0.0  # 请根据最新版本号进行替换

然后运行 flutter pub get 来获取依赖。

2. 配置极验验证码

在使用插件之前，你需要先在 极验官网 注册并获取 captchaId 和 apiServer。

3. 初始化插件

在 Flutter 应用中初始化 geetest_captcha_flutter 插件：

import 'package:geetest_captcha_flutter/geetest_captcha_flutter.dart';

class CaptchaPage extends StatefulWidget {
  @override
  _CaptchaPageState createState() => _CaptchaPageState();
}

class _CaptchaPageState extends State<CaptchaPage> {
  @override
  void initState() {
    super.initState();
    _initGeetest();
  }

  void _initGeetest() async {
    GeetestCaptchaFlutter.init(
      captchaId: 'your_captchaId', // 替换为你的captchaId
      apiServer: 'https://your-api-server.com', // 替换为你的apiServer
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geetest Captcha'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showCaptcha,
          child: Text('Show Captcha'),
        ),
      ),
    );
  }

  void _showCaptcha() async {
    try {
      final result = await GeetestCaptchaFlutter.showCaptcha();
      if (result['success']) {
        // 验证成功
        print('Captcha success: ${result['validate']}');
      } else {
        // 验证失败
        print('Captcha failed: ${result['msg']}');
      }
    } catch (e) {
      // 处理异常
      print('Captcha error: $e');
    }
  }
}

4. 处理验证结果

GeetestCaptchaFlutter.showCaptcha() 方法返回一个 Future<Map<String, dynamic>>，其中包含验证结果。你可以根据 success 字段来判断验证是否成功。如果成功，validate 字段包含了验证成功后的信息，你可以将其发送到后端进行进一步验证。

5. 集成后端验证

在前端验证成功后，你需要将 validate 和 seccode 发送到后端进行二次验证。后端可以通过极验提供的 API 来验证 validate 和 seccode 是否有效。

6. 处理异常

在使用过程中，可能会遇到网络问题或其他异常情况，建议在 try-catch 块中捕获异常并进行适当的处理。

7. 自定义 UI

geetest_captcha_flutter 插件允许你自定义验证码的显示方式。你可以在 GeetestCaptchaFlutter.showCaptcha() 方法中传入 customUI 参数来自定义 UI。

void _showCaptcha() async {
  try {
    final result = await GeetestCaptchaFlutter.showCaptcha(
      customUI: {
        'background_color': '#FFFFFF',
        'btn_color': '#00FF00',
        // 其他自定义参数
      },
    );
    if (result) {
      // 验证成功
    } else {
      // 验证失败
    }
  } catch (e) {
    // 处理异常
  }
}
回到顶部