Flutter验证码验证插件flutter_recaptcha_v2的使用

简介

这是一个用于Google ReCaptcha V2的Flutter插件。它允许在Flutter应用程序中集成Google验证码功能。

使用步骤

1. 获取API密钥和密钥

首先，您需要从Google ReCaptcha网站获取您的API密钥和密钥。

• 访问：https://www.google.com/recaptcha
• 创建您的站点，并记录下API密钥（apiKey）和密钥（apiSecret）。

注意：确保将您的域名添加到ReCaptcha设置中，或者添加默认域：recaptcha-flutter-plugin.firebaseapp.com。

2. 配置插件

在使用插件时，可以通过配置参数自定义插件行为。以下是一些常用配置项：

pluginURL

您可以指定一个自定义的插件URL，用于替换默认的ReCaptcha域名：

pluginURL: "https://mypersonalurl.com"

visibleCancelBottom

是否显示取消按钮，默认为false。如果希望显示取消按钮，请设置为true：

visibleCancelBottom: true

textCancelButtom

自定义取消按钮的文字：

textCancelButtom: "取消验证码"

3. 示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中集成ReCaptcha V2插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ReCaptcha Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Google ReCaptcha Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String verifyResult = ""; // 用于存储验证结果
  RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 按钮触发验证码弹出
                RaisedButton(
                  child: Text("显示验证码"),
                  onPressed: () {
                    recaptchaV2Controller.show(); // 显示验证码
                  },
                ),
                // 显示验证结果
                Text(verifyResult),
              ],
            ),
          ),
          // 集成ReCaptcha V2插件
          RecaptchaV2(
            apiKey: "YOUR_API_KEY", // 替换为您的API密钥
            apiSecret: "YOUR_API_SECRET", // 替换为您的API密钥
            pluginURL: "https://mypersonalurl.com", // 自定义插件URL
            visibleCancelBottom: true, // 显示取消按钮
            textCancelButtom: "取消验证码", // 自定义取消按钮文字
            controller: recaptchaV2Controller,
            onVerifiedError: (err) {
              print("验证错误: $err");
            },
            onVerifiedSuccessfully: (success) {
              setState(() {
                if (success) {
                  verifyResult = "验证成功！";
                } else {
                  verifyResult = "验证失败！";
                }
              });
            },
          ),
        ],
      ),
    );
  }
}

4. 运行效果

运行上述代码后，点击“显示验证码”按钮，会弹出ReCaptcha V2验证框。用户完成验证后，验证结果显示在页面上。

注意事项

1. 隐藏和显示验证码
   默认情况下，RecaptchaV2插件是隐藏的。您需要通过RecaptchaV2Controller来控制其显示与隐藏：

   recaptchaV2Controller.show(); // 显示验证码
   recaptchaV2Controller.hide(); // 隐藏验证码