OpenHarmony版Flutter接入V3架构

步骤一：在HTML5业务页面客户端集成验证码2.0

1. 在HTML5业务客户端代码中，集成验证码2.0提供的客户端接入代码。关于HTML5业务客户端集成方式，请参见Web和H5客户端V3架构接入。

   说明

   如果您的业务架构是V2版本，请参见Web和H5客户端V2架构接入。

2. 在success回调函数中，添加对应的JavaScript函数，将验签参数返回给步骤3中自定义的消息传递接口testJsInterface。当Flutter接口获取到验签参数后，即可在Flutter App侧发送业务或验签请求并处理验证结果。

   // success回调函数
   function success(captchaVerifyParam) {
       // 发送验证结果给Flutter（使用flutter_inappwebview的通信方式）
       if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
           window.flutter_inappwebview.callHandler('testInterface', captchaVerifyParam);
       }
   }

步骤二：在HTML5页面对应的服务端集成阿里云验证码2.0

在HTML5业务页面对应的服务端中，集成验证码2.0提供的服务端SDK后，调用VerifyIntelligentCaptcha接口发起业务验签。具体操作，请参见服务端接入。

步骤三：在Flutter App端开启并部署业务页面

1. 在pubspec.yaml文件中添加webview_flutter依赖：

   dependencies:
     flutter:
     sdk: flutter
     # 使用支持鸿蒙平台的WebView插件
     flutter_inappwebview:
       git:
         url: https://gitcode.com/openharmony-sig/flutter_inappwebview
         path: "flutter_inappwebview"

2. ohos应用配置：在ohos/entry/src/main/module.json5文件中添加网络权限：

   {
     "module": {
       "name": "entry",
       "type": "entry",
       // 其他配置
       // ...
       "requestPermissions": [
         {"name": "ohos.permission.INTERNET"},
         {"name": "ohos.permission.GET_NETWORK_INFO"}
       ]
     }
   }

3. 创建一个Flutter页面来加载验证码WebView：

   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();
     }
   
     // 处理验证码验证结果
     void _handleCaptchaResult(dynamic captchaVerifyParam) {
       try {
         print('收到验证码参数: $captchaVerifyParam');
         
         // 检查参数是否为空
         if (captchaVerifyParam == null) {
           throw Exception('收到空的验证参数');
         }
         
         // 直接发送验证参数到服务端
         _sendToServer(captchaVerifyParam);
         
       } catch (e) {
         print('处理验证码参数失败: $e');
         _showSnackBar('验证参数处理失败: $e', isError: true);
       }
     }
   
     // 发送验证参数到服务端（示例）
     Future<void> _sendToServer(dynamic captchaVerifyParam) async {
       try {
         // 这里调用您的服务端API进行二次验证
         print('准备发送到服务端验证: $captchaVerifyParam');
         
         // 模拟服务端验证成功
         _showSnackBar('服务端验证成功', isError: false);
       } catch (e) {
         print('服务端验证失败: $e');
         _showSnackBar('服务端验证失败: $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(),
       );
     }
   
   
     // 构建WebView内容
     Widget _buildWebViewContent() {
       return Stack(
         children: [
           InAppWebView(
             initialData: InAppWebViewInitialData(
               data: "",
             ),
             initialOptions: InAppWebViewGroupOptions(
               crossPlatform: InAppWebViewOptions(
                 javaScriptEnabled: true,
                 useShouldOverrideUrlLoading: true,
               ),
             ),
             onWebViewCreated: (InAppWebViewController controller) async {
               _controller = controller;
               
               // 添加JavaScript处理器
               _controller!.addJavaScriptHandler(
                 handlerName: 'testInterface',
                 callback: (args) {
                   if (args.isNotEmpty) {
                     _handleCaptchaResult(args[0]);
                   }
                 },
               );
               
               // 加载HTML内容
               try {
                 String htmlContent = await rootBundle.loadString('assets/captcha.html');
                 await _controller!.loadData(data: htmlContent, baseUrl: WebUri('https://localhost'));
               } catch (e) {
                 print('加载HTML失败: $e');
                 _showSnackBar('加载验证码页面失败: $e', isError: true);
               }
             },
           ),
         ],
       );
     }
   }

4. 在main.dart中使用验证码页面：

   import 'package:flutter/material.dart';
   import 'captcha_page.dart';  // 导入验证码页面
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: '阿里云验证码Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const CaptchaPage(title: '阿里云验证码Demo'),
       );
     }
   }

5. 更新pubspec.yaml文件，添加HTML资源：

   flutter:
     assets:
       - assets/index.html

6. 最后编译并运行项目：

   flutter build hap --debug

完成如上配置后，您的OpenHarmony版Flutter App已接入验证码2.0。您可以在您的Flutter App中使用验证码，测试验证效果。如果能正常使用，表示验证码接入成功。