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

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

示例:

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

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Yandex SmartCaptcha',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Example'),
    );
  }
}

/// CaptchaConfig:
/// sitekey — 客户端部分的密钥。
/// languageCaptcha — 验证码的语言。'ru' | 'en' | 'be' | 'kk' | 'tt' | 'uk' | 'uz' | 'tr';
/// testMode — 启用测试模式。用户将始终收到任务。仅用于调试和测试。
/// isWebView — 在WebView中启动验证码。在通过WebView将验证码添加到移动应用程序时,可以提高评估用户的准确性。
/// invisible — 不可见的验证码。
/// hideShield — 隐藏数据处理通知块。
/// colorBackground — 背景颜色

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late final CaptchaConfig captchaConfig;
  final Controller _controller = Controller();

  [@override](/user/override)
  void initState() {
    super.initState();
    captchaConfig = CaptchaConfig(
        siteKey: siteKey,
        testMode: true,
        languageCaptcha: 'ru',
        invisible: false,
        isWebView: true,
        colorBackground: Colors.green
    );
    _controller.onReadyCallback(() {
      debugPrint('SmartCaptcha controller is ready');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
                child: YandexSmartCaptcha(
                  captchaConfig: captchaConfig,
                  onLoadWidget: const Center(
                    child: Center(
                      child: SizedBox(height: 60, width: 60, child: CircularProgressIndicator()),
                    ),
                  ),
                  controller: _controller,
                  challengeViewCloseCallback: () {
                    debugPrint('call: challengeViewCloseCallback');
                  },
                  challengeViewOpenCallback: () {
                    debugPrint('call: challengeViewOpenCallback');
                  },
                  networkErrorCallback: () {
                    debugPrint('call: networkErrorCallback');
                  },
                  tokenResultCallback: (String token) {
                    debugPrint('call: tokenResultCallback $token');
                  },
                  shouldOpenPolicy: (String urlPolicy) {
                    if (urlPolicy.contains('smartcaptcha_notice')) {
                      return false;
                    } else {
                      return true;
                    }
                  },
                )),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(
                      onPressed: () async {
                        final bool isReady = _controller.isControllerIsReady();
                        if (isReady) {
                          _controller.execute();
                        }
                      },
                      child: const Text('Execute')),
                  ElevatedButton(
                      onPressed: () async {
                        final bool isReady = _controller.isControllerIsReady();
                        if (isReady) {
                          _controller.destroy();
                        }
                      },
                      child: const Text('Destroy'))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter智能验证码验证插件flutter_yandex_smartcaptcha的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter智能验证码验证插件flutter_yandex_smartcaptcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_yandex_smartcaptcha 是一个用于在 Flutter 应用中集成 Yandex SmartCaptcha 的插件。Yandex SmartCaptcha 是一种智能验证码服务,可以帮助防止自动化脚本和恶意行为。

以下是如何在 Flutter 项目中使用 flutter_yandex_smartcaptcha 插件的步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 flutter_yandex_smartcaptcha 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_yandex_smartcaptcha: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 获取 Yandex SmartCaptcha 密钥

在使用插件之前,你需要在 Yandex SmartCaptcha 上注册并获取 clientKeysiteKey

3. 在 Flutter 中集成 Yandex SmartCaptcha

你可以在 Flutter 应用中使用 YandexSmartCaptcha 组件来显示验证码。

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

class CaptchaPage extends StatefulWidget {
  [@override](/user/override)
  _CaptchaPageState createState() => _CaptchaPageState();
}

class _CaptchaPageState extends State<CaptchaPage> {
  String _captchaToken = '';

  Future<void> _showCaptcha() async {
    final token = await YandexSmartCaptcha.showCaptcha(
      clientKey: 'YOUR_CLIENT_KEY',
      siteKey: 'YOUR_SITE_KEY',
    );

    setState(() {
      _captchaToken = token;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex SmartCaptcha Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _showCaptcha,
              child: Text('Show Captcha'),
            ),
            SizedBox(height: 20),
            Text('Captcha Token: $_captchaToken'),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CaptchaPage(),
  ));
}
回到顶部