Integrate Flutter for OpenHarmony with the V3 architecture

1. Add the flutter_inappwebview dependency

In pubspec.yaml, add the WebView plugin that supports the HarmonyOS platform:

dependencies:
  flutter:
  sdk: flutter
  # Use the WebView plugin that supports the HarmonyOS platform
  flutter_inappwebview:
    git:
      url: https://gitcode.com/openharmony-sig/flutter_inappwebview
      path: "flutter_inappwebview"

2. Declare network permissions

In ohos/entry/src/main/module.json5, add the following permissions under requestPermissions:

{
  "module": {
    "name": "entry",
    "type": "entry",
    // Other configurations
    // ...
    "requestPermissions": [
      {"name": "ohos.permission.INTERNET"},
      {"name": "ohos.permission.GET_NETWORK_INFO"}
    ]
  }
}

3. Create the Captcha page

Create a Flutter widget that loads the HTML5 page in an InAppWebView and registers the testInterface handler to receive verification parameters:

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.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> {
  InAppWebViewController? _controller;

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

  // Handle the Captcha verification result
  void _handleCaptchaResult(dynamic captchaVerifyParam) {
    try {
      print('Received Captcha parameters: $captchaVerifyParam');

      // Check if the parameters are empty
      if (captchaVerifyParam == null) {
        throw Exception('Received empty verification parameters');
      }

      // Directly send the verification parameters to the server
      _sendToServer(captchaVerifyParam);

    } catch (e) {
      print('Failed to process Captcha parameters: $e');
      _showSnackBar('Failed to process verification parameters: $e', isError: true);
    }
  }

  // Send verification parameters to the server (example)
  Future<void> _sendToServer(dynamic captchaVerifyParam) async {
    try {
      // Call your server-side API for secondary authentication here
      print('Preparing to send to the server for verification: $captchaVerifyParam');

      // Simulate successful server-side verification
      _showSnackBar('Server-side verification successful', isError: false);
    } catch (e) {
      print('Server-side verification failed: $e');
      _showSnackBar('Server-side verification failed: $e', isError: true);
    }
  }

  void _showSnackBar(String message, {bool isError = false}) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: isError ? Colors.red : Colors.green,
        duration: const Duration(seconds: 3),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: _buildWebViewContent(),
    );
  }

  // Build the WebView content
  Widget _buildWebViewContent() {
    return Stack(
      children: [
        InAppWebView(
          initialData: InAppWebViewInitialData(
            data: "",
          ),
          initialOptions: InAppWebViewGroupOptions(
            crossPlatform: InAppWebViewOptions(
              javaScriptEnabled: true,
              useShouldOverrideUrlLoading: true,
            ),
          ),
          onWebViewCreated: (InAppWebViewController controller) async {
            _controller = controller;

            // Add a JavaScript handler
            _controller!.addJavaScriptHandler(
              handlerName: 'testInterface',
              callback: (args) {
                if (args.isNotEmpty) {
                  _handleCaptchaResult(args[0]);
                }
              },
            );

            // Load the HTML content
            try {
              String htmlContent = await rootBundle.loadString('assets/captcha.html');
              await _controller!.loadData(data: htmlContent, baseUrl: WebUri('https://localhost'));
            } catch (e) {
              print('Failed to load HTML: $e');
              _showSnackBar('Failed to load Captcha page: $e', isError: true);
            }
          },
        ),
      ],
    );
  }
}

4. Register 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'),
    );
  }
}

5. Declare the HTML asset

In pubspec.yaml, register the HTML file as an asset:

flutter:
  assets:
    - assets/index.html

6. Build and run

Compile and run the project:

flutter build hap --debug