Captcha:V3 アーキテクチャでの Flutter 統合

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

1. HTML5 ページに、Captcha 2.0 のクライアント側コードを統合します。詳細については、「Web および H5 クライアント向けの V3 アーキテクチャを使用した Captcha との統合」をご参照ください。

   説明

   サービスが V2 アーキテクチャを使用している場合は、「Web および H5 クライアント向けの V2 アーキテクチャを使用した Captcha との統合」をご参照ください。

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

   // 成功コールバック関数
   function success(captchaVerifyParam) {
       // 入力パラメーターは captchaVerifyParam です。
       // カスタム JavaScript インターフェイスに署名検証パラメーターを返します。
       console.log(captchaVerifyParam);
       
       if (window.testInterface) {
           window.testInterface.postMessage(captchaVerifyParam);
       }
   }

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

アプリケーションサーバーに、Captcha 2.0 のサーバーサイド SDK を統合します。次に、VerifyIntelligentCaptcha API 操作を呼び出して署名検証を開始します。詳細については、「サーバーサイド統合」をご参照ください。

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

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

   dependencies:
     flutter:
       sdk: flutter
     webview_flutter: ^4.13.0  # 最新バージョンを使用

   次に、依存関係をインストールします:

   flutter pub get

2. Android プラットフォームを構成します。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"
     ...
     >

3. Captcha WebView を読み込む Flutter ページを作成します:

   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 {
       // ローカル HTML ファイルを読み込みます。
       String htmlContent = await rootBundle.loadString('assets/index.html');
       
       // WebView コントローラーを構成します。
       _controller = WebViewController()
         ..setJavaScriptMode(JavaScriptMode.unrestricted)
         // Message Passing Interface (MPI) を追加します。
         ..addJavaScriptChannel('testInterface', onMessageReceived: (JavaScriptMessage message) {
           // 完全な検証パラメーターをコンソールに出力します。
           print('Received Captcha parameters: ${message.message}');
   
           // ここで検証結果を処理します。サーバーに送信して署名検証を行うことができます。
           setState(() {
             _verifyResult = "Verified";
           });
         })
         ..setNavigationDelegate(
           NavigationDelegate(
             onPageFinished: (url) {
               setState(() {
                 _isLoading = false;
               });
             },
           ),
         )
         // ローカル HTML ファイルを読み込みます。H5 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'),
                   ),
                 ],
               ),
             ),
           ],
         ),
       );
     }
   }
   

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

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