Flutter智能验证码验证插件yandex_smart_captcha的使用

Flutter智能验证码验证插件yandex_smart_captcha的使用

本插件旨在简化在Flutter移动应用中集成Yandex智能验证码的过程。要了解更多关于Yandex智能验证码服务的信息，请访问其官方页面。

本插件受到了flutter_yandex_smartcaptcha的启发，但提供了几个改进，包括修复了严重的bug、性能有所提升、文档更加完善，并且API更简洁。

动机

有一天在工作中，我急需在移动应用中集成一个Yandex验证码，flutter_yandex_smartcaptcha包帮助了我。然而，我发现了一个严重的bug并报告给了作者。由于他们没有回应，我决定自己创建一个类似的包，并借此机会学习如何在pub.dev上发布包。这就是这个故事的结尾。

截图

智能验证码在简单的测试屏幕上的状态：

智能验证码在真实应用程序中的状态：

完整示例代码

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

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

// 从Yandex Cloud管理员面板获取您的密钥。
const clientKey = String.fromEnvironment('CLIENT_KEY');

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

class App extends StatelessWidget {
  const App({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Yandex SmartCaptcha',
      theme: ThemeData(useMaterial3: true),
      home: const HomePage(title: 'Example'),
    );
  }
}

class HomePage extends StatefulWidget {
  final String title;

  const HomePage({required this.title, super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final CaptchaConfig _config;
  late final CaptchaController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _config = const CaptchaConfig(
      clientKey: clientKey,
      alwaysShowChallenge: true,
      language: CaptchaLanguage.en,
      // invisibleMode: false,
      // hideDPNBadge: false,
      // dpnBadgePosition: DPNBadgePosition.bottomRight,
      // webViewMode: true,
      backgroundColor: Colors.lightBlue,
    );
    _controller = CaptchaController()
      ..setReadyCallback(() {
        debugPrint('call: SmartCaptcha controller is ready');
      });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: YandexSmartCaptcha(
                config: _config,
                controller: _controller,
                loadingIndicator: const Center(
                  child: SizedBox(
                    height: 50,
                    width: 50,
                    child: CircularProgressIndicator(),
                  ),
                ),
                onNavigationRequest: (url) {
                  debugPrint('call: onNavigationRequest $url');
                  if (url.contains('cloud.yandex')) {
                    // 当用户点击‘Yandex Cloud智能验证码’链接时，阻止导航请求。
                    return false;
                  }
                  return true;
                },
                onNetworkError: () {
                  debugPrint('call: onNetworkError');
                },
                onJavaScriptError: () {
                  debugPrint('call: onJavaScriptError');
                },
                onChallengeShown: () {
                  debugPrint('call: onChallengeShown');
                },
                onChallengeHidden: () {
                  debugPrint('call: onChallengeHidden');
                },
                onChallengeSolved: (token) {
                  debugPrint('call: onChallengeSolved $token');
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      if (_controller.isReady) {
                        _controller.execute();
                      }
                    },
                    child: const Text('Execute'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_controller.isReady) {
                        _controller.destroy();
                      }
                    },
                    child: const Text('Destroy'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}