Flutter企业级验证码验证插件recaptcha_enterprise_flutter的使用

reCAPTCHA Enterprise Flutter Module

请注意，本仓库中提交的问题并不是官方的Google支持渠道，而是尽力而为地提供帮助。对于官方支持，请访问: https://cloud.google.com/support-hub。

如果您有关于Flutter插件的问题，请在此仓库中提交问题。如果您遇到的是底层SDK的问题，请在https://github.com/GoogleCloudPlatform/recaptcha-enterprise-mobile-sdk提交问题。

关于reCAPTCHA Enterprise在移动应用中的通用文档，请参阅：

• Android
• iOS

示例App

要运行示例应用程序，请执行以下步骤：

1. 配置文件：将example/assets/configs/dev.json.example复制到example/assets/configs/dev.json，并添加您的sitekeys到该文件。
2. 更改iOS包名：在example/ios/Runner.xcodeproj/project.pbxproj文件中，将三个地方的iOS包名从google.FlutterTestApp更改为您自己的包名。
3. 更改Android包名：在example/android/app/build.gradle文件中，将Android包名从google.FlutterTestApp更改为您自己的包名。
4. 启动模拟器：例如，您可以使用命令open -a Simulator或~/Library/Android/sdk/emulator/emulator -avd Pixel_4_API_32来启动模拟器。

运行应用

cd example && flutter run

运行单元测试

flutter test

运行集成测试

cd example && flutter test integration_test/app_test.dart

示例代码

以下是main.dart的完整示例代码，展示了如何使用recaptcha_enterprise_flutter插件进行reCAPTCHA验证。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:recaptcha_enterprise_flutter/recaptcha.dart';
import 'package:recaptcha_enterprise_flutter/recaptcha_client.dart';
import 'package:recaptcha_enterprise_flutter/recaptcha_enterprise.dart';
import 'package:recaptcha_enterprise_flutter/recaptcha_action.dart';
import 'dart:io' show Platform;
import 'package:recaptcha_flutter_example/app_config.dart';

void main({String? env}) async {
  WidgetsFlutterBinding.ensureInitialized();
  final config = await AppConfig.forEnvironment(env);
  runApp(MyApp(config: config));
}

class MyApp extends StatefulWidget {
  final AppConfig config;

  const MyApp({required this.config, super.key});

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

class _MyAppState extends State<MyApp> {
  String _clientState = "NOT INITIALIZED";
  String _token = "NO TOKEN";
  RecaptchaClient? _client;

  void initClient() async {
    var result = false;
    var errorMessage = "failure";

    var siteKey = _getSiteKey();

    try {
      result = await RecaptchaEnterprise.initClient(siteKey, timeout: 10000);
    } on PlatformException catch (err) {
      debugPrint('Caught platform exception on init: $err');
      errorMessage = 'Code: ${err.code} Message ${err.message}';
    } catch (err) {
      debugPrint('Caught exception on init: $err');
      errorMessage = err.toString();
    }

    setState(() {
      _clientState = result ? "ok" : errorMessage;
    });
  }

  String _getSiteKey() {
    return Platform.isAndroid
        ? widget.config.androidSiteKey
        : widget.config.iosSiteKey;
  }

  void fetchClient() async {
    var errorMessage = "failure";
    var result = false;

    var siteKey = _getSiteKey();

    try {
      _client = await Recaptcha.fetchClient(siteKey);
      result = true;
    } on PlatformException catch (err) {
      debugPrint('Caught platform exception on init: $err');
      errorMessage = 'Code: ${err.code} Message ${err.message}';
    } catch (err) {
      debugPrint('Caught exception on init: $err');
      errorMessage = err.toString();
    }

    setState(() {
      _clientState = result ? "ok" : errorMessage;
    });
  }

  void executeWithFetchClient() async {
    String result;

    try {
      result = await _client?.execute(RecaptchaAction.LOGIN()) ??
          "Client not initialized yet, click button InitClient";
    } on PlatformException catch (err) {
      debugPrint('Caught platform exception on execute: $err');
      result = 'Code: ${err.code} Message ${err.message}';
    } catch (err) {
      debugPrint('Caught exception on execute: $err');
      result = err.toString();
    }

    setState(() {
      _token = result;
    });
  }

  void execute({custom = false}) async {
    String result;

    try {
      result = custom
          ? await RecaptchaEnterprise.execute(RecaptchaAction.custom('foo'),
              timeout: 10000)
          : await RecaptchaEnterprise.execute(RecaptchaAction.LOGIN());
    } on PlatformException catch (err) {
      debugPrint('Caught platform exception on execute: $err');
      result = 'Code: ${err.code} Message ${err.message}';
    } catch (err) {
      debugPrint('Caught exception on execute: $err');
      result = err.toString();
    }

    setState(() {
      _token = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('reCAPTCHA Example'),
      ),
      body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
            const Text('reCAPTCHA Client:\n '),
            Text(_clientState, key: const Key('clientState')),
          ]),
        ]),
        Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
          const Text('reCAPTCHA Token:\n '),
          SizedBox(
            width: 300,
            child: Text(_token,
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                maxLines: 12,
                key: const Key('token')),
          ),
        ]),
        Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
          TextButton(
            onPressed: () {
              initClient();
            },
            key: const Key('getClient'),
            child: Container(
              color: Colors.green,
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              child: const Text(
                'GetClient',
                style: TextStyle(color: Colors.white, fontSize: 13.0),
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              execute();
            },
            key: const Key('executeButton'),
            child: Container(
              color: Colors.green,
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              child: const Text(
                'ExecuteGet',
                style: TextStyle(color: Colors.white, fontSize: 13.0),
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              execute(custom: true);
            },
            key: const Key('executeButtonCustom'),
            child: Container(
              color: Colors.green,
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              child: const Text(
                'ExecuteGetCustom',
                style: TextStyle(color: Colors.white, fontSize: 13.0),
              ),
            ),
          ),
        ]),
        Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
          TextButton(
              onPressed: () {
                fetchClient();
              },
              key: const Key('fetchClient'),
              child: Container(
                color: Colors.lightBlue,
                padding:
                    const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                child: const Text(
                  'FetchClient',
                  style: TextStyle(color: Colors.white, fontSize: 13.0),
                ),
              )),
          TextButton(
            onPressed: () {
              executeWithFetchClient();
            },
            key: const Key('executeFetchButton'),
            child: Container(
              color: Colors.lightBlue,
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
              child: const Text(
                'ExecuteFetch',
                style: TextStyle(color: Colors.white, fontSize: 13.0),
              ),
            ),
          ),
        ]),
      ]),
    ));
  }
}

此代码展示了如何初始化和使用reCAPTCHA Enterprise客户端，并获取验证令牌。通过点击按钮，用户可以触发不同的reCAPTCHA操作，如初始化客户端、获取客户端、执行标准操作或自定义操作。每个操作的结果都会显示在界面上，以便用户查看验证状态和生成的令牌。

希望这个示例能帮助您更好地理解和使用recaptcha_enterprise_flutter插件。如果有任何问题或需要进一步的帮助，请随时提问！