[Flutter] webview_flutterでクッキーを使う方法

2022-04-26 hit count image

Flutterでwebview_flutterを使ってウェブビュー(WebView)を表示して表示したウェブページのクッキーを扱う方法について説明します。

概要

以前のブログポストではwebview_flutterパッケージを使ってアプリ内でウェブページを表示する方法について説明しました。

今回のブログポストではwebview_flutterを使って表示したウェブページでクッキー(cookie)を扱う方法について説明します。

このブログポストで紹介するソースコードは下記のリンクで確認できます。

Flutterプロジェクト生成

Flutterでwebview_flutterを使ってWebページを表示して、ウェブページのクッキーを扱う方法を確認するため下記のコマンドを実行して新しい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を使って全てのクッキーを消したり、特定のクッキーを設定する方法もみてみました。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts