【Supabase】Flutter + Supabase Authentication で Social Login(Google) のサインアップ・サインイン処理のサンプルを作った【Flutter】

fvm flutter doctor
Waiting for another flutter command to release the startup lock...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.7, on macOS 14.1.1 23B81 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

検証端末

端末名	バージョン
Google Pixel 3a	Android 12
iPhone X	iOS 16.7.2

Social Login（OAuth）について、Supabaseのページに記載がありましたので翻訳後の文章を記載します。

supabase.com

ソーシャルログインは（OAuth）は、ユーザーが別のWebサイトまたはアプリケーションの資格情報を使用して、あるWebサイトまたはアプリケーションにログインできるようにする認証のオープン標準です。 OAuthを使用すると、ユーザーはパスワードを共有せずに、サードパーティーのアプリケーションにオンライなカウントへのアクセスを許可できます。 OAuthは、サードパーティのアプリからソーシャルメディアアカウントにログインする場合などによく使用されます。これは、ユーザーを認証し、アプリケーション間で情報を共有するための安全かつ便利な方法です。

実装後のサンプルリポジトリ

今回のGoogle Loginを実装したリポジトリはこちらです。

github.com

大まかな手順

Social Login(Google)を実装する手順は、以下の通りです。

Google Cloud Platform(以降GCPと呼びます)上でOAuthの同意画面の作成
(Android / iOS)のOAuth2.0 クライアントIDの作成
WebのOAuth2.0 クライアントIDの作成
Supabaseのプロバイダーの設定
(Android / iOS)のgoogle_sign_in プラグインの初期設定
コードの実装

1~3がGCPのコンソール上で行う作業で、4がSupabaseのコンソール上で行う作業となります。

必要なもの

実装を行う上で必要なものは以下の通りです。

Google アカウント
- GCPの設定用のアカウント
- ログイン用のアカウント
  - こちらはGCPの設定用のアカウントで大丈夫です。
GCPのプロジェクト
- プロジェクトが作成されていれば大丈夫です。
Supabase アカウントと今回追加対象のプロジェクト
google_sign_inプラグイン
- こちらは実装時に使用します。Android・iOS両方対応しています。
(iOSのみ)Apple Developer Programのアカウント
- Bundle IDが必要になる為、Apple Developer Programのアカウントが必要になります。

具体的な手順

それでは、具体的な手順を記載していきます。

1. Google Cloud Platform(以降GCPと呼びます)上でOAuthの同意画面の作成

まずは、GCP上の同意画面を作成していきます。

この画面は、ソーシャルログイン時にユーザーに必要な権限を表示させる為に必要な設定となります。

下記ページを開きOAuthの同意画面の設定画面へ移動します。

https://console.cloud.google.com/apis/credentials/consent

次に画面中央にUser Typeを内部もしくは外部を選択する画面が表示されますが、Google Workspace ユーザーのみが内部を選択できるため、ここでは外部を選択します。

「アプリ名」と「ユーザーサポートメール」を設定します。私はアプリ名はデフォルトのままで、ユーザーサポートメールは、開発用のメールアドレスを入れました。

「承認済みドメイン」に、supabaseのURLを設定します。 URLは、下記サイトから対象のプロジェクトを開いて、画面の最上部に表示されている「Project URL」のURLから https:// を取り除いた部分を記載します。 https://supabase.com/dashboard/project/_/settings/api

デベロッパーの連絡先を入れます。私は、開発用のメールアドレスを入れました。

次に使用するスコープ（権限）を設定します。

今回はGoogle のメールアドレスの参照権限と、プロフィールを取得する権限を取得します。

上記2点は非機密のスコープで、機密性の高いスコープも存在し、それらはカレンダー情報やTodoリストなどの機密性の高い個人情報を取得する際に使用します。

スコープの詳細は以下を参照してください。 https://developers.google.com/identity/protocols/oauth2/scopes?hl=ja

「スコープを追加または削除」ボタンをクリックして使用するスコープを選択します。今回は、emailとprofileの項目にチェックをつけて、保存します。

チェック後、下にある「保存」ボタンをクリックしないと保存されないので注意してください。画面サイズによっては、少しスクロールする必要があります。

