如何让Flutter应用实现网站身份认证并获取会话Cookie数据？

问题背景 #

我是Flutter新手，正在开发一款工时记录APP（含加班统计功能），UI已完成，但卡在身份认证环节：目标数据仅能通过网页端获取，无官方API；但发现网页门户认证后，可通过特定URL下载JSON数据，该请求依赖认证生成的会话Cookie，且Cookie仅允许访问指定URL。之前尝试手动操作Cookie、WebView认证后跳转、JS复制Cookie均失败，卡壳3周，急需可行思路。

核心挑战 #

无官方API接口，必须模拟网页端的认证流程获取会话Cookie，再携带Cookie请求目标JSON数据。

可行解决方案 #

方案1：用webview_flutter结合CookieManager获取认证Cookie #

这是最贴近网页真实认证流程的方式，解决你之前WebView尝试失败的关键是正确捕获登录成功后的Cookie：

1. 添加依赖到pubspec.yaml：

dependencies:
  webview_flutter: ^4.4.0
  flutter_webview_plugin: ^0.4.0 # 辅助Cookie管理

2. 加载网页登录门户，监听登录成功事件：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

final flutterWebviewPlugin = FlutterWebviewPlugin();

void _loadLoginPage() {
  flutterWebviewPlugin.launch('https://你的门户登录URL');
  
  // 监听页面跳转，判断是否登录成功（替换为登录后特征URL）
  flutterWebviewPlugin.onUrlChanged.listen((String url) {
    if (url.contains('/portal/home')) {
      // 获取目标域名的Cookie
      flutterWebviewPlugin.getCookies('https://目标JSON的域名').then((cookies) {
        // 拼接Cookie字符串
        String cookieStr = cookies.map((c) => '${c.name}=${c.value}').join('; ');
        // 保存Cookie并关闭WebView
        _saveCookie(cookieStr);
        flutterWebviewPlugin.close();
        _fetchJsonData(cookieStr);
      });
    }
  });
}

3. 携带Cookie请求JSON数据：

import 'package:http/http.dart' as http;

Future<void> _fetchJsonData(String cookie) async {
  final response = await http.get(
    Uri.parse('https://目标JSON的URL'),
    headers: {
      'Cookie': cookie,
      // 可添加网页请求的必要头，比如User-Agent
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...'
    },
  );
  
  if (response.statusCode == 200) {
    // 处理JSON数据
    print(response.body);
  } else {
    print('请求失败：${response.statusCode}');
  }
}

方案2：用http库模拟网页登录请求直接获取Cookie #

如果能抓包分析网页登录的请求细节，这个方案更轻量，无需WebView：

1. 用Charles/Fiddler抓包，记录网页登录的：

   • POST请求URL
   • 表单参数（如username、password、__VIEWSTATE等动态参数）
   • 请求头（如Content-Type、Referer）

2. 模拟登录请求，提取会话Cookie：

import 'package:http/http.dart' as http;

Future<String?> _loginAndGetCookie() async {
  // 先请求登录页，提取动态参数
  final loginPageResponse = await http.get(Uri.parse('https://门户登录URL'));
  String viewState = _extractParam(loginPageResponse.body, '__VIEWSTATE');
  String token = _extractParam(loginPageResponse.body, '__RequestVerificationToken');

  // 提交登录请求
  final loginResponse = await http.post(
    Uri.parse('https://登录请求的POST URL'),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Referer': 'https://门户登录URL',
    },
    body: {
      'username': '你的账号',
      'password': '你的密码',
      '__VIEWSTATE': viewState,
      '__RequestVerificationToken': token,
      // 其他抓包得到的表单参数
    },
  );

  // 从响应头提取会话Cookie
  if (loginResponse.headers.containsKey('set-cookie')) {
    String setCookie = loginResponse.headers['set-cookie']!;
    List<String> cookieParts = setCookie.split(';');
    String sessionCookie = cookieParts.where((part) => part.contains('ASP.NET_SessionId') || part.contains('JSESSIONID')).join('; ');
    return sessionCookie;
  }
  return null;
}

// 辅助函数：从HTML中提取指定参数
String _extractParam(String html, String paramName) {
  RegExp regExp = RegExp(r'<input type="hidden" name="' + paramName + '" id="' + paramName + '" value="([^"]+)"');
  Match? match = regExp.firstMatch(html);
  return match?.group(1) ?? '';
}

3. 用获取到的Cookie请求JSON数据（同方案1的_fetchJsonData方法）。

方案3：使用flutter_inappwebview增强WebView功能 #

如果webview_flutter的Cookie获取有问题，试试功能更全面的flutter_inappwebview：

1. 添加依赖：

dependencies:
  flutter_inappwebview: ^6.0.0

2. 加载登录页并获取Cookie：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebViewController? webViewController;

void _loadLoginPage() async {
  webViewController?.loadUrl(urlRequest: URLRequest(url: Uri.parse('https://门户登录URL')));
  
  // 监听页面加载完成，获取Cookie
  webViewController?.addJavaScriptHandler(
    handlerName: 'loginSuccess',
    callback: (args) async {
      List<Cookie> cookies = await webViewController!.getCookies(url: Uri.parse('https://目标JSON的域名'));
      String cookieStr = cookies.map((c) => '${c.name}=${c.value}').join('; ');
      _fetchJsonData(cookieStr);
      // 关闭WebView
    },
  );
}

关键注意事项 #

• Cookie域名匹配：获取的Cookie必须与目标JSON URL的域名完全一致（含子域名），否则服务器会拒绝请求。
• Cookie有效期：会话Cookie通常会在关闭浏览器后失效，需要处理Cookie过期后重新认证的逻辑。
• 动态参数处理：网页登录可能包含CSRF令牌、VIEWSTATE等动态参数，必须从登录页HTML中提取，不能硬编码。
• HTTPS证书：内网门户可能需要忽略SSL证书验证（仅测试环境使用），配置如下：

import 'dart:io';

final http.Client client = http.Client()
  ..badCertificateCallback = (X509Certificate cert, String host, int port) => true;

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