FlutterでiOSのブラウザセッションを分離して、Google認証時の自動ログインを防いでみた
こんにちは、ゲームソリューション部のsoraです。
今回は、FlutterでiOSのブラウザセッションを分離して、Google認証時の自動ログインを防いでみたことについて書いていきます。
背景
前回の以下記事では、Amazon CognitoとGoogle CloudのOAuth 2.0クライアントを連携させてGoogle認証を実装しました。
上記記事ではurl_launcherパッケージにより、外部ブラウザ（Safari）で認証画面を開いていましたが、ログアウト後に再度ログインボタンを押すと自動でログインされていました。
原因は、外部ブラウザ（Safari）にGoogleのセッションCookieが残っているためです。
url_launcherで外部ブラウザを開く場合、セキュリティ上の理由からアプリはブラウザのCookieにアクセスできません。
そのため、アプリ側でログアウト処理を行っても、再ログイン時にはブラウザ側のGoogleセッションが有効なため、自動的に認証が完了してしまいます。
これを今回実装して解決してみようと思います。
構成
今回構築したのは、簡易ですが以下の構成です。
Flutterで作ったテストアプリからAmazon Cognitoを経由して、Google CloudのOAuth 2.0クライアントでGoogle認証をする構成です。
解決策
iOSには、ASWebAuthenticationSessionがあります。
これを使うと、デフォルトでSafariとCookieやセッションデータを共有することができます。
また、prefersEphemeralWebBrowserSessionオプションを有効にすると、Safariとデータを共有しない一時的なセッションで認証を行うことができます。
FlutterでこのAPIを利用するために、flutter_web_auth_2パッケージを使用します。
このパッケージはiOSではASWebAuthenticationSession（iOS 12以降）またはSFAuthenticationSession（iOS 11）、AndroidではChrome Custom Tabsを使用してOAuth認証を行います。
今回使用した検証機はiOS 12以降のため、ASWebAuthenticationSessionが使用されています。
以下が一時的なセッションで実行するためのパラメータです。
| 設定 | iOSでの挙動 |
|---|---|
preferEphemeral: false（デフォルト） |
SafariとCookie・セッションを共有 |
preferEphemeral: true |
Safariとデータを共有しない一時的なセッションで実行 |
Androidでは、現行バージョンの4.1.0において、上記パラメータを利用することができませんでした。
ただし、現在アルファ版として公開されているflutter_web_auth_2の5.0.0-alphaではAndroidでもpreferEphemeral: trueが使えるようになっているようです。
Flutter実装
以下に今回メインとなるログインボタンについて、コメントで説明しています。
import 'package:flutter_web_auth_2/flutter_web_auth_2.dart';
class GoogleLoginButton extends ConsumerWidget {
const GoogleLoginButton({super.key});
Widget build(BuildContext context, WidgetRef ref) {
return ElevatedButton(
onPressed: () async {
try {
final result = await FlutterWebAuth2.authenticate(
url: AppConfig.authorizeUrl,
callbackUrlScheme: 'com.example.app',
options: const FlutterWebAuth2Options(
/// Safariとデータを共有しない一時的なセッションで実行
preferEphemeral: true,
),
);
/// コールバックURLから認可コードを抽出
final uri = Uri.parse(result);
final code = uri.queryParameters['code'];
if (code != null) {
await ref.read(authNotifierProvider.notifier).handleOAuthCallback(code);
}
} catch (e) {
debugPrint('認証エラー: $e');
}
},
child: const Text('Googleでログイン'),
);
}
}
動作確認
Flutterアプリを起動して、Googleでログインボタンを押すと、Googleのログイン画面に遷移します。
その後に、ログアウトして再度Googleでログインボタンを押すと、自動ログインされずに再度パスワード入力が求められることが確認できました。
参考
最後に
今回は、FlutterでiOSのブラウザセッションを分離して、Google認証時の自動ログインを防いでみたことを記事にしました。
どなたかの参考になると幸いです。
