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

Features

仅需提供您的hCaptcha站点密钥URL和一个回调函数来接收令牌。
在WebView中呈现hCaptcha挑战，不会中断应用程序的流程。
利用hCaptcha的先进技术来区分人类和机器人。
允许您配置hCaptcha挑战以匹配应用程序的品牌。

Getting Started

要使用HCaptchaWidget，请在pubspec.yaml文件中添加以下依赖项：

dependencies:
  hcaptcha_widget: ^0.0.6

或者运行以下命令：

flutter pub add hcaptcha_widget

在您的服务器上创建一个包含您的hCaptcha站点密钥的静态HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hCaptcha Verification</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, body {
          height: 100%;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f5f5f5;
        }
        .h-captcha {
          width: 90%;
          max-width: 400px;
          margin: 0 auto;
        }
    </style>
    <script src="https://hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<div class="h-captcha" data-sitekey="YOUR-SITEKEY-FROM-hCaptcha-DASH" data-callback="captchaCallback"></div>
<script>
    function captchaCallback(response) {
      if (typeof Captcha !== "undefined") {
        Captcha.postMessage(response);
      } else {
        console.error("Captcha object not found. Integration error?");
      }
    }
</script>
</body>
</html>

Usage

要使用HCaptchaWidget，只需创建小部件的一个实例并传入站点密钥URL和一个用于接收令牌的回调函数：

HCaptchaWidget(
  siteKeyUrl: 'https://example.com/sitekey',
  onTokenReceived: (token) {
    // 处理接收到的令牌
  },
)

完整示例Demo

下面是一个完整的Flutter应用示例，演示如何集成和使用hcaptcha_widget插件：

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: TextButton(
          style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
          ),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) {
                  return HCaptchaWidget(
                    siteKeyUrl: 'https://YOUR-DOMAIN.com/hCaptcha-flutter.html',
                    onTokenReceived: (token) {
                      if (token != null) {
                        // 使用接收到的令牌（例如发送到后端）
                        print('hCaptcha token: $token');
                      } else {
                        // 处理用户取消或遇到错误的情况
                        print('hCaptcha verification cancelled or failed.');
                      }
                    },
                  );
                },
              ),
            );
          },
          child: const Text('Button'),
        ),
      ),
    );
  }
}

请确保将YOUR-SITEKEY-FROM-hCaptcha-DASH替换为您从hCaptcha获取的实际站点密钥，并将https://YOUR-DOMAIN.com/hCaptcha-flutter.html替换为实际托管HTML页面的URL。这样，您就可以成功地在Flutter应用中集成和使用hCaptcha进行验证码验证了。

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

sinazl 1楼•4 小时前作者

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

当然，以下是如何在Flutter项目中使用hcaptcha_widget插件来进行验证码验证的一个示例。hcaptcha_widget插件允许你集成hCaptcha验证码到你的Flutter应用中，以增强应用的安全性。

首先，你需要确保你的Flutter环境已经设置好，并且已经有一个正在开发的Flutter项目。

步骤 1: 添加依赖

在你的pubspec.yaml文件中添加hcaptcha_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  hcaptcha_widget: ^最新版本号  # 请替换为实际的最新版本号

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

步骤 2: 配置hCaptcha

你需要在hCaptcha官网注册并获取你的站点密钥（site key）和秘密密钥（secret key）。这些密钥将用于验证用户输入的验证码。

步骤 3: 使用hCaptcha Widget

在你的Flutter应用中，你可以按照以下方式使用hcaptcha_widget：

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

void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _siteKey = '你的站点密钥';  // 替换为你的站点密钥
  String _token = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hCaptcha Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 显示hCaptcha Widget
                final result = await HCaptchaWidget.show(
                  siteKey: _siteKey,
                );
                if (result != null) {
                  setState(() {
                    _token = result;
                  });
                  // 在这里发送_token到你的服务器进行验证
                  // 通常你会发送一个POST请求到你的后端，后端将使用你的secret key来验证token
                  print('Captcha token: $_token');
                }
              },
              child: Text('Show hCaptcha'),
            ),
            if (_token.isNotEmpty)
              Text(
                'Captcha Token: $_token',
                style: TextStyle(fontSize: 18),
              ),
          ],
        ),
      ),
    );
  }
}

步骤 4: 验证Token

在Flutter前端获取到_token后，你需要将其发送到你的服务器进行验证。在服务器端，你将使用hCaptcha提供的API和你的秘密密钥来验证这个token的有效性。这通常涉及到发送一个HTTP POST请求到hCaptcha的验证端点。

以下是一个简单的服务器端验证示例（使用Node.js和Express）：

const express = require('express');
const axios = require('axios');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());

app.post('/verify-captcha', async (req, res) => {
  const { token } = req.body;
  const secretKey = '你的秘密密钥';  // 替换为你的秘密密钥

  try {
    const response = await axios.post('https://hcaptcha.com/siteverify', {
      secret: secretKey,
      response: token,
    });

    if (response.data.success) {
      res.status(200).send('Captcha verified successfully.');
    } else {
      res.status(400).send('Captcha verification failed.');
    }
  } catch (error) {
    res.status(500).send('Internal server error.');
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

注意：在实际应用中，你应该保护好你的秘密密钥，不要将其暴露在客户端代码中。

这个示例展示了如何在Flutter前端集成hCaptcha，并在服务器端进行验证的基本流程。根据你的具体需求，你可能需要调整代码来实现更复杂的逻辑。