目次
概要
以前のブログポストではwebview_flutterパッケージを使ってアプリ内でウェブページを表示する方法について説明しました。
今回のブログポストではwebview_flutterを使って表示したウェブページでクッキー(cookie)を扱う方法について説明します。
このブログポストで紹介するソースコードは下記のリンクで確認できます。
- GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/packages/webview_flutter_cookie_example
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を使うため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を使って全てのクッキーを消したり、特定のクッキーを設定する方法もみてみました。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
