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

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

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

简介

grecaptcha 是一个简单的 Flutter 插件，允许在 Android 设备上使用 SafetyNet API 验证用户是否为人类。

使用插件

准备工作

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

    dependencies:
  grecaptcha: ^0.0.5

  2. 注册你的应用程序到 reCAPTCHA 管理控制台：

    • 访问 reCAPTCHA Admin Console 并填写表单注册。
    • 选择 “reCAPTCHA-Android” 类型。
    • 复制你的 Android 包名（可以从 android/app/src/main/AndroidManifest.xml 中获取）并填入相应字段。

验证用户

在 Dart 代码中调用以下方法来验证用户是否为人类。确保替换 SITE_KEY 为你从 reCAPTCHA 管理界面获得的站点密钥。

Grecaptcha.verifyWithRecaptcha(SITE_KEY).then((result) {
    // 发送结果令牌和表单字段到服务器进行进一步验证
}).onError((error, stackTrace) {
    print("Could not verify:\n $error at $stackTrace");
});

服务器端验证

仅检查 Grecaptcha.verifyWithRecaptcha 是否返回值是不够的，必须在应用后端服务器上验证令牌。参考 Google reCAPTCHA 文档 进行服务器端验证。

示例 Demo

以下是完整的示例代码，展示了如何集成和使用 grecaptcha 插件。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:grecaptcha/grecaptcha.dart';

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

const String siteKey = "your_site_key"; // 替换为你的实际站点密钥

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

enum _VerificationStep { showingButton, working, error, verified }

class _MyAppState extends State<MyApp> {
  _VerificationStep _step = _VerificationStep.showingButton;

  void _startVerification() {
    setState(() => _step = _VerificationStep.working);

    Grecaptcha().verifyWithRecaptcha(siteKey).then((result) {
      setState(() => _step = _VerificationStep.verified);
    }).onError((error, stackTrace) {
      if (kDebugMode) {
        print("Could not verify:\n$error at $stackTrace");
      }
      setState(() => _step = _VerificationStep.error);
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget content;

    switch (_step) {
      case _VerificationStep.showingButton:
        content = Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("This example will use the reCaptcha API to verify that you're human"),
            MaterialButton(
              onPressed: _startVerification,
              color: Colors.blueAccent,
              textColor: Colors.white,
              child: const Text("VERIFY"),
            ),
          ],
        );
        break;
      case _VerificationStep.working:
        content = Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            CircularProgressIndicator(),
            Text("Trying to figure out whether you're human"),
          ],
        );
        break;
      case _VerificationStep.verified:
        content = const Text("The reCaptcha API returned a token, indicating that you're a human.");
        break;
      case _VerificationStep.error:
        content = const Text("We could not verify that you're a human :( This can occur if you "
            "have no internet connection (or if you really are a bot).");
    }

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('reCaptcha Example'),
        ),
        body: Center(
          child: content,
        ),
      ),
    );
  }
}

以上代码提供了一个完整的 Flutter 应用示例，展示如何使用 grecaptcha 插件进行用户验证，并根据验证结果更新 UI。请记得将 siteKey 替换为你自己的站点密钥，并确保在服务器端进行适当的令牌验证。


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

Harmonyos Next教程
1 回复

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


在Flutter应用中集成谷歌验证码（通常指的是reCAPTCHA v2或v3，但请注意，直接在Flutter中使用grecaptcha库并不是很常见，因为grecaptcha主要设计用于网页环境。不过，我们可以通过Flutter的WebView插件或者调用原生平台代码来实现类似功能）。

以下是一个使用flutter_webview_plugin来加载包含reCAPTCHA的网页，并处理验证码验证的示例。请注意，这种方法需要你有自己的后端服务器来处理reCAPTCHA的验证，因为reCAPTCHA的密钥和验证需要在服务器端完成。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.4.0  # 请检查最新版本号

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

步骤 2: 配置reCAPTCHA

  1. 在Google reCAPTCHA管理控制台创建一个站点并获取你的站点密钥（site key）和秘密密钥（secret key）。

步骤 3: 使用WebView加载reCAPTCHA页面

下面是一个基本的Flutter应用示例，它使用WebView来加载一个包含reCAPTCHA的网页。你需要一个HTML页面，该页面包含reCAPTCHA小部件，并将其托管在你可以访问的服务器上。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebviewScaffold(
        url: 'https://your-server.com/recaptcha-page.html',  // 替换为你的HTML页面URL
        appBar: AppBar(
          title: Text('reCAPTCHA Example'),
        ),
        withJavascript: true,
        withLocalStorage: true,
        hidden: true,
        clearCookies: false,
        clearCache: false,
        javascriptMode: JavascriptMode.UNRESTRICTED,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          // 你可以在这里添加更多的WebView控制逻辑
        },
        onUrlChanged: (String url) {
          print("URL changed to $url");
          // 你可以在这里检查URL变化来处理回调
        },
      ),
    );
  }

  WebViewController _controller;
}

步骤 4: 在HTML页面中集成reCAPTCHA

创建一个HTML页面（例如recaptcha-page.html），并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reCAPTCHA Example</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <h1>Please complete the reCAPTCHA</h1>
    <form id="recaptcha-form" action="YOUR_SERVER_VERIFY_ENDPOINT" method="POST">
        <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
        <br/>
        <input type="submit" value="Submit">
    </form>
    <script>
        document.getElementById('recaptcha-form').onsubmit = function(event) {
            event.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
                    // 在这里，你可以通过Flutter的通道将token发送到Dart代码，或者直接通过AJAX发送到你的服务器进行验证
                    var formData = new FormData();
                    formData.append('g-recaptcha-response', token);
                    fetch('YOUR_SERVER_VERIFY_ENDPOINT', {
                        method: 'POST',
                        body: formData,
                    }).then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('Verification successful!');
                            // 根据需要处理成功逻辑
                        } else {
                            alert('Verification failed!');
                            // 根据需要处理失败逻辑
                        }
                    });
                });
            });
        };
    </script>
</body>
</html>

请确保将YOUR_SERVER_VERIFY_ENDPOINT替换为你的后端验证端点，并将YOUR_SITE_KEY替换为你的reCAPTCHA站点密钥。

注意事项

  1. 安全性：直接在客户端处理敏感信息（如reCAPTCHA响应）是不安全的。你应该在服务器端验证reCAPTCHA响应。
  2. Flutter与原生交互：如果你需要在Flutter和原生代码之间传递数据（例如，将reCAPTCHA响应从WebView传递到Dart代码），你可以使用MethodChannel或BasicMessageChannel。
  3. 用户体验：WebView可能会降低用户体验，特别是在移动设备上。考虑使用原生解决方案或更现代的验证方法。

这种方法是一个基本的示例，用于说明如何在Flutter应用中集成reCAPTCHA。根据你的具体需求，你可能需要调整代码和流程。

回到顶部