webview_flutter_wkwebview3.17.0 --Cookie认证

场景描述:

flutter app 中,也就是使用flutter框架搭建的移动app，已经设置了用户登录。

那么使用flutter webview html 页面时，也可以通过本地的登录信息来进行这个html页面的登录。

webview 就是通过模拟浏览器的方式来在应用中打开html页面。

使用移动app 中的登录数据来进行登录这个html 页面，那么用户就不需要手动二次登录了。
是否是否用户打开 Flutter 应用用户输入用户名和密码应用向后端发送登录请求后端验证成功? 后端返回 auth_token 应用将 auth_token 存储到本地用户点击进入 WebView 页面从本地读取 auth_token 设置 WebView Cookie 初始化 WebView 并加载目标 URL WebView 发送请求时附加 Cookie 后端验证 Cookie 成功? 后端返回 HTML 页面内容后端返回登录页面用户访问 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 页面。

webview_flutter_wkwebview3.17.0 --Cookie认证

企业应用集成：

dart 复制代码

// 设置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 依赖：

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.0

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

dart 复制代码

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

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

dart 复制代码

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 {
  @override
  Widget 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();

  @override
  void initState() {
    super.initState();
    _setCookie();
  }

  Future<void> _setCookie() async {
    await cookieManager.setCookie(WebViewCookie(
      name: 'auth_token',
      value: 'xxxx', // 替换为实际的认证 token
      domain: '.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
  }

  @override
  Widget 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。

组件中的执行流程

初始化阶段：

initState 被调用，初始化 WebViewCookieManager 并设置 Cookie。
设置完 Cookie 后，初始化 WebViewController 并加载目标 URL。

页面加载阶段：

WebView 开始加载页面，Cookie 会被自动附加到请求中。
当页面加载完成时，onPageFinished 回调被触发。

生命周期：

initState：组件初始化时调用，用于设置 Cookie 和初始化 WebView。
build：构建 UI，显示 WebView。
dispose：组件销毁时调用，用于释放资源。

注意事项

Cookie 的域：确保设置的 Cookie 域与 WebView 加载的 URL 域匹配，否则 Cookie 不会被发送。
认证 Token：value 应该是实际的认证 token，通常由后端生成并在用户登录后返回。
WebView 初始化：确保在设置完 Cookie 后再初始化 WebView，否则 Cookie 可能不会生效。