Flutter接入V3架构_验证码(Captcha)-阿里云帮助中心

随着混合模式移动应用（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示例