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

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

recaptcha_v3 是一个用于在 Flutter 应用中集成 Google reCAPTCHA v3 的插件。Google reCAPTCHA v3 是一种免费的服务，用于保护网站免受垃圾邮件和滥用。

recaptcha_v3

准备工作

步骤 1

  1. 在 Google reCAPTCHA 管理页面 创建你的密钥。
  2. 阅读 reCAPTCHA 文档。
  3. 对于开发环境，在 reCAPTCHA 控制台中添加 localhost 作为域名。

步骤 2

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

flutter pub add recaptcha_v3

开发过程

1. Recaptcha.ready()

在调用 execute() 方法之前，需要先调用 ready() 方法。

import 'package:recaptcha_v3/recaptcha_v3.dart'; // 导入插件

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 绑定
  Recaptcha.ready("<your Recaptcha site key>"); // 替换为你的 reCAPTCHA 站点密钥
  runApp(const MyApp());
}

2. Recaptcha.execute()

在调用 execute() 方法之前，确保已经调用了 ready() 方法。

import 'package:recaptcha_v3/recaptcha_v3.dart';

void generateToken() async {
  String? token = await Recaptcha.execute('<your_action>'); // 替换为你的操作名称
  print(token);
  // 发送 token 到服务器进行验证
}
  • String action - 用于在后端验证的字符串（操作文档）。
  • token 将为 null 如果：
    • web 设置存在任何错误。
    • 方法从非 web 平台调用。

3. 显示/隐藏 reCAPTCHA 徽章

你可以通过以下方法来改变 reCAPTCHA 徽章的可见性：

Recaptcha.showBadge(); // 显示徽章
Recaptcha.hideBadge(); // 隐藏徽章

你也可以切换徽章的可见性：

Recaptcha.toogleBadge(); // 切换徽章的可见性

4. reCAPTCHA 品牌化小部件

RecaptchaBrand();

该品牌会根据徽章的状态自动显示或隐藏。因此，你只需将其放置在任何你想要的位置即可。

5. 监听徽章的显示/隐藏状态

final isShowing = Recaptcha.isShowingBadge.value;

警告

你可以在用户流程中隐藏徽章，但必须 包括 reCAPTCHA 品牌 可见部分。更多详情请参阅 reCAPTCHA 文档。

网页端口 80 设置

对于本地主机仅限使用：

如果 reCAPTCHA 脚本在非 80 端口时出现错误，可以使用以下命令设置端口：

flutter run -d chrome --web-port 80

已知问题

  1. 这个问题是由于原生代码问题导致的（无法通过 try-catch 捕获，可以忽略）：
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3       throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 893:3   defaultNoSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 63:17                 noSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 868:31  noSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 318:12  callNSM
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 428:10  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:39  dcall

完整示例代码

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

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:recaptcha_v3/recaptcha_v3.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  Recaptcha.ready("6LfrUQIqAAAAANcqDEjzz54Zy3niDcGg04wKEPEj"); // 替换为你的 reCAPTCHA 站点密钥
  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  String _token = '点击下方按钮生成 token';

  // 异步初始化平台消息
  Future<void> getToken() async {
    String token = await Recaptcha.execute('submit') ?? 'null returned';
    setState(() {
      _token = token;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Recaptcha V3 Web 示例应用'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SelectableText('Token: $_token\n'),
              Column(
                children: [
                  ElevatedButton(
                    onPressed: getToken,
                    child: const Text('获取新 token'),
                  ),
                  const RecaptchaBrand(),
                ],
              ),
              OutlinedButton.icon(
                onPressed: () {
                  Recaptcha.toogleBadge();
                },
                icon: const Icon(Icons.legend_toggle),
                label: const Text("切换徽章可见性"),
              ),
              TextButton.icon(
                  label: const Icon(Icons.copy),
                  onPressed: () {
                    Clipboard.setData(const ClipboardData(
                        text: "https://pub.dev/packages/recaptcha_v3"));
                  },
                  icon: const SelectableText(
                      "https://pub.dev/packages/recaptcha_v3")),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter项目中集成和使用recaptcha_v3插件进行验证码验证，可以帮助你增强应用的安全性，防止恶意行为。以下是一个如何在Flutter中使用recaptcha_v3插件的示例代码案例。

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

dependencies:
  flutter:
    sdk: flutter
  recaptcha_v3: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用recaptcha_v3插件：

  1. 初始化ReCaptcha V3客户端：

在你的主应用文件（通常是main.dart）或者合适的位置初始化ReCaptcha V3客户端。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ReCaptcha V3 Demo'),
        ),
        body: RecaptchaDemo(),
      ),
    );
  }
}

class RecaptchaDemo extends StatefulWidget {
  @override
  _RecaptchaDemoState createState() => _RecaptchaDemoState();
}

class _RecaptchaDemoState extends State<RecaptchaDemo> {
  late ReCaptchaV3 reCaptchaV3;

  @override
  void initState() {
    super.initState();
    // 初始化ReCaptcha V3客户端，替换'你的站点密钥'为你的实际站点密钥
    reCaptchaV3 = ReCaptchaV3(siteKey: '你的站点密钥');
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          // 执行验证请求
          String? token = await reCaptchaV3.execute('你的操作名称');
          print('ReCaptcha Token: $token');
          // 在这里处理token，比如发送到你的服务器进行验证
        },
        child: Text('Verify ReCaptcha'),
      ),
    );
  }
}
  1. 在服务器端验证Token：

Flutter客户端生成的ReCaptcha V3 token需要发送到你的服务器端进行验证。服务器端代码将依赖于你使用的后端技术栈。以下是一个使用Node.js和Express的示例：

const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;

app.use(express.json());

app.post('/verify-recaptcha', async (req, res) => {
  const { token } = req.body;
  const secretKey = '你的私钥';  // 替换为你的实际私钥

  try {
    const response = await axios.post(`https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${token}`);
    const data = response.data;

    if (data.success) {
      res.status(200).send('ReCaptcha verification successful.');
    } else {
      res.status(400).send('ReCaptcha verification failed.');
    }
  } catch (error) {
    res.status(500).send('Server error.');
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

在Flutter客户端，你可以使用http或dio等HTTP客户端库将生成的token发送到你的服务器端进行验证。

请注意，以上代码仅作为示例，实际应用中你需要根据你的具体需求和后端架构进行调整。确保妥善保管你的ReCaptcha密钥，不要将它们硬编码在客户端代码中。

回到顶部