Flutter验证码插件captcha_plugin_flutter的使用

Flutter验证码插件captcha_plugin_flutter的使用

全新人机验证方式，高效拦截机器行为，业务安全第一道防线。搭载风险感知引擎，智能切换验证难度，安全性高，极致用户体验。读屏软件深度适配，视障群体也可轻松使用，符合工信部无障碍适配要求。

平台支持（兼容性）

环境准备

CocoaPods安装教程

资源引入/集成

在 pubspec.yaml 中添加：

dependencies:
    captcha_plugin_flutter: ^1.1.5

调用示例

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

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

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

class _MyAppState extends State<MyApp> {
  final CaptchaPluginFlutter captchaPlugin = new CaptchaPluginFlutter();

  @override
  void initState() {
    super.initState();
  }

  /**
   * 初始化验证码
   */
  void init() {
    CaptchaPluginConfig styleConfig = CaptchaPluginConfig(
        radius: 10,
        capBarTextColor: "#25D4D0",
        capBarTextSize: 18,
        capBarTextWeight: "bold",
        borderColor: "#25D4D0",
        borderRadius: 10,
        backgroundMoving: "#DC143C",
        executeBorderRadius: 10,
        executeBackground: "#DC143C",
        capBarTextAlign: "center",
        capPaddingTop: 10,
        capPaddingRight: 10,
        capPaddingBottom: 10,
        capPaddingLeft: 10,
        paddingTop: 15,
        paddingBottom: 15
    );

    captchaPlugin.init({
      "captcha_id": "易盾业务id",
      "is_debug": true,
      "dimAmount": 0.8,
      "is_touch_outside_disappear": true,
      "timeout": 8000,
      "is_hide_close_button": false,
      "use_default_fallback": true,
      "failed_max_retry_count": 4,
      "language_type": "ja",
      "is_close_button_bottom": true,
      "styleConfig": styleConfig.toJson(),
    });
  }

  /**
   * 弹出验证码
   */
  void showCaptcha() {
    captchaPlugin.showCaptcha(
        onLoaded: () {
          print("================onLoaded==============");
        },
        onSuccess: (dynamic data) {
          print(data);
        },
        onClose: (dynamic data) {
          print(data);
        },
        onError: (dynamic data) {
          print(data);
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
            child: new Column(
              children: [
                TextButton(
                    onPressed: () => {
                      init()
                    },
                    child: Text("初始化")),
                TextButton(
                    onPressed: () => {
                      showCaptcha()
                    },
                    child: Text("显示验证码")),
              ],
            )),
      ),
    );
  }
}

SDK 方法说明

1. 初始化

代码说明：

CaptchaPluginFlutter captchaPlugin = new CaptchaPluginFlutter();
captchaPlugin.init(options)

options 支持的可配置项说明

language_type 多语言对应表

styleConfig 验证码UI自定义配置对应表

2. 显示验证码

代码说明：

captchaPlugin.showCaptcha(
    onLoaded: () {
       
    },
    onSuccess: (dynamic data) {
       
    },
    onClose: (dynamic data) {
        
    },
    onError: (dynamic data) {
        
    }
);

回调说明：

回调数据为 Map 类型

3. 销毁验证码弹窗

代码说明：

captchaPlugin.destroy()