Captcha:V3 アーキテクチャで Flutter for OpenHarmony を統合する

ステップ 1: HTML5 ビジネスページのクライアントに Captcha 2.0 を統合する

1. HTML5 ビジネスページのクライアントのコードに、Captcha 2.0 が提供するクライアントコードを統合します。詳細については、「Web および H5 ページ用のクライアントを統合する (V3 アーキテクチャ)」をご参照ください。

   説明

   ビジネスで V2 アーキテクチャを使用している場合は、「Web および H5 ページ用のクライアントを統合する (V2 アーキテクチャ)」をご参照ください。

2. `success` コールバック関数に、署名検証パラメーターをカスタム Message Passing Interface (MPI) testJsInterface に返す JavaScript 関数を追加します。このインターフェイスはステップ 3で定義されています。Flutter インターフェイスがパラメーターを受信した後、Flutter アプリは署名検証のリクエストを送信し、結果を処理できます。

   // success コールバック関数
   function success(captchaVerifyParam) {
       // 検証結果を Flutter に送信します (flutter_inappwebview の通信メソッドを使用)
       if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
           window.flutter_inappwebview.callHandler('testInterface', captchaVerifyParam);
       }
   }

ステップ 2: HTML5 ページのサーバーに Alibaba Cloud Captcha 2.0 を統合する

HTML5 ビジネスページのサーバーに、Captcha 2.0 が提供するサーバーサイド SDK を統合します。次に、VerifyIntelligentCaptcha API 操作を呼び出して、ビジネスリクエストの署名検証を開始します。詳細については、「サーバーサイド統合」をご参照ください。

ステップ 3: Flutter アプリでビジネスページを有効にしてデプロイする

1. pubspec.yaml ファイルに webview_flutter の依存関係を追加します。

   dependencies:
     flutter:
     sdk: flutter
     # HarmonyOS プラットフォームをサポートする WebView プラグインを使用します
     flutter_inappwebview:
       git:
         url: https://gitcode.com/openharmony-sig/flutter_inappwebview
         path: "flutter_inappwebview"

2. OpenHarmony アプリケーションを構成します: ohos/entry/src/main/module.json5 ファイルに、ネットワーク権限を追加します。

   {
     "module": {
       "name": "entry",
       "type": "entry",
       // その他の構成
       // ...
       "requestPermissions": [
         {"name": "ohos.permission.INTERNET"},
         {"name": "ohos.permission.GET_NETWORK_INFO"}
       ]
     }
   }

3. Captcha WebView を読み込むための Flutter ページを作成します。

   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();
     }
   
     // Captcha 検証結果を処理します
     void _handleCaptchaResult(dynamic captchaVerifyParam) {
       try {
         print('Received Captcha parameters: $captchaVerifyParam');
         
         // パラメーターが空かどうかを確認します
         if (captchaVerifyParam == null) {
           throw Exception('Received empty verification parameters');
         }
         
         // 検証パラメーターをサーバーに直接送信します
         _sendToServer(captchaVerifyParam);
         
       } catch (e) {
         print('Failed to process Captcha parameters: $e');
         _showSnackBar('Failed to process verification parameters: $e', isError: true);
       }
     }
   
     // 検証パラメーターをサーバーに送信します (例)
     Future<void> _sendToServer(dynamic captchaVerifyParam) async {
       try {
         // ここでサーバーサイド API を呼び出して二次認証を行います
         print('Preparing to send to the server for verification: $captchaVerifyParam');
         
         // サーバーサイド検証の成功をシミュレートします
         _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(),
       );
     }
   
   
     // 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('Failed to load HTML: $e');
                 _showSnackBar('Failed to load Captcha page: $e', isError: true);
               }
             },
           ),
         ],
       );
     }
   }

4. main.dart で Captcha ページを使用します。

   import 'package:flutter/material.dart';
   import 'captcha_page.dart';  // Captcha ページをインポートします
   
   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. pubspec.yaml ファイルを更新して HTML リソースを追加します。

   flutter:
     assets:
       - assets/index.html

6. 最後に、プロジェクトをコンパイルして実行します。

   flutter build hap --debug

これらの構成を完了すると、Captcha 2.0 が Flutter for OpenHarmony アプリに統合されます。アプリで検証をテストできます。検証が期待どおりに機能する場合、統合は成功です。