【Flutter】OAuth2の認証パッケージについて

はじめに

今回はブラウザでユーザ認証を行うOAuth2パッケージの「flutter_web_auth」について、pub.devを見ながらまとめていきたいと思います。

flutter_web_authとは

flutter_web_authとは、ユーザ認証をするためのFlutterパッケージです。
実際には、iOSではASWebAuthenticationSessionというWebサイトベースの認証機能が使用されて、AndroidではChromeカスタムタブ(アプリ内でサイトを開く)が使用されます。
ログインを実行しようとすると、アプリとは別にブラウザが開き、ブラウザ上のWebサイトでログインすることができます。

使用方法

flutter_web_authを使用して、ログインするためには実装するだけでいいです。
※pub.devのコードです。

import 'package:flutter_web_auth/flutter_web_auth.dart';

// ダイアログをユーザーに提示します
final result = await FlutterWebAuth.authenticate(url: "https://my-custom-app.com/connect", callbackUrlScheme: "my-custom-app");

上記のコードをmain.dartなどに書いて、実行すると、URLのログイン画面のWEBサイトがブラウザで表示されます。引数には、ログイン画面のURL(url)、アプリのカスタムURLスキーム(callbackUrlScheme※リダイレクトで戻ってくるための名前)を設定します。
また、以下のようにして、ログイン後にリダイレクトで戻ってきたURLのクエリパラメータから情報を取得することができます。oauth2.0で認可コードを取得する際などに使用します。

// 結果の URL からトークンを抽出する
final token = Uri.parse(result).queryParameters['token']

リダイレクトURLをアプリで受け取るために、Android: AndroidManifest.xml、iOS: info.plistに設定が必要です。

おわりに

今回は、oauth2.0認証に使用するパッケージについて調べていきました。
ログインに関しては、url_launcherやwebview_flutterを使用した方法もあるので、色々試していきたいです。