Flutter插件botion_flutter_plugin的安装与使用方法

Flutter插件botion_flutter_plugin的安装与使用方法

概述

botion_flutter_plugin 是一个官方提供的 Flutter 插件项目，用于支持 Botion 自适应验证码（Adaptive CAPTCHA）。该插件兼容 Flutter 2.0。

安装

使用 GitHub 集成

在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  botion_flutter_plugin:
    git:
      url: https://github.com/BotionTeam/botion_flutter_plugin.git
      ref: main

使用 Pub 集成

也可以通过 Pub 包管理器安装：

dependencies:
  botion_flutter_plugin: ^0.0.2

完成后，运行 flutter pub get 更新依赖。

配置

在使用插件之前，需要在 Botion 仪表盘 创建您的 ID 和密钥，并部署相应的后端 API。详细步骤可参考 Botion 文档。

示例代码

以下是一个完整的示例，展示如何初始化、验证和处理事件。

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:botion_flutter_plugin/boc_flutter_plugin.dart';
import 'package:botion_flutter_plugin/boc_session_configuration.dart';
import 'package:http/http.dart' as http;

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  /// 监听页面配置变化
  static const MethodChannel _demoChannel = MethodChannel('boc_flutter_demo');

  /// 初始化前，请将 `captchaId` 替换为您从账户后台注册的验证码 ID。
  late final BocFlutterPlugin captcha;

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

  // 异步初始化平台状态
  Future<void> initPlatformState() async {
    BOCSessionConfiguration config = BOCSessionConfiguration();
    config.logEnable = false;
    captcha = BocFlutterPlugin("123456789012345678901234567890ab", config);

    String platformVersion;
    try {
      platformVersion = await BocFlutterPlugin.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    try {
      _demoChannel.setMethodCallHandler(_configurationChanged);

      captcha.addEventHandler(
        onShow: (Map<String, dynamic> message) async {
          // 验证码视图已显示
          debugPrint("Captcha did show");
        },
        onResult: (Map<String, dynamic> message) async {
          debugPrint("Captcha result: $message");

          String status = message["status"];
          if (status == "1") {
            // 发送 message["result"] 到服务器进行二次查询
            Map result = message["result"] as Map;
            await validateCaptchaResult(result.map((key, value) => MapEntry(key.toString(), value.toString())));
          } else {
            // 验证失败，自动刷新
            debugPrint("Captcha 'onResult' state: $status");
          }
        },
        onError: (Map<String, dynamic> message) async {
          debugPrint("Captcha onError: $message");
          String code = message["code"];

          if (Platform.isAndroid) {
            // Android 平台错误处理
            if (code == "-14460") {
              // 验证码会话已取消
            } else {
              // 更多错误代码，请参考开发文档
              // https://docs.botion.com/boc/apirefer/errorcode/android
            }
          }

          if (Platform.isIOS) {
            // iOS 平台错误处理
            if (code == "-20201") {
              // 验证请求超时
            } else if (code == "-20200") {
              // 验证码会话已取消
            } else {
              // 更多错误代码，请参考开发文档
              // https://docs.botion.com/boc/apirefer/errorcode/ios
            }
          }
        },
      );
    } catch (e) {
      debugPrint("Event handler exception $e");
    }

    if (!mounted) return;

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

  void verify() {
    debugPrint("Start captcha. Current version: $_platformVersion");
    captcha.verify();
  }

  void close() {
    debugPrint("Close captcha.");
    captcha.close();
  }

  Future<dynamic> _configurationChanged(MethodCall methodCall) async {
    debugPrint("Activity configurationChanged");
    return captcha.configurationChanged(methodCall.arguments.cast<String, dynamic>());
  }

  Future<dynamic> validateCaptchaResult(Map<String, String> result) async {
    // 提交验证码结果进行验证
    debugPrint("Captcha validateCaptchaResult");
    String validate = "Your server url";
    final response = await http.post(Uri.parse(validate),
        headers: {"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"},
        body: result);

    if (response.statusCode == 200) {
      debugPrint("Validate response: ${response.body}");
    } else {
      debugPrint("URL: $validate, Response statusCode: ${response.statusCode}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Running on: $_platformVersion\n'),
              TextButton(
                style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                  overlayColor: MaterialStateProperty.resolveWith<Color?>(
                    (Set<MaterialState> states) {
                      if (states.contains(MaterialState.hovered)) {
                        return Colors.blue.withOpacity(0.04);
                      }
                      if (states.contains(MaterialState.focused) || states.contains(MaterialState.pressed)) {
                        return Colors.blue.withOpacity(0.12);
                      }
                      return null; // 默认值
                    },
                  ),
                ),
                onPressed: verify,
                child: const Text('点击开始验证'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

配置参数说明

以下是 BOCSessionConfiguration 的配置参数及其说明：

关键方法

1. 初始化

   var config = BOCSessionConfiguration();
   config.language = "en";
   config.debugEnable = true;
   config.backgroundColor = Colors.orange;
   captcha = BocFlutterPlugin("captchaId", config);
   

2. 验证

   captcha.verify();
   

3. 关闭

   captcha.close();
   

4. 添加事件处理器

   captcha.addEventHandler(
     onShow: (Map<String, dynamic> message) async { /* ... */ },
     onResult: (Map<String, dynamic> message) async { /* ... */ },
     onError: (Map<String, dynamic> message) async { /* ... */ },
   );