当前位置：首页 > article >正文

webview_flutter_wkwebview3.17.0 --Cookie认证

article 2025/1/27 12:51:23

场景描述:
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: flutter
  webview_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 {
  @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。