標準Flutter接入V3架構 - Captcha

隨著混合模式行動裝置 App（Hybrid App）開發技術的日益成熟，您可以通過在App業務中啟用WebView組件的方式，直接接入移動端HTML5業務類型的阿里雲驗證碼2.0，實現App業務中的人機對抗。本文介紹如何在Flutter開發的App中接入驗證碼2.0。

背景資訊

移動端HTML5業務類型的驗證碼2.0具備快速迭代、強相容性等優勢。通過這種方式在App業務中接入驗證碼2.0服務，您無需再為Native App組件中的各種依賴、引用導致的相容性問題而感到困擾，而移動端HTML5驗證碼2.0的快速迭代也將協助您的App業務更好地應對強對抗情境。

接入流程

在Flutter App中接入HTML5應用類型的驗證碼2.0主要包含以下步驟：

HTML5頁面用戶端：在HTML5業務頁面用戶端整合驗證碼2.0。
HTML5頁面對應的服務端：在服務端整合驗證碼2.0SDK後，調用VerifyIntelligentCaptcha介面發起驗證碼二次驗證。
Flutter App端：利用WebView組件在App應用中開啟並部署需要接入驗證碼2.0的業務頁面。

前提條件

已開通阿里雲驗證碼2.0服務。
已建立接入方式為Webview+H5（支持APP/小程序接入）的驗證情境。
使用Flutter 2.0及以上版本。
已安裝webview_flutter外掛程式。

操作步驟

步驟一：在HTML5業務頁面用戶端整合阿里雲驗證碼2.0

在HTML5業務用戶端代碼中，整合驗證碼2.0提供的用戶端接入代碼。關於HTML5業務用戶端整合方式，請參見Web和H5用戶端V3架構接入。
說明
如果您的業務架構是V2版本，請參見Web和H5用戶端V2架構接入。

在success回呼函數中，添加對應的JavaScript函數，將驗簽參數返回給步驟3中自訂的訊息傳遞介面testJsInterface。當Flutter介面擷取到驗簽參數後，即可在Flutter App側發送業務或驗簽請求並處理驗證結果。

// success回呼函數
function success(captchaVerifyParam) {
    // 入參為驗簽captchaVerifyParam
    // 將驗簽參數返回自訂Java介面
    console.log(captchaVerifyParam);
    
    if (window.testInterface) {
        window.testInterface.postMessage(captchaVerifyParam);
    }
}

步驟二：在HTML5頁面對應的服務端整合阿里雲驗證碼2.0

在HTML5業務頁面對應的服務端中，整合驗證碼2.0提供的服務端SDK後，調用VerifyIntelligentCaptcha介面發起業務驗簽。具體操作，請參見服務端接入。

步驟三：在Flutter App端開啟並部署業務頁面

在pubspec.yaml檔案中添加webview_flutter依賴：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.13.0  # 使用最新版本

然後執行依賴安裝：

flutter pub get

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"
  ...
  >

建立一個Flutter頁面來載入驗證碼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 = "等待驗證";
  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)
      // 添加訊息傳遞介面
      ..addJavaScriptChannel('testInterface', onMessageReceived: (JavaScriptMessage message) {
        // 列印完整的驗證參數到控制台
        print('收到驗證碼參數: ${message.message}');

        // 在這裡處理驗證結果，可以發送到您的服務端進行驗簽
        setState(() {
          _verifyResult = "已驗證";
        });
      })
      ..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('驗證狀態: $_verifyResult', style: const TextStyle(fontSize: 16)),
                const SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () {
                    if (_controller != null) {
                      _controller!.runJavaScript('initCaptcha()');
                      setState(() {
                        _verifyResult = "已重設驗證碼";
                      });
                    }
                  },
                  child: const Text('重設驗證碼'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

在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'),
    );
  }
}

更新pubspec.yaml檔案，添加HTML資源：
```
flutter:
  assets:
    - assets/index.html
```

完成如上配置後，您的Flutter App已接入驗證碼2.0。您可以在您的Flutter App中使用驗證碼，測實驗證效果。如果能正常使用，表示驗證碼接入成功。

Flutter V3架構Demo樣本下載

Flutter App接入Demo樣本