flutter第二彈，公司要求要先連vpn才能進到我們站，先來試試open vpn吧

眾所周知，Ｃ國的網路環境一天天惡化，不想點辦法公司大家都快沒飯吃了。於是股東們提出個這麽天才的想法，如果連了ＶＰＮ那不就可以繞過管制了嗎？

但骨子裡是前端的我，壓根不相信這事能成，不過轉念一想，既然市面上一堆軟體都可以做到軟體連線VPN，那這件事似乎沒有不可能，好吧那就試試看吧

對VPN協議我不太熟悉，索性選擇我最後一次使用的open vpn，我找到這裡有點資源可以借用，找到你喜歡的國家把ovpn載下來放到靜態資料夾裡

之後開始我們的程式

// add file vpn_webview.dart

import 'package:flutter/material.dart';
import 'package:openvpn_flutter/openvpn_flutter.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class VpnWebViewPage extends StatefulWidget {
  const VpnWebViewPage({Key? key}) : super(key: key);

  @override
  _VpnWebViewPageState createState() => _VpnWebViewPageState();
}

class _VpnWebViewPageState extends State<VpnWebViewPage> {
  late OpenVPN engine;
  InAppWebViewController? webViewController;
  final String webviewUrl = "https://xxxxxx.com/";
  VpnStatus? status;
  VPNStage? stage;
  bool get isVpnConnected => status?.connectedOn != null;

  @override
  void initState() {
    super.initState();
    initPlatformState();
    connectVpn();
  }

  Future<void> initPlatformState() async {
    engine = OpenVPN(
      onVpnStatusChanged: _onVpnStatusChanged,
      onVpnStageChanged: _onVpnStageChanged,
    );

    engine.initialize(
      groupIdentifier: "group.com.laskarmedia.vpnMobile",
      providerBundleIdentifier: "id.laskarmedia.vpnMobileVpnExtension",
      localizedDescription: "VPN by HD",
      lastStage: (stage) {
        print(stage.name);
      },
      lastStatus: (status) {
        print(status);
      },
    );
  }

  void _onVpnStatusChanged(VpnStatus? _status) {
    print('VPN Status: ${status.toString()}');
    setState(() {
      status = _status;
    });
    print('isVpnConnected: ${isVpnConnected}');
  }

  void _onVpnStageChanged(VPNStage? _stage, String string) {
    setState(() {
      stage = _stage;
    });
    if (string == VPNStage.disconnected) {
      connectVpn();
    }
  }

  Future<void> connectVpn() async {
    // 替換為你的 VPN 配置文件路徑，記得去pubspec.yaml增加assets設定
    String vpnConfig =
        await DefaultAssetBundle.of(context).loadString('web/jac_test.ovpn');
    engine.connect(vpnConfig, 'VPN Name');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: !isVpnConnected
            ? const Center(
                child: CircularProgressIndicator(),
              )
            : InAppWebView(
                initialUrlRequest: URLRequest(url: WebUri(webviewUrl)),
                onWebViewCreated: (controller) {
                  webViewController = controller;
                },
                initialSettings: InAppWebViewSettings(
                    mixedContentMode:
                        MixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW),
              ));

  }
}

至於main那邊就只是引入使用，這邊就不演示了。

結果寫完了邏輯也沒啥問題，卻一直沒辦法成功。最終AI大神給予指示，何不試試清快取、模擬器重新啟動、重裝app試試，然後，然後就成功了....

7/15更新

結果維運說Ｃ國也封堵open vpn，建議我嘗試VPN的trojan-go協議....你倒是早說啊，還有你真當我純血android戰士嗎！

我上網爬了很久的文，幾乎沒有文獻說flutter可以做到，於是我拒絕了這項提案，

稍晚一點ＰＭ跑來敲我：ChatGPT說可以，你再試試吧！

王惹花小姐！你是不是沒有被AI唬過！當初想說只是幫點小忙，感覺越來越得寸進尺了！