목차

• 개요
• Flutter 프로젝트 생성
• webview_flutter 설치
• Android 설정
• 웹 페이지 표시
• 쿠키 가져오기
• 특정 쿠키 제거하기
• CookieManager
  • 모든 쿠키 제거
  • 특정 쿠키 설정
• 완료

개요

이전 블로그 포스트에서는 webview_flutter 패키지를 사용하여 앱내에서 웹 페이지를 표시하는 방법에 대해서 알아보았습니다.

• [Flutter] 웹뷰(WebView)

이번 블로그 포스트에서는 webview_flutter를 사용하여 표시한 웹 페이지에서 쿠키(cookie)를 다루는 방법에 대해서 알아보도록 하겠습니다.

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

• GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/packages/webview_flutter_cookie_example

Flutter 프로젝트 생성

Flutter에서 webview_flutter를 사용하여 웹 페이지를 표시하고 웹 페이지의 쿠키를 다루는 방법을 확인하기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

flutter create webview_flutter_cookie_example

webview_flutter 설치

webview_flutter을 사용하기 위해, 다음 명령어를 실행하여 webview_flutter 패키지를 설치합니다.

# cd webview_flutter_cookie_example
flutter pub add webview_flutter

Android 설정

안드로이드에서 webview_flutter를 사용하기 위해서는 minSdkVersion을 19로 설정할 필요가 있습니다. ./android/app/build.gradle 파일을 열고 다음과 같이 수정합니다

android {
    defaultConfig {
        minSdkVersion 19
    }
}

웹 페이지 표시

webview_flutter를 사용하여 웹 페이지를 표시하기 위해 ./lib/main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: 'https://deku.posstree.com/en/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

이 코드를 실행하면 다음과 같은 화면이 표시되는 것을 확인할 수 있습니다.

쿠키 가져오기

webview_flutter에서는 기본적으로 쿠키의 값을 가져오는 방법을 제공하지 않고 있습니다. 따라서, WebViewController의 runJavascriptReturningResult() 함수를 통해 JavaScript를 실행하여 쿠키를 가져와야 합니다.

우선 다음과 같이 WebViewController를 생성합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  late WebViewController _webViewController;
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        ...
        onWebViewCreated: (WebViewController webViewController) {
          _webViewController = webViewController;
        },
      ),
    );
  }
}

그런 다음, floatingActionButton을 사용하여 버튼을 클릭하였을 때, 쿠키를 가져와 표시하도록 합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        ...
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final cookies = await _webViewController.runJavascriptReturningResult(
            'document.cookie',
          );
          print(cookies);
        },
        child: const Icon(Icons.web_outlined),
      ),
    );
  }
}

이 코드를 실행하면 다음과 같은 화면이 표시되는 것을 확인할 수 있습니다.

이제 화면에 표시된 버튼을 클릭하면, 다음과 같이 Debug console에 쿠키가 출력되는 것을 확인할 수 있습니다.

flutter: GoogleAdServingTest=Good; __gads=ID=ab7b82a700ee6e5a-22c083926ed200a5:T=1650798117:RT=1650798117:S=ALNI_MbIWGRfzm5ErMMkuSLP0aMebyo_Wg; _ga=GA1.2.722169585.1650798118; _gat_gtag_UA_125408913_1=1; _gid=GA1.2.746873769.1650798118

특정 쿠키 제거하기

webview_flutter에서는 기본적으로 특정 쿠키의 값을 제거하는 방법을 제공하지 않고 있습니다. 따라서, WebViewController의 runJavascriptReturningResult() 함수를 통해 JavaScript를 실행하여 특정 쿠키를 제거해야 합니다.

이를 확인하기 위해, floatingActionButton을 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        ...
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var cookies = await _webViewController.runJavascriptReturningResult(
            'document.cookie',
          );
          print(cookies);

          await _webViewController.runJavascriptReturningResult(
            'document.cookie = "_ga=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=.posstree.com; path=/;"',
          );
          cookies = await _webViewController.runJavascriptReturningResult(
            'document.cookie',
          );
          print(cookies);
        },
        child: const Icon(Icons.web_outlined),
      ),
    );
  }
}

다시 화면에 표시된 버튼을 클릭하면, 다음과 같이 Debug console에 _ga 쿠키가 제거된 것을 확인할 수 있습니다.

...
flutter: _gat_gtag_UA_125408913_1=1; _gid=GA1.2.746873769.1650798118; __gads=ID=ab7b82a700ee6e5a-22c083926ed200a5:T=1650798117:RT=1650798117:S=ALNI_MbIWGRfzm5ErMMkuSLP0aMebyo_Wg

CookieManager

webview_flutter는 기본적으로 CookieManager 클래스를 제공하고 있습니다. 이 클래스를 사용하면, 쿠키를 설정하거나, 모든 쿠키를 제거할 수 있습니다.

모든 쿠키 제거

CookieManager를 사용하여 모든 쿠키를 제거하기 위해서는, 우선 다음과 같이 CookieManager를 선언합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  late WebViewController _webViewController;
  final _cookieManager = CookieManager();
  ...
}

웹 브라우저의 모든 쿠키를 제거하기 위해서는 CookieManager의 clearCookies() 함수를 호출해야 합니다. 이를 확인하기 위해, floatingActionButton을 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        ...
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          ...
          await _cookieManager.clearCookies();
          cookies = await _webViewController.runJavascriptReturningResult(
            'document.cookie',
          );
          print(cookies);
        },
        child: const Icon(Icons.web_outlined),
      ),
    );
  }
}

이제 화면에 표시된 floatingActionButton 버튼을 누르면, 다음과 같이 Debug console에서 모든 쿠키가 제거된 것을 확인할 수 있습니다.

...
flutter:

특정 쿠키 설정

CookieManager의 setCookie() 함수를 사용하여 특정 쿠키에 값을 설정할 수 있습니다. 이를 확인하기 위해, floatingActionButton을 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        ...
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          ...
          await _cookieManager.setCookie(
            const WebViewCookie(
              name: "test",
              value: "value",
              domain: ".posstree.com",
            ),
          );
          cookies = await _webViewController.runJavascriptReturningResult(
            'document.cookie',
          );
          print(cookies);
        },
        child: const Icon(Icons.web_outlined),
      ),
    );
  }
}

이제 화면에 표시된 floatingActionButton 버튼을 누르면, 다음과 같이 Debug console에서 특정 쿠키가 설정된 것을 확인할 수 있습니다.

...
flutter: test=value

완료

이것으로 Flutter에서 webview_flutter을 사용하여 웹 페이지를 표시하고, 웹 사이트의 쿠키를 가져오거나 제거하는 방법에 대해서 알아보았습니다. 또한 CookieManager를 사용하여 모든 쿠키를 제거하거나, 특정 쿠키를 설정하는 방법에 대해서 알아보았습니다.

Github Sponsor Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

어린이용 단어 공부 앱

블라부

세상의 모든 정보를 모아보다

씨로그

JLPT 일본어 단어앱

일단 공부

토익 영어 단어앱

토익 단어앱

중고등 영어 단어앱

중고등 영단어앱

HSK 중국어 단어앱

중국어 단어앱

독일어 단어앱

독일어 단어장

러시아어 단어앱

러시아어 단어장

아랍어 단어앱

아랍어 단어장

인도네시아 단어앱

인도네시아 단어장

프랑스어 단어앱

프랑스어 단어장

스페인어 단어앱

스페인어 단어장

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기