次は、テストユーザーを設定します。こちらは、開発中で特定のアカウントでのみ、利用したい場合に設定が可能です。こちらは任意で設定してください。私は自身の開発用アカウントと検証用のアカウントを登録しました。

「保存して次へ」をクリックすると、一通りの設定ができたかと思います。

それでは、次にOAuth2.0 クライアントIDを作成していきます。

2. (Android / iOS)のOAuth2.0 クライアントIDの作成

Oauth2.0 クライアントIDはAndroid、iOSそれぞれ別に作る必要があります。

Android

まずはAndroidから設定します。

ここでは、Supabaseのプロバイダーの情報が必要になるので取得します。 Provides > Google の項目内にあるCallback URL (for OAuth) の文字列をコピーしてください。

それではGCPの[認証情報]メニューを開きます。 https://console.cloud.google.com/apis/credentials?hl=ja

上のURLの「認証情報」メニューを選択し、「＋認証情報を作成」ボタンをクリックし、出てきたコンテキストメニューから「OAuth クライアント ID」をクリックします。

クリック後、アプリケーションの種類を選択する画面が表示されるので、Androidを選択します。

その後、以下の３項目を記入します。

名前
- こちらは、開発者が識別する為の名前ですので、適当な名前で良いです。
パッケージ名
- 画面上にはAndroidManifest.xml と記載されていますが、実際にはandroid/app/build.gradleのapplicationIdを設定しました。
  - サンプルのリポジトリでは、com.example.authentication_sample_with_supabase_flutterとなります。
SHA-1証明書のフィンガープリント
- 今回は開発環境ということで、開発時自動的に作成される ~/.android/debug.keystoreを使用します。
- もし作成されていない場合は、一度androidでアプリを起動してみてください。
- アプリをリリースする場合は、本番用のkeystoreを作成して、改めて設定をすることになります。
- 下記コマンドでフィンガープリントなどが表示されるので、SHA-1のフィンガープリントをコピーします。

    keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

最後まで記入できたら、「作成」をクリックします。
- クライアントIDが発行されますが、後で確認できるので一旦スルーで大丈夫です。

iOS

基本的な進め方はこちらに記載されているのでこちらに沿って設定していきます。

「認証情報を作成」ボタンをクリックして、「アプリケーションの種類」をiOSに設定します。
すると以下の項目の設定が表示されるので設定します。
- 名前
  - こちらは任意の名前で良いです。
- バンドルID
  - こちらはApple Developer Program で設定したIdentifierを指定すれば良いです。
- App Store ID
  - 開発中はブランクで良いです。
  - リリース時にはIDが決まるので、そのIDを設定すれば良いです。
- チームID
  - 開発中はブランクで良いです。
  - こちらはApple Developer Programにログインした際に、右上に表示されるアルファベットの文字列を設定すれば良いです。
最後まで記入できたら、「作成」をクリックします。
- クライアントIDが発行されますが、後ほど必要なタイミングでコピーするので一旦スルーで良いです。
Info.plistの設定などは後述するプラグインの初期設定で行いますのでこの章はここまでの設定で良いです。

3. WebのOAuth2.0 クライアントIDの作成

https://console.cloud.google.com/apis/credentials?hl=ja
上のURLの「認証情報」メニューを選択し、「＋認証情報を作成」ボタンをクリックし、出てきたコンテキストメニューから「OAuth クライアント ID」をクリックします。
アプリケーションの種類を聞かれるので、まずは「ウェブアプリケーションを」選択します。
Supabaseのプロバイダーの情報が必要になります。
- Provides > Google の項目内にあるCallback URL (for OAuth)
- https://supabase.com/dashboard/project/_/auth/providers から確認して下さい。
- 「承認済みのリダイレクト URI」に先ほどSupabaseのProvidersから取得したURLを記入します。
- そのあと「作成」ボタンをクリックしますと作成されます。
  - いくつかシークレットキーなどが表示されますが、詳細画面でも同じ情報が確認できるので無視して大丈夫です。

4. Supabaseのプロバイダーの設定

GCP上の設定は完了したので、次にSupabase上で先ほど作成したOAuth IDなどを設定していきます。
ここで必要になる情報は先ほど作成したAndroidとWebのOAuth IDのCLient IDと Client Secret IDです。
- Androidは下記URLから対象の項目から直接コピー可能です。
  - https://console.cloud.google.com/apis/credentials?hl=ja
