如何限制Flutter考勤应用仅在企业WiFi网络下可访问？

核心思路 #

通过检测当前网络类型及WiFi SSID，仅允许连接指定企业WiFi的用户访问应用；非WiFi网络或未连接指定WiFi时，展示限制提示并阻止进入主应用。

实现步骤 #

1. 添加依赖包

在pubspec.yaml中引入用于网络检测和WiFi信息获取的依赖：

dependencies:
  flutter:
    sdk: flutter
  wifi_info_flutter: ^2.0.1  # 获取WiFi SSID信息
  connectivity_plus: ^5.0.1   # 检测网络连接类型

2. 配置平台权限

• Android：在android/app/src/main/AndroidManifest.xml中添加权限：

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- Android 12+ 需定位权限获取SSID -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

• iOS：在ios/Runner/Info.plist中添加权限描述：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取WiFi信息以验证企业网络身份</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>需要获取WiFi信息以验证企业网络身份</string>

3. 核心代码实现

在应用启动入口（main.dart）中完成网络验证逻辑：

import 'package:flutter/material.dart';
import 'package:wifi_info_flutter/wifi_info_flutter.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'dart:io';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 可配置的企业WiFi SSID列表
  const allowedEnterpriseSSIDs = {"Corp-WiFi-Office", "Corp-WiFi-Remote"};
  
  // 第一步：检测网络类型是否为WiFi
  final connectivityResult = await Connectivity().checkConnectivity();
  if (connectivityResult != ConnectivityResult.wifi) {
    runApp(const RestrictedAccessPage(message: "请连接企业WiFi网络以使用应用"));
    // 延迟退出，确保用户看到提示
    Future.delayed(const Duration(seconds: 3), () {
      Platform.isAndroid ? SystemNavigator.pop() : exit(0);
    });
    return;
  }
  
  // 第二步：获取当前WiFi SSID并验证
  String? currentSSID;
  try {
    currentSSID = await WifiInfo().getWifiName();
    // 去除Android SSID默认带的引号
    currentSSID = currentSSID?.replaceAll('"', '');
  } catch (_) {
    runApp(const RestrictedAccessPage(message: "无法获取WiFi信息，请检查权限设置"));
    return;
  }
  
  if (currentSSID == null || !allowedEnterpriseSSIDs.contains(currentSSID)) {
    runApp(const RestrictedAccessPage(message: "请连接企业指定的WiFi网络"));
    Future.delayed(const Duration(seconds: 3), () {
      Platform.isAndroid ? SystemNavigator.pop() : exit(0);
    });
    return;
  }
  
  // 验证通过，启动主考勤应用
  runApp(const AttendanceMainApp());
}

// 限制访问时的提示页面
class RestrictedAccessPage extends StatelessWidget {
  final String message;
  const RestrictedAccessPage({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        body: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Text(
              message,
              style: const TextStyle(fontSize: 18, color: Colors.redAccent),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

// 主考勤应用示例页面
class AttendanceMainApp extends StatelessWidget {
  const AttendanceMainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("企业考勤系统")),
        body: const Center(child: Text("欢迎使用考勤应用")),
      ),
    );
  }
}

4. 进阶优化建议

• 动态更新SSID：将允许的SSID列表存储在远程服务器，应用启动时拉取，避免硬编码导致的版本更新问题。
• 实时网络监听：在主应用中添加Connectivity监听，当用户切换网络时自动重新验证，不符合条件则跳转至限制页面。
• 权限引导：若权限未授予，添加引导用户开启权限的交互，提升用户体验。

内容的提问来源于stack exchange，提问作者Aman Srivastava