Flutter验证码插件sm_captcha的使用

sm_captcha

sm_captcha 是一个用于在 Flutter 应用中集成滑块验证码功能的插件。通过此插件，开发者可以轻松地为应用添加防机器人验证的功能。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 sm_captcha 插件：

dependencies:
  sm_captcha: ^最新版本号

然后运行以下命令以更新依赖：

flutter pub get

2. 初始化项目

创建一个新的 Flutter 项目，并确保已正确配置 flutter_smart_dialog 插件。flutter_smart_dialog 用于弹出验证码窗口。

3. 配置与实现

示例代码

以下是完整的示例代码，展示如何在 Flutter 中使用 sm_captcha 插件：

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

import 'package:flutter/material.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:sm_captcha/sm_captcha.dart';
import 'dart:convert' as convert;

// 自定义按钮组件
import 'gradient_button.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyApp(),
      navigatorObservers: [FlutterSmartDialog.observer],
      builder: FlutterSmartDialog.init(),
    );
  }
}

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('滑块验证码'),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int captchaMode = 0; // 当前验证码模式

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        margin: const EdgeInsets.only(left: 16.0, right: 16.0, top: 56.0),
        child: Column(
          children: [
            // 验证码区域
            Container(
              height: 285,
              width: double.infinity,
              color: const Color(0xFF1D2933),
              child: SmCaptchaView(
                onCaptchaCreated: (controller) {
                  controller.start(); // 开始验证
                },
                onReady: () {
                  return onReady(); // 获取授权信息
                },
                onSuccess: (pass, rid) async {
                  print("---------&gt;onSuccess $pass,$rid");
                },
                onError: (code, msg) async {
                  print("---------&gt;onError $code,$msg");
                },
                onCancel: () async {
                  return null;
                },
              ),
            ),
            const SizedBox(height: 10.0),
            // 验证码模式切换
            Container(
              height: 40,
              alignment: Alignment.centerLeft,
              child: _getCaptchaMode(),
            ),
            // 弹窗验证码按钮
            Container(
              height: 40.0,
              child: Row(
                children: [
                  GradientButton(
                    beginColor: const Color(0xffff9047),
                    endColor: const Color(0xffff5722),
                    height: 40.0,
                    width: 130.0,
                    onPress: () {
                      setState(() {
                        _show(); // 显示弹窗验证码
                      });
                    },
                    isEnabled: true,
                    text: "弹窗验证码",
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 获取数美图形验证码授权
  Future<String?> onReady() async {
    final completer = Completer<String>();
    SmConfig config = SmConfig(
      organization: 'RlokQwRlVjUrTUlkIqOg', // 数美的组织 ID
      appId: 'default', // 默认应用 ID
      captchaMode: captchaMode, // 当前验证码模式
    );
    String json = convert.jsonEncode(config);
    completer.complete(json);
    return completer.future;
  }

  // 获取验证码模式选项
  Widget _getCaptchaMode() {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        _radioWidget('滑动式', 0),
        const SizedBox(width: 20),
        _radioWidget('文字点选式', 1),
        const SizedBox(width: 20),
        _radioWidget('图标点选式', 2),
        const SizedBox(width: 20),
        _radioWidget('语序点选', 3),
        const SizedBox(width: 20),
        _radioWidget('空间逻辑推理', 4),
      ],
    );
  }

  // 单选框生成器
  Widget _radioWidget(String title, int val) {
    return SizedBox(
      height: 30.0,
      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        Radio(
          value: val,
          groupValue: captchaMode,
          onChanged: (value) {
            setState(() {
              captchaMode = int.parse(value.toString());
            });
          },
        ),
        Text(title, style: const TextStyle(color: Colors.black45)),
      ]),
    );
  }

  // 弹窗验证码
  void _show() {
    SmartDialog.show(
      isLoadingTemp: false,
      widget: Container(
        height: 275.0,
        width: double.infinity,
        margin: const EdgeInsets.symmetric(horizontal: 16.0),
        decoration: BoxDecoration(
          color: const Color(0xFF1D2933),
          borderRadius: BorderRadius.circular(10),
        ),
        alignment: Alignment.center,
        child: SmCaptchaView(
          onCaptchaCreated: (controller) {
            controller.start(); // 开始验证
          },
          onReady: () {
            return onReady(); // 获取授权信息
          },
          onSuccess: (pass, rid) async {
            print("---------&gt;onSuccess $pass,$rid");
            if (pass) {
              SmartDialog.dismiss(); // 验证成功后关闭弹窗
            }
          },
          onError: (code, msg) async {
            print("---------&gt;onError $code,$msg");
          },
          onCancel: () async {
            SmartDialog.dismiss(); // 用户取消验证时关闭弹窗
          },
        ),
      ),
    );
  }
}