Captcha:Flutter integration with the V3 architecture

Step 1: Integrate Alibaba Cloud Captcha 2.0 on the client side of the HTML5 business page

1. In your HTML5 page, integrate the client-side code for Captcha 2.0. For more information, see Integrate with Captcha using the V3 architecture for web and H5 clients.

   Note

   If your service uses the V2 architecture, see Integrate with Captcha using the V2 architecture for web and H5 clients.

2. In the success callback function, add a JavaScript function to return the signature verification parameters to the custom Message Passing Interface testJsInterface, which is defined in Step 3. After the Flutter interface receives the signature verification parameters, you can send a business request or a signature verification request from the Flutter app and process the result.

   // success callback function
   function success(captchaVerifyParam) {
       // The input parameter is captchaVerifyParam.
       // Return the signature verification parameter to the custom JavaScript interface.
       console.log(captchaVerifyParam);
       
       if (window.testInterface) {
           window.testInterface.postMessage(captchaVerifyParam);
       }
   }

Step 2: Integrate Alibaba Cloud Captcha 2.0 on the server for the HTML5 page

On your application server, integrate the server-side SDK for Captcha 2.0. Then, call the VerifyIntelligentCaptcha API operation to initiate signature verification. For more information, see Server-side integration.

Step 3: Enable and deploy the business page in the Flutter app

1. Add the webview_flutter dependency to the pubspec.yaml file:

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

   Then, install the dependency:

   flutter pub get

2. Configure the Android platform. Add network permissions to the android/app/src/main/AndroidManifest.xml file:

   <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. Create a Flutter page to load the Captcha WebView:

   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 Message Passing Interface.
         ..addJavaScriptChannel('testInterface', onMessageReceived: (JavaScriptMessage message) {
           // Print the complete verification parameters to the console.
           print('Received Captcha parameters: ${message.message}');
   
           // Process the verification result here. You can send it to your server for signature verification.
           setState(() {
             _verifyResult = "Verified";
           });
         })
         ..setNavigationDelegate(
           NavigationDelegate(
             onPageFinished: (url) {
               setState(() {
                 _isLoading = false;
               });
             },
           ),
         )
         // Load the local HTML file. You can also load an 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. 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'),
       );
     }
   }
   

5. Update the pubspec.yaml file to add the HTML resource:

   flutter:
     assets:
       - assets/index.html

After you complete these configurations, your Flutter app is integrated with Captcha 2.0. Test the Captcha verification in your Flutter app. If the Captcha functions as expected, the integration is successful.