Flutter验证码插件gt3_captcha的使用

gt3_captcha 是一个用于 Flutter 应用的验证码插件，适用于极验（Geetest）的验证码服务。以下是如何在 Flutter 中使用 gt3_captcha 插件的详细说明。

示例

完整示例代码

import 'dart:convert';
import 'dart:io';

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

import 'package:gt3_captcha/gt3_captcha.dart';

late final Dio _dio = Dio()
  ..options.connectTimeout = 15000
  ..options.sendTimeout = 15000
  ..options.receiveTimeout = 15000;

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

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

class _MyAppState extends State<MyApp> {
  final Completer<Gt3CaptchaViewController> _controller = Completer<Gt3CaptchaViewController>();

  bool isShowCaptch = false;
  String? va;

  [@override](/user/override)
  void initState() {
    super.initState();
    if (Platform.isAndroid)
      Gt3CaptchaView.platform = SurfaceAndroidGt3CaptchaView();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: [
          Scaffold(
            appBar: AppBar(
              title: const Text('Plugin example app'),
            ),
            body: Column(
              children: [
                Text(va ?? ""),
                TextButton(
                    onPressed: () {
                      setState(() {
                        isShowCaptch = true;
                      });
                    },
                    child: Text("点击获取验证码")),
              ],
            ),
          ),
          Visibility(
            visible: isShowCaptch,
            child: Gt3CaptchaView(
              onRegister: () async {
                return await _onRegister();
              },
              onValidation: (params) async {
                String? result = await _onValidation(params);
                setState(() {
                  va = result;
                  isShowCaptch = false;
                });
                return (result != null) ? true : false;
              },
              onGt3CaptchaViewCreated: (controller) {
                controller.start();
              },
              onGtViewShow: () async {
                print('onGtViewShow');
              },
              onCancel: () async {
                print('onCancel');
                setState(() {
                  isShowCaptch = false;
                });
              },
              onError: () async {
                print('onError');
                setState(() {
                  isShowCaptch = false;
                });
              },
            ),
          ),
        ],
      ),
    );
  }

  Future<String?> _onRegister() async {
    final url = "https://********/register";
    var res = await _dio.post(url);
    var data = res.data;
    print(data);
    if (data != null) {
      int? code = data['code'] as int?;
      var result = data['data'];
      if (code == 0 && result != null) {
        return JsonEncoder().convert(result);
      }
    }
    return null;
  }

  Future<String?> _onValidation(String params) async {
    final url = "https://********/validate";
    var mParams = JsonDecoder().convert(params);
    var res = await _dio.post(url, data: mParams);
    var data = res.data;
    print(data);
    if (data != null) {
      int? code = data['code'] as int?;
      Map? result = data['data'] as Map<String, dynamic>? ;
      if (code == 0 && result != null) {
        String key = result["validate"] as String? ?? "";
        String captcha = result["challenge"] as String? ?? "";
        if (key.isNotEmpty && captcha.isNotEmpty) {
          return "key:$key captcha:$captcha";
        }
      }
    }
    return null;
  }
}

代码解释

导入必要的库:

import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:gt3_captcha/gt3_captcha.dart';

初始化Dio对象:

late final Dio _dio = Dio()
  ..options.connectTimeout = 15000
  ..options.sendTimeout = 15000
  ..options.receiveTimeout = 15000;

创建主应用类:
```
void main() {
  runApp(MyApp());
}
```

定义状态管理类:

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

class _MyAppState extends State<MyApp> {
  final Completer<Gt3CaptchaViewController> _controller = Completer<Gt3CaptchaViewController>();
  bool isShowCaptch = false;
  String? va;

初始化方法:

[@override](/user/override)
void initState() {
  super.initState();
  if (Platform.isAndroid)
    Gt3CaptchaView.platform = SurfaceAndroidGt3CaptchaView();
}

构建UI:

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    home: Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: Column(
            children: [
              Text(va ?? ""),
              TextButton(
                  onPressed: () {
                    setState(() {
                      isShowCaptch = true;
                    });
                  },
                  child: Text("点击获取验证码")),
            ],
          ),
        ),
        Visibility(
          visible: isShowCaptch,
          child: Gt3CaptchaView(
            onRegister: () async {
              return await _onRegister();
            },
            onValidation: (params) async {
              String? result = await _onValidation(params);
              setState(() {
                va = result;
                isShowCaptch = false;
              });
              return (result != null) ? true : false;
            },
            onGt3CaptchaViewCreated: (controller) {
              controller.start();
            },
            onGtViewShow: () async {
              print('onGtViewShow');
            },
            onCancel: () async {
              print('onCancel');
              setState(() {
                isShowCaptch = false;
              });
            },
            onError: () async {
              print('onError');
              setState(() {
                isShowCaptch = false;
              });
            },
          ),
        ),
      ],
    ),
  );
}

