[flutter] 플러터에서의 웹 브라우저 쿠키 관리 방법

플러터는 크로스 플랫폼 앱 개발 프레임워크로, 웹 브라우저를 통해 웹 페이지를 렌더링하는 기능을 제공합니다. 웹 브라우저 기능을 사용하는 앱에서는 쿠키를 사용하여 사용자 데이터를 관리하는 경우가 많습니다. 이번에는 플러터에서 웹 브라우저 쿠키를 관리하는 방법에 대해 살펴보겠습니다.

1. Flutter 웹뷰 패키지 가져오기

플러터에서 웹 브라우저를 사용하기 위해 flutter_webview_plugin 또는 webview_flutter와 같은 웹뷰 패키지를 사용할 수 있습니다. 이 패키지들은 플러터 앱에서 웹 페이지를 보여줄 수 있도록 도와주는 역할을 합니다. 여기서는 webview_flutter 패키지를 사용하는 예시를 보여드리겠습니다.

프로젝트의 pubspec.yaml 파일에 webview_flutter 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.8.0

그리고 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

2. 웹 뷰로 웹 페이지 띄우기

먼저, webview_flutter 패키지로 웹 뷰를 생성하여 화면에 띄워보겠습니다. 아래와 같이 WebView 위젯을 사용하여 웹 페이지를 띄울 수 있습니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Web View'),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
      ),
    );
  }
}

위 예제에서는 WebView 위젯을 생성하여 initialUrl 속성을 통해 웹 페이지의 URL을 설정합니다. 화면을 띄우고 실행하면 해당 웹 페이지가 플러터 앱에서 보여지게 됩니다.

3. 쿠키 관리

웹 뷰를 통해 웹 페이지를 띄우면, 해당 웹 페이지에서 발생하는 쿠키도 관리해야 합니다. webview_flutter 패키지는 자체적으로 쿠키를 자동으로 관리하지 않으므로, 앱에서 직접 쿠키를 관리해야 합니다.

쿠키를 관리하기 위해 CookieManager 클래스를 사용할 수 있습니다. 아래 예제는 웹 뷰에서 쿠키를 로드한 후, 쿠키를 설정하고 저장하는 방법을 보여줍니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebView _webView;

  @override
  void initState() {
    super.initState();
    _webView = WebView(
      initialUrl: 'https://example.com',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _loadCookies(webViewController);
      },
    );
  }

  Future<void> _loadCookies(WebViewController webViewController) async {
    CookieManager cookieManager = CookieManager();
    await cookieManager.clearCookies();
    List<Cookie> cookies = await getSavedCookies(); // 쿠키를 저장하는 방식에 따라 구현
    for (Cookie cookie in cookies) {
      await cookieManager.setCookie(
        url: widget.url,
        name: cookie.name,
        value: cookie.value,
      );
    }
    webViewController.reload();
  }

  Future<List<Cookie>> getSavedCookies() async {
    // 쿠키를 로컬 스토리지 등에서 가져오는 로직을 구현
    // 예: Shared Preferences, SQLite, 파일 등
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Web View with Cookie'),
      ),
      body: _webView,
    );
  }
}

위 예제에서는 WebView 위젯 생성 시 onWebViewCreated 콜백을 사용하여 웹 뷰 컨트롤러를 얻어옵니다. 그리고 _loadCookies 함수를 호출하여 쿠키를 로드하고 웹 뷰에 설정합니다. 이때, _loadCookies 함수 내에서는 CookieManager 를 사용하여 쿠키를 관리합니다. 원하는대로 쿠키를 추가, 수정, 삭제할 수 있으며, 마지막으로 웹 뷰를 리로드하여 변경된 쿠키를 적용합니다.

위 방법을 활용하여 플러터 앱에서 웹 브라우저 쿠키를 관리할 수 있습니다.

참고 자료