- Webは、Secret Client IDもあるので、まず名前の項目をクリックし、詳細画面へ遷移します。
  - 開くと、Client ID とClient Secret IDが記載されているので、コピーします。
- iOSはAndroidとWebの設定を行うと自動的にiOSの設定もできてしまうので、ここでは省略します。
- まずは下記URLから、対象のプロジェクトを開き、Authentication > Providersを開いて下さい。
  - https://supabase.com/dashboard/project/_/auth/providers
- 開いた後、Google の項目を展開し、以下の操作をしていきます。
  - Enable Sign in with Google をONに設定
  - Client ID (for OAuth) にWebのClient ID を設定します。
  - Client Secret (for OAuth) にWebの Client Secret ID を設定します。
  - Authorized Client IDs (for Android, One Tap, and Chrome extensions) にAndroid のClient ID を設定します。
- これで、設定が完了です。
- あとはコードを実装していきます。

5. (Android / iOS)のgoogle_sign_in プラグインの初期設定

Androidのgoogle_sign_inの初期設定

Androidには特に設定は必要ないので、スキップします。

iOSのgoogle_sign_inの初期設定

OSはinfo.plistをいじる必要があるので、使用したパッケージのiosの説明を見ながら設定を行います。
- Androidと同様にClient IDを取得します。
- クライアントIDが記載されているところのダウンロードボタンをクリックしてinfo.plistをダウンロードする。
- ダウンロードしたinfo.plist内からREVERSED_CLIENT_ID を取得して、Runner.Info.plistのCFBundleURLSchemas に記入します。
  - サンプル用リポジトリにはすでにkeyがありましたので、<string>の行のみ追加しています。

6. コードの実装

実際にログイン処理を実装します。
- 下記ページのコードを参考にログイン処理を実装しました。
  - https://supabase.com/docs/guides/auth/social-login/auth-google?latform=flutter
  - サンプルのコードからログイン処理の部分だけ抜粋しております。

         final googleSignIn = GoogleSignIn(
         clientId: Platform.isAndroid ? _googleClientId : _googleClientIdIos,
         serverClientId: _googleWebClientId,
         scopes: [
           'email',
           'https://www.googleapis.com/auth/contacts.readonly'
         ]);
         final googleUser = await googleSignIn.signIn();
         final googleAuth = await googleUser!.authentication;
         final accessToken = googleAuth.accessToken;
         final idToken = googleAuth.idToken;
   
         if (accessToken == null) {
           throw 'No Access Token found.';
         }
   
         if (idToken == null) {
           throw 'No ID Token found.';
         }
   
         final result = await supabase.auth.signInWithIdToken(
           provider: Provider.google,
           idToken: idToken,
           accessToken: accessToken,
         );
         debugPrint('result: $result ');

肝になるのは、GoogleSignIn.signIn() と supabase.auth.signInWithIdToken() メソッドです。
- イメージとしては、
  - GoogleSignIn.signIn で、Googleサインインを実行
    - 完了したら、アクセストークンが排出されるので、アクセストークンを使ってsupabaseへログインする
  - という流れになっています。
  - またscope(権限)は下記URLを参照
    - https://developers.google.com/identity/protocols/oauth2/scopes?hl=ja
  - また、scopeを使用したアプリを作成する場合は、下記プラグインを使用するのが良さそうです。
    - https://pub.dev/packages/extension_google_sign_in_as_googleapis_auth
    - https://pub.dev/packages/googleapis

まとめ

簡単にまとめると以下の通りです。

Supabase + Flutterでのソーシャルログイン(Google)はgoogle_sign_in プラグインを使用することで実装できます。
ログイン機能の実装にはGCPでOAuth2.0 クライアントIDをAndroid・iOS・Webそれぞれ1つずつ作成する必要があります。
iOSのOAuth2.0 クライアントIDを作成するには、Apple Developer Programの設定が必要です。
ログイン時にscopesを引数に渡すことで、さまざまなAPIを利用する権限を取得することが可能になります。

雑感

結構コードは短いですが、GCPとSupabase上での設定が長くてまとめるの時間がかかってしまいました。。。ただ、こういったことは一度まとめてしまうと後々楽なので他のソーシャルログインも同様にまとめていきたいと思います。ここまで読んでいただきありがとうございました。

開発端末