webview_flutter_wkwebview3.17.0 --Cookie认证

场景描述:
flutter app 中,也就是使用flutter框架搭建的移动app，已经设置了用户登录。
那么使用flutter webview html 页面时，也可以通过本地的登录信息来进行这个html页面的登录。
webview 就是通过模拟浏览器的方式来在应用中打开html页面。
使用移动app 中的登录数据来进行登录这个html 页面，那么用户就不需要手动二次登录了。

1用户登录移动应用：用户在 Flutter 应用中完成登录流程，输入用户名和密码。应用向后端服务器发送登录请求，后端验证成功后返回认证信息（如 auth_token 或 session_id）。应用将认证信息存储在本地（如 SharedPreferences 或 SecureStorage）。2加载 WebView：用户在 Flutter 应用中点击某个按钮或链接，触发加载 WebView 的操作。WebView 需要加载一个需要认证的 HTML 页面（例如 https://www.company.com/dashboard）。3传递认证信息：从本地存储中读取用户的认证信息（如 auth_token）。通过技术手段（如设置 Cookie 或注入 JavaScript）将认证信息传递给 WebView。4自动登录 HTML 页面：WebView 加载目标 URL 时，认证信息会被自动附加到请求中。后端服务器验证认证信息，如果有效，则允许用户访问 HTML 页面，无需手动登录。5用户体验：用户无需在 WebView 中再次输入用户名和密码，实现了无缝的登录体验。完整的执行流程
1用户登录移动应用：用户输入用户名和密码，点击登录按钮。应用向后端发送登录请求，获取 auth_token 并存储在本地。2触发 WebView 加载：用户在应用中点击某个按钮，触发加载 WebView 的操作。3设置 Cookie：从本地存储中读取 auth_token。使用 WebViewCookieManager 设置 Cookie。4加载 HTML 页面：初始化 WebViewController 并加载目标 URL。WebView 加载页面时，Cookie 会被自动附加到请求中。5后端验证：后端服务器接收到请求后，验证 Cookie 中的 auth_token。如果验证通过，返回 HTML 页面内容；否则，返回登录页面。6用户访问页面：用户无需手动登录，直接访问 HTML 页面。

企业应用集成：

// 设置Cookie认证
cookieManager.setCookie(WebViewCookie(name: 'auth_token',value: 'xxxx',domain: '.company.com'
));

webview_flutter_wkwebview 是一个用于在 Flutter 应用中嵌入 WebView 的插件，特别适用于 iOS 平台。3.17.0 是该插件的一个版本号。在企业应用集成中，设置 Cookie 是一种常见的需求，特别是在需要用户认证的场景中。通过设置 Cookie，可以在 WebView 中自动传递认证信息，避免用户重复登录。

使用场景

在企业应用中，通常会有一个 Web 应用（如公司内部的管理系统、CRM 系统等），用户需要通过移动应用访问这些 Web 应用。为了确保用户在移动应用中已经登录，可以通过设置 Cookie 的方式将用户的认证信息传递给 WebView，从而实现无缝的认证流程。

详细调用方法

1添加依赖：
首先，在 pubspec.yaml 文件中添加 webview_flutter 依赖：

dependencies:flutter:sdk: flutterwebview_flutter: ^3.0.0

导入包：
在 Dart 文件中导入 webview_flutter 包：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_wkwebview/webview_cookie_manager.dart';

设置 Cookie：
使用 WebViewCookieManager 来设置 Cookie。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_wkwebview/webview_cookie_manager.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: WebViewExample(),);}
}class WebViewExample extends StatefulWidget {@override_WebViewExampleState createState() => _WebViewExampleState();
}class _WebViewExampleState extends State<WebViewExample> {late WebViewController _controller;final WebViewCookieManager cookieManager = WebViewCookieManager();@overridevoid initState() {super.initState();_setCookie();}Future<void> _setCookie() async {await cookieManager.setCookie(WebViewCookie(name: 'auth_token',value: 'xxxx', // 替换为实际的认证 tokendomain: '.company.com', // 替换为实际的域名));// 初始化 WebView 控制器_controller = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..setNavigationDelegate(NavigationDelegate(onPageFinished: (String url) {print('Page finished loading: $url');},),)..loadRequest(Uri.parse('https://www.company.com')); // 替换为实际的 URL}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('WebView Example'),),body: WebView(controller: _controller,),);}
}

设置流程

初始化 WebViewCookieManager：
在 initState 中初始化 WebViewCookieManager，并调用 setCookie 方法设置 Cookie。
设置 Cookie：
使用 setCookie 方法设置 Cookie，确保在 WebView 加载页面之前完成。
加载 WebView：
在设置完 Cookie 后，初始化 WebViewController 并加载目标 URL。