Flutter网络连接插件openconnect_flutter的使用

OpenConnect Flutter插件（仅限iOS）

这是一个用于在iOS上管理OpenConnect VPN连接的Flutter插件。此插件提供了设置、连接、断开连接以及检查VPN连接状态的方法。

特性

• 设置VPN：使用主机名、凭据和协议设置来配置VPN。
• 连接到VPN：建立VPN连接。
• 断开VPN连接：终止活动的VPN会话。
• 检索连接状态：获取最后已知的VPN连接状态。

注意：此插件目前仅支持iOS。

安装

在pubspec.yaml文件中添加该包：

dependencies:
  openconnect_flutter: ^最新版本号

运行以下命令：

flutter pub get

在Dart代码中导入该包：

import 'package:openconnect_flutter/openconnect_flutter.dart';

iOS设置

1. 添加功能

在Runner的目标上添加“网络扩展”功能，并启用“数据包隧道”。

2. 添加新目标

点击底部左下角的+按钮，选择“NETWORK EXTENSION”。并将语言和提供者类型设置为“Objective-C”和“Packet Tunnel”。

3. 向openconnect_extension添加功能

重复步骤1，为前一步创建的新目标（openconnect_extension）添加功能。

4. 添加Pod依赖

打开你的Podfile，并添加以下行：

target 'openconnect_extension' do
  pod 'vpn_adapter_ios', :git => 'https://github.com/NavidShokoufeh/vpn_adapter_ios.git', :tag => '1.0.0'
end

同样，在runner目标中添加相同的行：

target 'Runner' do
pod 'vpn_adapter_ios', :git => 'https://github.com/NavidShokoufeh/vpn_adapter_ios.git', :tag => '1.0.0' 
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  target 'RunnerTests' do
    inherit! :search_paths
  end
end

5. 复制粘贴

打开openconnect_extension > PacketTunnelProvider.m，并复制粘贴以下脚本：

// 在此处粘贴脚本

使用

设置VPN

要配置VPN连接，使用setup方法并传递一个包含所需配置的OpenconnectServer实例：

import 'package:openconnect_flutter/openconnect_flutter.dart';

final openconnectFlutterPlugin = OpenconnectFlutter();

final server = OpenconnectServer(
  host: 'vpn.example.com',
  port: 443,
  username: 'yourUsername',
  password: 'yourPassword',
  iosConfiguration: OpenconnectIOSConfiguration(
    enableCHAP: true,
    enablePAP: false,
    enableTLS: true,
    enableMSCHAP2: true,
  ),
);

bool setupSuccess = await openconnectFlutterPlugin.setup(server: server);
if (setupSuccess) {
  print('VPN setup successful!');
}

连接到VPN

要连接到VPN：

bool connectionSuccess = await openconnectFlutterPlugin.connect();
if (connectionSuccess) {
  print('Connected to VPN successfully!');
}

断开连接

要断开与VPN的连接：

bool disconnectionSuccess = await openconnectFlutterPlugin.disconnect();
if (disconnectionSuccess) {
  print('Disconnected from VPN.');
}

检查连接状态

要获取最后已知的VPN连接状态：

String status = await openconnectFlutterPlugin.lastStatus();
print('Last VPN status: $status');

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:openconnect_flutter/openconnect_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final openconnectFlutterPlugin = OpenconnectFlutter();
  var connectionStatus = "disconnected";

  TextEditingController hostNameController = TextEditingController();
  TextEditingController sslPortController = TextEditingController();
  TextEditingController userNameController = TextEditingController();
  TextEditingController passController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    init();
    setupVpn();
    onStatusChanged();
  }

  init() async {
    connectionStatus =
        await openconnectFlutterPlugin.lastStatus() ?? 'disconnected';
    setState(() {});
  }

  setupVpn() async {
    OpenconnectServer server = OpenconnectServer(
      host: hostNameController.text,
      port: int.parse(
          sslPortController.text.isEmpty ? '443' : sslPortController.text),
      username: userNameController.text,
      password: passController.text,
      iosConfiguration: OpenconnectIOSConfiguration(
        enableMSCHAP2: true,
        enableCHAP: false,
        enablePAP: false,
        enableTLS: false,
      ),
    );
    await openconnectFlutterPlugin.setup(server: server);
  }

  onStatusChanged() {
    openconnectFlutterPlugin.onStatusChanged(
      onConnectedResult: () {
        setState(() {
          connectionStatus = "connected";
        });
      },
      onConnectingResult: () {
        setState(() {
          connectionStatus = "connecting";
        });
      },
      onDisconnectedResult: () {
        setState(() {
          connectionStatus = "disconnected";
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter openconnect vpn example app'),
        ),
        body: Center(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text("connectionStatus : $connectionStatus"),
                ],
              ),
              TextField(
                controller: hostNameController,
                decoration: const InputDecoration(hintText: "host name"),
              ),
              TextField(
                controller: sslPortController,
                decoration: const InputDecoration(hintText: "ssl port"),
              ),
              TextField(
                controller: userNameController,
                decoration: const InputDecoration(hintText: "user name"),
              ),
              TextField(
                controller: passController,
                decoration: const InputDecoration(hintText: "password"),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                      onPressed: () async {
                        await setupVpn();
                        try {
                          await openconnectFlutterPlugin.connect();
                        } catch (e) {
                          debugPrint(e.toString());
                        }
                      },
                      child: const Text("Connect")),
                  ElevatedButton(
                      onPressed: () async {
                        await openconnectFlutterPlugin.disconnect();
                      },
                      child: const Text("Disconnect"))
                ],
              ),
            ],
          ),
        )),
      ),
    );
  }
}