Flutter验证码验证插件flutter_recaptcha_v2_compat的使用

Flutter验证码验证插件flutter_recaptcha_v2_compat的使用

简介

flutter_recaptcha_v2_compat 是一个用于集成 Google ReCaptcha V2 的 Flutter 插件。该插件需要 Webview 来使用 Google ReCaptcha，并且仅支持 Google ReCAPTCHA V2（不支持 V3）。

开始使用

获取 API 密钥

  1. 访问 Google ReCaptcha 官方网站 获取你的 API 密钥和密钥。
  2. 测试你的 API 密钥：测试链接

集成到项目中

  1. 在 pubspec.yaml 文件中添加依赖：

    dependencies:
  flutter_recaptcha_v2_compat: ^最新版本号

  2. 运行 flutter pub get 命令以安装依赖。

使用示例

示例代码

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

import 'package:flutter/material.dart';
import 'package:flutter_recaptcha_v2_compat/recaptcha_v2.dart';

void main() => runApp(MyApp());

const TAG = 'ReCaptchaV2';

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Google ReCaptcha Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Stack(
        children: <Widget>[
          Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const SizedBox(height: 24),
                  RecaptchaV2Button(
                    apiKey: "YOUR_API_KEY", // 替换为你的 API 密钥
                    apiSecret: "YOUR_API_SECRET", // 替换为你的 API 密钥
                    pluginURL: 'https://recaptcha-flutter-plugin.firebaseapp.com/',
                    isErrorShowing: false,
                    onVerified: (val) {
                      print('$TAG: Verified $val');
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

详细说明

  1. 创建 RecaptchaV2Controller 实例：

    RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();

  2. 在 widget 树中添加 RecaptchaV2：

    RecaptchaV2(
  apiKey: "YOUR_API_KEY", // 替换为你的 API 密钥
  apiSecret: "YOUR_API_SECRET", // 替换为你的 API 密钥
  controller: recaptchaV2Controller,
  onVerifiedError: (err) {
    print(err);
  },
  onVerifiedSuccessfully: (success) {
    setState(() {
      if (success) {
        // 验证成功
      } else {
        // 验证失败
      }
    });
  },
),

  3. 显示和隐藏验证码：

    • 显示验证码：
      recaptchaV2Controller.show();
    • 隐藏验证码：
      recaptchaV2Controller.hide();

注意事项

  • RecaptchaV2 小部件默认是隐藏的，你需要通过 RecaptchaV2Controller 调用 show() 方法来显示它。
  • 确保 RecaptchaV2 小部件放在 widget 树的顶部，以阻止后面的交互。

通过以上步骤，你可以在 Flutter 应用中轻松集成 Google ReCaptcha V2。希望这个示例对你有所帮助！


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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用flutter_recaptcha_v2_compat插件进行验证码验证的示例代码。这个插件允许你在Flutter应用中集成Google reCAPTCHA v2，通常用于防止自动化滥用和确保用户交互。

首先，确保你已经在pubspec.yaml文件中添加了flutter_recaptcha_v2_compat依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_recaptcha_v2_compat: ^x.y.z  # 请替换为最新版本号

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

接下来，你需要设置reCAPTCHA的站点密钥和密钥。这些信息可以在Google reCAPTCHA管理控制台中找到。

下面是一个简单的Flutter应用示例，展示了如何使用flutter_recaptcha_v2_compat插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ReCAPTCHA Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FlutterRecaptchaV2Compat _recaptcha = FlutterRecaptchaV2Compat(
    siteKey: '你的站点密钥',  // 替换为你的reCAPTCHA站点密钥
  );

  bool _isVerified = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ReCAPTCHA Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '验证码验证状态: $_isVerified',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  bool result = await _recaptcha.verifyWithPopup();
                  setState(() {
                    _isVerified = result;
                  });
                  if (result) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('验证码验证成功！')),
                    );
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('验证码验证失败，请重试。')),
                    );
                  }
                } catch (e) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('发生错误: ${e.message}')),
                  );
                }
              },
              child: Text('验证'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个FlutterRecaptchaV2Compat实例，并传递了reCAPTCHA的站点密钥。
  2. 在UI中，我们有一个按钮，用户点击后会触发验证码验证。
  3. verifyWithPopup()方法会打开一个浏览器弹窗，让用户完成reCAPTCHA验证。
  4. 验证结果会更新到UI上，并显示相应的Snackbar消息。

请注意，verifyWithPopup()方法需要在能够打开浏览器弹窗的环境中运行（如移动设备或桌面浏览器）。在某些桌面环境中（特别是无头服务器或Web视图），这个方法可能无法正常工作。

此外，确保你的应用有适当的权限来打开浏览器窗口，特别是在iOS和Android平台上，你可能需要在Info.plist和AndroidManifest.xml中进行相应的配置。

回到顶部