Integrate Captcha V3 into a Flutter application

Add the webview_flutter dependency

In pubspec.yaml, add webview_flutter under dependencies:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.13.0  # Use the latest version

Install the dependency:

flutter pub get

Configure Android network permissions

Add the following permissions to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<application
  ...
  android:usesCleartextTraffic="true"
  ...
  >

Create the Captcha WebView page

Create captcha_page.dart. The key configuration points are:

• JavaScriptMode.unrestricted — required for Captcha 2.0 scripts to execute.

• addJavaScriptChannel('testInterface', ...) — receives captchaVerifyParam from the HTML5 success callback.

• loadHtmlString(htmlContent, baseUrl: 'https://your-domain.com') — loads the local HTML5 page with a trusted origin.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/services.dart';

class CaptchaPage extends StatefulWidget {
  const CaptchaPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<CaptchaPage> createState() => _CaptchaPageState();
}

class _CaptchaPageState extends State<CaptchaPage> {
  WebViewController? _controller;
  String _verifyResult = "Waiting for verification";
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _initWebView();
  }

  Future<void> _initWebView() async {
    // Load the local HTML file.
    String htmlContent = await rootBundle.loadString('assets/index.html');

    // Configure the WebView controller.
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // Add a JavaScript channel to receive captchaVerifyParam from the HTML5 page.
      ..addJavaScriptChannel('testInterface', onMessageReceived: (JavaScriptMessage message) {
        // Print the complete verification parameters to the console.
        print('Received Captcha parameters: ${message.message}');

        // Forward captchaVerifyParam to your server for secondary authentication.
        setState(() {
          _verifyResult = "Verified";
        });
      })
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (url) {
            setState(() {
              _isLoading = false;
            });
          },
        ),
      )
      // Load the local HTML file. You can also load an HTML5 URL.
      ..loadHtmlString(htmlContent, baseUrl: 'https://your-domain.com');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _controller == null
          ? const Center(child: CircularProgressIndicator())
          : Column(
        children: [
          Expanded(
            child: Stack(
              children: [
                WebViewWidget(controller: _controller!),
                if (_isLoading)
                  const Center(
                    child: CircularProgressIndicator(),
                  ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Text('Verification status: $_verifyResult', style: const TextStyle(fontSize: 16)),
                const SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () {
                    if (_controller != null) {
                      _controller!.runJavaScript('initCaptcha()');
                      setState(() {
                        _verifyResult = "Captcha reset";
                      });
                    }
                  },
                  child: const Text('Reset Captcha'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Use the Captcha page in main.dart

import 'package:flutter/material.dart';
import 'captcha_page.dart';  // Import the Captcha page.

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Alibaba Cloud Captcha Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CaptchaPage(title: 'Alibaba Cloud Captcha Demo'),
    );
  }
}

Register the HTML5 asset

In pubspec.yaml, add the HTML5 file path under flutter:

flutter:
  assets:
    - assets/index.html