Flutter谷歌验证码插件g_recaptcha_v3的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter谷歌验证码插件g_recaptcha_v3的使用

简介

g_recaptcha_v3 是一个用于Flutter Web的Google reCAPTCHA v3插件。它可以帮助你创建reCAPTCHA v3令牌，从而保护你的网站免受垃圾信息和滥用。

Pub

你可以通过 Web Demo 查看示例效果。

Sample GIF

准备工作

Step 1: 创建密钥

  1. 创建你的密钥 🗝
  2. ReCaptcha 文档
  3. 在开发环境中，添加 localhost 作为域名。

Step 2: 添加脚本（自动完成）

在 web/index.html 文件的 <head> 标签中添加以下脚本，并确保它位于 main.dart.js、flutter.js 或 flutter_bootstrap.js 脚本之前。

<head>
  ...
  <!-- Step 2 -->
  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>
  <!-- Step 2 End -->  
</head>

Step 3: 添加依赖

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

flutter pub add g_recaptcha_v3

开发指南

1. 初始化 GRecaptchaV3

在调用 execute() 方法之前，必须先调用 ready() 方法。

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (kIsWeb) {
    bool ready = await GRecaptchaV3.ready("<your Recaptcha site key>");
    print("Is Recaptcha ready? $ready");
  }
  runApp(const MyApp());
}

2. 执行 GRecaptchaV3

调用 execute() 方法以生成令牌。

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void generateToken() async {
  String? token = await GRecaptchaV3.execute('<your_action>');
  print(token);
  // 将令牌发送到服务器进行验证
}
  • String action: 用于后端验证的动作字符串。详情请参阅 动作文档。
  • 如果出现以下情况，token 将为 null：
    • Web 设置有错误。
    • 方法从非 Web 平台调用。

3. 显示/隐藏 reCaptcha 徽章

更改 reCaptcha 徽章的可见性。

GRecaptchaV3.showBadge();
GRecaptchaV3.hideBadge();

警告: 你可以隐藏徽章，但必须在用户流程中 明显地包含 reCAPTCHA 品牌标识。

Alternate Way

更多信息请参阅 reCaptcha 文档。

示例代码

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (kIsWeb) {
    bool ready = await GRecaptchaV3.ready(
        "6Lfl7coUAAAAAKUjryaKQDhrrklXE9yrvWNXqKTj",
        showBadge: true); //--2
    print("Is Recaptcha ready? $ready");
  }

  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _token = 'Click the below button to generate token';
  bool badgeVisible = true;

  Future<void> getToken() async {
    String token = await GRecaptchaV3.execute('submit') ?? 'null returned';
    setState(() {
      _token = token;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Recaptcha V3 Web example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SelectableText('Token: $_token\n'),
              ElevatedButton(
                onPressed: getToken,
                child: const Text('Get new token'),
              ),
              OutlinedButton.icon(
                onPressed: () {
                  if (badgeVisible) {
                    GRecaptchaV3.hideBadge();
                  } else {
                    GRecaptchaV3.showBadge();
                  }
                  badgeVisible = !badgeVisible;
                },
                icon: const Icon(Icons.legend_toggle),
                label: const Text("Toggle Badge Visibilty"),
              ),
              TextButton.icon(
                  label: const Icon(Icons.copy),
                  onPressed: () {
                    Clipboard.setData(const ClipboardData(
                        text: "https://pub.dev/packages/g_recaptcha_v3"));
                  },
                  icon: const SelectableText(
                      "https://pub.dev/packages/g_recaptcha_v3")),
            ],
          ),
        ),
      ),
    );
  }
}

FAQ

Q: 如何在Flutter渲染UI之前隐藏reCaptcha？

A: 参考 GitHub Issue #3

希望这些信息对你有所帮助！如果你有任何问题，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中集成和使用Google reCAPTCHA v3插件（g_recaptcha_v3）的代码示例。这个示例将展示如何初始化reCAPTCHA，获取令牌，并发送到您的服务器进行验证。

1. 添加依赖

首先，在您的pubspec.yaml文件中添加g_recaptcha_v3依赖：

dependencies:
  flutter:
    sdk: flutter
  g_recaptcha_v3: ^最新版本号  # 请替换为实际发布的最新版本号

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

2. 初始化reCAPTCHA

在您的Flutter应用中，您需要初始化reCAPTCHA并获取站点密钥（site key），这通常从Google reCAPTCHA管理后台获取。

3. 获取reCAPTCHA令牌

使用g_recaptcha_v3插件来获取reCAPTCHA令牌。下面是一个简单的示例，展示如何在按钮点击时获取令牌：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google reCAPTCHA v3 Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  String? reCaptchaToken;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Google reCAPTCHA v3 Token:'),
        Text(reCaptchaToken ?? 'N/A'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () async {
            String siteKey = 'YOUR_SITE_KEY';  // 替换为您的reCAPTCHA站点密钥
            reCaptchaToken = await GRecaptchaV3.getReCaptchaToken(siteKey);
            setState(() {});

            // 在这里，您可以将令牌发送到您的服务器进行验证
            // 例如：
            // _sendTokenToServer(reCaptchaToken!);
          },
          child: Text('Get reCAPTCHA Token'),
        ),
      ],
    );
  }

  // 示例函数：将令牌发送到服务器进行验证
  void _sendTokenToServer(String token) async {
    // 您的服务器验证逻辑
    // 例如，使用HTTP请求将令牌发送到您的服务器
    // 这里只是示例，不是实际代码
    // var response = await http.post('YOUR_SERVER_URL', body: {'token': token});
    // print(response.body);
  }
}

4. 注意事项

  • 确保您已经在Google reCAPTCHA管理后台为您的网站或应用配置了站点密钥和秘密密钥。
  • 将获取的reCAPTCHA令牌发送到您的服务器进行验证，这是防止滥用和机器人攻击的关键步骤。
  • 在生产环境中，请确保您的敏感信息（如秘密密钥）不会暴露在客户端代码中。

这个示例提供了一个基本的框架，您可以根据需要进行扩展和修改。希望这能帮助您在Flutter项目中成功集成Google reCAPTCHA v3。

回到顶部