注册请求处理:

Future<String?> _onRegister() async {
  final url = "https://********/register";
  var res = await _dio.post(url);
  var data = res.data;
  print(data);
  if (data != null) {
    int? code = data['code'] as int?;
    var result = data['data'];
    if (code == 0 && result != null) {
      return JsonEncoder().convert(result);
    }
  }
  return null;
}

验证请求处理:

Future<String?> _onValidation(String params) async {
  final url = "https://********/validate";
  var mParams = JsonDecoder().convert(params);
  var res = await _dio.post(url, data: mParams);
  var data = res.data;
  print(data);
  if (data != null) {
    int? code = data['code'] as int?;
    Map? result = data['data'] as Map<String, dynamic>? ;
    if (code == 0 && result != null) {
      String key = result["validate"] as String? ?? "";
      String captcha = result["challenge"] as String? ?? "";
      if (key.isNotEmpty && captcha.isNotEmpty) {
        return "key:$key captcha:$captcha";
      }
    }
  }
  return null;
}

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

phonegap100 1楼

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

当然，以下是如何在Flutter项目中使用gt3_captcha插件的一个详细代码示例。gt3_captcha插件通常用于集成第三方验证码服务（如极验验证码），以增强应用的安全性。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加gt3_captcha依赖：

dependencies:
  flutter:
    sdk: flutter
  gt3_captcha: ^最新版本号  # 请替换为实际最新版本号

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

步骤 2: 配置Android和iOS

根据gt3_captcha插件的文档，你可能需要在Android和iOS项目中进行一些配置，比如添加API密钥等。这些步骤通常涉及编辑AndroidManifest.xml和Info.plist文件，以及可能的原生代码调整。由于具体配置可能随插件版本和服务提供商的要求而变化，这里不详细展开，请参考插件的官方文档。

步骤 3: 使用插件

以下是一个简单的Flutter代码示例，展示如何在你的应用中初始化并使用gt3_captcha插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CaptchaScreen(),
    );
  }
}

class CaptchaScreen extends StatefulWidget {
  @override
  _CaptchaScreenState createState() => _CaptchaScreenState();
}

class _CaptchaScreenState extends State<CaptchaScreen> {
  Gt3Captcha? _captcha;
  String? _captchaResult;

  @override
  void initState() {
    super.initState();
    // 初始化Gt3Captcha实例，这里需要传入你的配置信息，比如API密钥等
    _captcha = Gt3Captcha(
      appId: 'your_app_id', // 替换为你的实际APP ID
      privateKey: 'your_private_key', // 替换为你的实际私钥
      channel: 'your_channel', // 替换为你的实际渠道
      isDebug: true, // 是否开启调试模式，生产环境应设置为false
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gt3Captcha Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                if (_captcha != null) {
                  try {
                    // 触发验证码验证流程
                    var result = await _captcha!.startCaptcha(
                      context,
                      onResult: (String result) {
                        setState(() {
                          _captchaResult = result;
                        });
                        // 在这里处理验证码结果，比如发送到服务器验证
                        print('Captcha result: $_captchaResult');
                      },
                      onError: (String error) {
                        // 处理错误
                        print('Captcha error: $error');
                      },
                    );
                  } catch (e) {
                    print('Error: $e');
                  }
                }
              },
              child: Text('Start Captcha'),
            ),
            if (_captchaResult != null)
              Text(
                'Captcha Result: $_captchaResult',
                style: TextStyle(fontSize: 18),
              ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _captcha?.dispose();
    super.dispose();
  }
}

注意事项

配置信息：请确保你已经正确配置了appId、privateKey等必要信息。
错误处理：在实际应用中，应添加更详细的错误处理和用户提示。
安全性：不要在客户端代码中硬编码敏感信息，如私钥等。考虑使用环境变量或安全的密钥管理服务。
UI定制：根据需求，你可能需要自定义验证码界面的UI。

这个示例展示了如何在Flutter应用中集成和使用gt3_captcha插件的基本流程。根据具体需求，你可能需要进一步调整和优化代码。