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

介绍

flutter_gcaptcha_v3 是一个用于在Flutter应用中实现Google reCAPTCHA v3的简单插件。它通过验证用户是否为机器人来为你的Flutter应用增加一层安全性。

使用插件

准备工作

首先，你需要在项目的 pubspec.yaml 文件中添加该插件的依赖：

dependencies:
  flutter_gcaptcha_v3: any

注意：这个包可能在本地服务器上无法工作，因为 index.html 文件是本地添加的并且无法访问。请尝试将此 index.html 文件托管在你的域名下，并提供相应的URL作为参数。

Google reCAPTCHA V3 API Key

要注册一个URL到reCAPTCHA，按照以下步骤操作：

1. 访问 reCAPTCHA管理控制台。
2. 使用Google账号登录。
3. 添加标签名称（例如：app name）。
4. 选择reCAPTCHA类型为 Challenge(V3)。
5. 点击“+ Add”按钮以注册网站。
6. 测试时，可以添加域名 localhost；生产环境中可以添加实际的域名（如example.com）。
7. 在Google Cloud Platform中添加应用名称并创建项目以启用所需的API。
8. 点击保存并提交。

你将会获得两个密钥：

• Site Key：用于在你的站点上显示验证码验证小部件。
• Secret Key：用于应用程序与reCAPTCHA服务器之间的认证通信，以验证用户的响应。

服务器端验证

使用秘密密钥和从 flutter_gcaptcha_v3 包中获取的 token，可以通过调用Google API https://www.google.com/recaptcha/api/siteverify 来验证token。

你可以直接调用上述API或将其集成到后端服务器中。更多关于如何验证token的信息，请参阅Google文档。

示例代码

以下是一个完整的示例demo：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_gcaptcha_v3/recaptca_config.dart';
import 'package:flutter_gcaptcha_v3/web_view.dart';

void main() {
  // 初始化数据站点密钥
  RecaptchaHandler.instance.setupSiteKey(dataSiteKey: 'YOUR_SITE_KEY_HERE');
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Awesome App',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.purple),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: const Text(
          "flutter_gcaptcha_v3",
          style: TextStyle(color: Colors.white),
        ),
      ),
      backgroundColor: Colors.black,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            height: 202,
            child: Stack(
              alignment: Alignment.centerRight,
              children: [
                IgnorePointer(
                  ignoring: true,
                  child: ReCaptchaWebView(
                    width: double.maxFinite,
                    height: 200,
                    onTokenReceived: _onTokenReceived,
                    url: 'YOUR_HOSTED_HTML_URL', // 替换为你托管的HTML文件URL
                  ),
                ),
              ],
            ),
          ),
          ElevatedButton(
            onPressed: () {
              RecaptchaHandler.executeV3(action: 'login');
            },
            child: const Text('submit'),
          ),
          const SizedBox(
            height: 20,
          ),
          ElevatedButton(
            onPressed: () {
              log('Stored Token ${RecaptchaHandler.instance.captchaToken}');
            },
            child: const Text('Stored Token'),
          )
        ],
      ),
    );
  }

  _onTokenReceived(String token) {
    log("CAPTCHA TOKEN==> $token");

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
          content: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: SelectableText(token),
            ),
          ),
          duration: const Duration(seconds: 10)),
    );
  }
}

请确保替换 'YOUR_SITE_KEY_HERE' 和 'YOUR_HOSTED_HTML_URL' 为你自己的值。希望这个示例能够帮助你在Flutter应用中成功集成Google reCAPTCHA v3！