Flutter验证码插件aj_captcha_flutter的使用

Flutter验证码插件aj_captcha_flutter的使用

aj_captcha_flutter 是一个用于实现滑动验证码与文字点击验证码的Flutter组件。后端采用的是Anji+验证码。

使用步骤

1. 初始化插件

在项目启动时设置接口地址：

// 项目启动时设置接口地址
AJCaptchaInit.init("http://127.0.0.1:80/");

2. 调用实例

调用滑动验证组件：

void loadingBlockPuzzle(BuildContext buildContext,
    {barrierDismissible = true}) {
  showDialog<void>(
    context: buildContext,
    barrierDismissible: barrierDismissible,
    builder: (BuildContext buildContext) {
      return BlockPuzzleCaptchaPage(
        onSuccess: (v) {
          // 成功回调（回调为加密后内容，依据项目而定）
          debugPrint(v.toString());
        },
        onFail: () {},
      );
    },
  );
}

类说明

• BlockPuzzleCaptchaPage：滑动验证组件。
• ClickWordCaptcha：文字点击验证组件。

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用aj_captcha_flutter插件。

import 'dart:async';

import 'package:aj_captcha_flutter/aj_captcha_flutter.dart';
import 'package:aj_captcha_flutter/captcha/aj_captcha_init.dart';
import 'package:aj_captcha_flutter/captcha/view/block_puzzle_captcha.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  // 设置接口地址
  AJCaptchaInit.init("http://127.0.0.1:80/");
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _ajCaptchaFlutterPlugin = AjCaptchaFlutter();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息异步处理，初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    // 处理可能发生的PlatformException异常
    try {
      platformVersion = await _ajCaptchaFlutterPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果widget被移除，不再更新UI
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  // 调用滑动验证组件
  void loadingBlockPuzzle(BuildContext buildContext,
      {barrierDismissible = true}) {
    showDialog<void>(
      context: buildContext,
      barrierDismissible: barrierDismissible,
      builder: (BuildContext buildContext) {
        return BlockPuzzleCaptchaPage(
          onSuccess: (v) {
            // 成功回调（回调为加密后内容，依据项目而定）
            debugPrint(v.toString());
          },
          onFail: () {},
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('验证码插件示例'),
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: Column(
                children: [
                  Text('运行环境: $_platformVersion\n'),
                  TextButton(
                    onPressed: () {
                      loadingBlockPuzzle(context);
                    },
                    child: Text("点击开始验证"),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}