Flutter Firebase reCAPTCHA验证插件flutter_firebase_recaptcha的使用

Flutter Firebase reCAPTCHA验证插件flutter_firebase_recaptcha的使用

flutter_firebase_recaptcha 提供了一组构建块来创建一个 reCAPTCHA 验证器，并将其与您的 Firebase 电话认证工作流一起使用。

Firebase 电话认证无法直接使用 Firebase JS SDK 完成。这是因为需要一个应用程序验证对象（reCAPTCHA）作为额外的安全措施，以验证用户是否真实而不是机器人。

安装

在 pubspec.yaml 文件中添加包

flutter pub add flutter_firebase_recaptcha

基本用法

为了开始，请阅读官方的 Firebase 电话认证指南并忽略所有涉及 reCAPTCHA 配置的步骤。

我们将使用自己的验证器，该验证器会在网页浏览器内创建一个 reCAPTCHA 小部件。

将 FirebaseRecaptchaVerifierModal 小部件添加到您的应用中，并通过 firebaseConfig 属性传递 Firebase 网页配置。

注意：您可以选择性地使用 attemptInvisibleVerification 属性打开实验性的隐形 reCAPTCHA。此功能尝试在不向用户显示任何界面的情况下完成验证过程。当隐形验证失败时，将显示完整的 reCAPTCHA 挑战界面。

const firebaseConfig = {
    'apiKey': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'authDomain': 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'projectId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'storageBucket': 'XXXXXXXXXXXXXXXXXXXXXXXX',
    'messagingSenderId': 'XXXXXXXXXXXXXXXXXXXX',
    'appId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
};

FirebaseRecaptchaVerifierModal(
      firebaseConfig: firebaseConfig,
      onVerify: (token) => print('token: ' + token),
      onLoad: () => print('onLoad'),
      onError: () => print('onError'),
      onFullChallenge: () => print('onFullChallenge'),
      attemptInvisibleVerification: true,
    );

API

import 'package:flutter_firebase_recaptcha/flutter_firebase_recaptcha.dart';

<code>FirebaseRecaptchaVerifierModal</code>

自动显示的模态屏幕，显示一个 reCAPTCHA 小部件。

Props

• firebaseConfig (IFirebaseOptions) – Firebase 网页配置。
• firebaseVersion (string) – 加载在 web-view 中的 Firebase JavaScript SDK 的可选版本。例如 version="7.9.0"。
• attemptInvisibleVerification (boolean) – 尝试在不显示 reCAPTCHA 工作流程的情况下进行验证。默认为 false。（应用 Google 条款 - 使用 FirebaseRecaptchaBanner 显示 Google 条款和政策）。
• appVerificationDisabledForTesting (boolean) – 设置时，禁用应用验证以测试电话认证。当此属性为 true 时，渲染模拟 reCAPTCHA。这在开发期间的手动测试或自动化集成测试中很有用。更多信息请参见 Firebase 电话认证。
• languageCode (string) – 显示 reCAPTCHA 挑战的语言。可能的语言列表，请参见 reCAPTCHA 语言代码。

<code>FirebaseRecaptcha</code>

在 web-view 中显示的 reCAPTCHA v3 小部件。

Props

• firebaseConfig (Map<String, String>) – Firebase 网页配置。
• firebaseVersion (string) – 加载在 web-view 中的 Firebase JavaScript SDK 的可选版本。例如 firebaseVersion: '7.9.0'。
• appVerificationDisabledForTesting (boolean) – 设置时，禁用应用验证以测试电话认证。当此属性为 true 时，渲染模拟 reCAPTCHA。这在开发期间的手动测试或自动化集成测试中很有用。更多信息请参见 Firebase 电话认证。
• languageCode (string) – 显示 reCAPTCHA 挑战的语言。可能的语言列表，请参见 reCAPTCHA 语言代码。
• onLoad (function) – 当小部件加载时调用的回调。
• onError (function) – 当小部件加载失败时调用的回调。
• onVerify (function) – 当 reCAPTCHA 验证用户不是机器人时调用的回调。回调提供了 reCAPTCHA 令牌字符串。示例 onVerify: (token) => setState(() { _token = token; })。
• onFullChallenge (function) – 当 reCAPTCHA 显示完整的挑战体验时调用的回调。
• invisible (boolean) – 当为 true 时，渲染一个 invisible reCAPTCHA 小部件。可以通过设置 verify 属性为 true 来触发隐形验证。

完整示例 Demo

下面是一个完整的示例，展示了如何在 Flutter 应用程序中使用 flutter_firebase_recaptcha 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final firebaseConfig = {
    'apiKey': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'authDomain': 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'projectId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'storageBucket': 'XXXXXXXXXXXXXXXXXXXXXXXX',
    'messagingSenderId': 'XXXXXXXXXXXXXXXXXXXX',
    'appId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  };

  void _handleOnVerify(String token) {
    print('Token: $token');
  }

  void _handleOnLoad() {
    print('Widget loaded');
  }

  void _handleOnError() {
    print('Widget error');
  }

  void _handleOnFullChallenge() {
    print('Full challenge');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Firebase reCAPTCHA Example'),
      ),
      body: Center(
        child: FirebaseRecaptchaVerifierModal(
          firebaseConfig: firebaseConfig,
          onVerify: _handleOnVerify,
          onLoad: _handleOnLoad,
          onError: _handleOnError,
          onFullChallenge: _handleOnFullChallenge,
          attemptInvisibleVerification: true,
        ),
      ),
    );
  }
}