Flutter验证码插件captcha_flutter的使用

Flutter验证码插件captcha_flutter的使用

图形验证码

原理：通过OverlayEntry添加WebView，加载图形验证码，通过JS进行交互回调。

现有功能：

• 支持Android和iOS两个平台，如果WebView支持多平台，那么此插件也可以支持；
• 功能与腾讯官方实现相同：支持多语言、是否显示帮助图标、设置背景颜色、验证码框的缩放值、支持深色模式；
• 是否显示遮罩。

待办事项：

• 实现点击空白区域关闭图形验证码；
• 替换OverlayEntry以优化加载方式；
• 实现自定义加载中和背景遮罩效果。

示例代码

以下是完整的使用示例代码：

import 'package:captcha_flutter/captcha_flutter.dart'; // 导入captcha_flutter插件
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色
      ),
      home: const MyHomePage(title: '腾讯图形验证码demo'), // 主页
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  String ticketStr = ""; // 用于存储返回的ticket和randStr
  String captchaID = "从腾讯图形验证码获取的ID"; // 填写从腾讯获取的验证码ID

  void _incrementCounter() {
    // 显示验证码弹窗
    Captcha.showCaptchaWebView(
      context, // 上下文
      (ticket, randStr) { // 成功回调
        setState(() {
          if (ticket.isEmpty) {
            ticketStr = "用户手动关闭"; // 如果ticket为空，表示用户关闭了弹窗
          } else {
            ticketStr = "ticket：$ticket,randStr：$randStr"; // 存储ticket和randStr
          }
        });
      },
      error: (errorStr) { // 错误回调
        setState(() {
          ticketStr = "出现失败"; // 处理错误
        });
      },
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化验证码，传入captchaID并禁用深色模式
    Captcha.initCaptcha(captchaID, enableDarkMode: "false");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '显示获取成功的ticket和randStr', // 提示信息
            ),
            Text(
              ticketStr, // 显示返回的结果
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 点击按钮触发验证码
        child: const Text("验证码"), // 按钮文本
      ),
    );
  }
}