[Flutter] webview_flutter에서 쿠키 사용하기

2022-04-26 hit count image

Flutter에서 webview_flutter를 사용하여 웹뷰(WebView)를 표시하고 표시한 웹 페이지의 쿠키를 다루는 방법에 대해서 알아보도록 하겠습니다.

개요

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

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

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

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를 사용하기 위해서는 minSdkVersion19로 설정할 필요가 있습니다. ./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://dev-yakuza.posstree.com/en/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

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

Flutter - webview_flutter example

쿠키 가져오기

webview_flutter에서는 기본적으로 쿠키의 값을 가져오는 방법을 제공하지 않고 있습니다. 따라서, WebViewControllerrunJavascriptReturningResult() 함수를 통해 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),
      ),
    );
  }
}

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

Flutter - webview_flutter floating action button

이제 화면에 표시된 버튼을 클릭하면, 다음과 같이 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에서는 기본적으로 특정 쿠키의 값을 제거하는 방법을 제공하지 않고 있습니다. 따라서, WebViewControllerrunJavascriptReturningResult() 함수를 통해 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();
  ...
}

웹 브라우저의 모든 쿠키를 제거하기 위해서는 CookieManagerclearCookies() 함수를 호출해야 합니다. 이를 확인하기 위해, 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:

특정 쿠키 설정

CookieManagersetCookie() 함수를 사용하여 특정 쿠키에 값을 설정할 수 있습니다. 이를 확인하기 위해, 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를 사용하여 모든 쿠키를 제거하거나, 특정 쿠키를 설정하는 방법에 대해서 알아보았습니다.

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

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

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

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts