FlutterとSupabaseでgoogle認証【CI/CDパイプラインを用いたApp Distributionへのapkアップロードに挑戦】 Part1

概要

google認証機能をSupabaseを用いて、Flutterのアプリに組み込んだ話です。
せっかくなのでまとめてみました。

色々な動画を見てみましたが、ローカル環境で起動したアプリに組み込むケースが多かったです。もう少し実践的にしようと思って、以下の内容まで取り組んでみました。

• OAuthクライアントID作成、Supabaseの設定、apkファイルをAppDistributionへアップロード（今回はこちら）
• apkファイルアップロードを手動ではなく、Github Actions経由に切り替え

ボリュームがあるので、2回に分けました。

スタック

主に関係する技術は以下の通りです。

• Flutter(v3.27)
  • アプリケーション作成のためのFW
• Github Actions
  • Flutter資材のデプロイからApp Distributionのデプロイまでのフロー作成
• Google Cloud
  • OAuthクライアント作成に利用
• App Distribution
  • apkファイルデプロイ先
• Supabase
  • 認証のための実装および、認証のProviderとしてGoogleと連携

構成図

核となる箇所以外はサラッと記載します。（Flutterの実装について、細部まで説明は記載していません。）

認証のための実装を確認

認証機能を作ります。
Supabaseとの連携やgoogleサインインのためのライブラリをプロジェクトに追加します。

実際の処理からこのクラスを呼び出して、認証処理を行います。
関連する実装の詳細は、本記事の最後記載しています。

/// 認証関係の処理を行うクラス
class AuthService {
  AuthService()
      : _googleSignIn = GoogleSignIn(
          clientId: AppConstants.googleClientId,
          serverClientId: AppConstants.googleWebServerClientId,
        );
  final supabase = Supabase.instance.client;
  final GoogleSignIn _googleSignIn;

  ///サインイン処理
  Future<void> signInWithGoogle() async {
    try {
      final googleUser = await _googleSignIn.signIn();
      final googleAuth = await googleUser!.authentication;
      final accessToken = googleAuth.accessToken;
      final idToken = googleAuth.idToken;

      if (accessToken == null) {
        throw Exception('No Access Token found.');
      }
      if (idToken == null) {
        throw Exception('No ID Token found.');
      }

      await supabase.auth.signInWithIdToken(
        provider: OAuthProvider.google,
        idToken: idToken,
        accessToken: accessToken,
      );
    } catch (error) {
      // print('Googleサインインでエラー: $error');
      rethrow;
    }
  }

  ///サインアウト処理
  Future<void> signOutWithGoogle() async {
    try {
      await supabase.auth.signOut();
      await _googleSignIn.signOut();
    } catch (error) {
      // print('サインアウトでエラー: $error');
      rethrow;
    }
  }
}

この中でも重要なのが、以下2カ所です。

Googleサインインのための情報
AppConstantsクラスでは環境変数を読み込んで設定しています。
（環境変数を読み込んでいる、と思っていただけると。）

_googleSignIn = GoogleSignIn(
    clientId: AppConstants.googleClientId,
    serverClientId: AppConstants.googleWebServerClientId,
);

Supabaseの関数を呼び出し、ログイン処理
supabaseの関数を呼び出して、実際にログインを実行します。

  await supabase.auth.signInWithIdToken(
    provider: OAuthProvider.google,
    idToken: idToken,
    accessToken: accessToken,
  );

clientIdとserverClientIdの設定

（Supabaseを通じて）AndroidアプリでGoogle認証を行うためには、2つのIDが必要です。

• Web client ID
• Client ID（Android,iOS）
  私はAndroidのみ対応しています。後で記載していますが、Client IDに関して、デバッグ用とリリース用、2種類を設定しているので、Web client ID1つと合わせて、トータルで3個になっています。

Googleは、AndroidでのGoogleサインインを実行するために、AndroidクライアントIDとWebクライアントIDの両方を必要とするようにOAuth認証を設計したそうです。

AndroidクライアントIDとWebクライアントID、それぞれの設定方法を記載していきます。

SHA-1の準備

いきなり難しそうな単語ができてきました。フィンガープリント、という単語が使われることもありますが、特定のデバイスを特定するために使われるものです。

このフィンガープリントですが、開発用とリリース用、2種類必要です。

上記リンクを見るといくつか作り方がありますが、私はkeytoolで作成しました。
keytoolの利用条件として、JREのインストールが必要なので、適宜インストールします。
Ubuntuであれば、以下コマンドでOKです。

sudo apt install -y openjdk-21-jre-headless

keystore作成

デバッグ用

アプリを動かしていれば既に生成されています。
C:\Users\User\.android\debug.keystore

リリース用

aliasは各自で設定をお願いします。
以下コマンドを実行すると、キーストアのパスワードを設定するように求められます。
また、いくつか項目を設定しますが、画像にある通り、何を設定するか決まっていなければ、そこはドットで問題ないようです。

エイリアスとパスワードの組み合わせは忘れようにしてください！
また、リリース用は作成後、android/app/release.keystoreに配置します。

git管理対象外に
release.keystore、について、android\.gitignoreに**/*.keystoreと記載されているので、最初からgit管理対象外になっていますが、一応ご確認ください。

keytool -genkey -v -keystore release.keystore -alias qiita_sample -keyalg RSA -keysize 2048 -validity 10000

SHA-1の値を確認

keytool -list -v -keystore release.keystore -alias qiita_sample

パスワードを求められるので、入力してください。
以下のように出力されるので、SHA1の部分の値をコピーしておいてください。

デバッグ用も同様です。
（デバッグ用のパスワードは特にいじっていなければ、androidです）

OAuthクライアントIDの作成

Google Cloudのコンソールを開きます。
プロジェクトが無い方は適宜作成をお願いします。

Webアプリケーション

承認済みのリダイレクト URIは、
Supabaseの設定のタイミングで設定します。今は空で問題ないです。

Android

• パッケージ名：AndroidManifest.xmlファイル内、と記載されていますが、android/build.gradle内部のapplicationIdでOK
• SHA-1 証明書フィンガープリント：「SHA-1の値を確認」でコピーした値を貼り付けてください。デバッグ用を作成します。（リリース用は、後の工程で自動作成されます。）

作業後、以下のような状態になっていればOKです。
（Android1つ、ウェブアプリケーション1つ）

この後、Supabaseの設定で各クライアントID、そしてWebアプリケーションのシークレットの値は使用するので、コピーしておいてください。

これで、clientIdとserverClientIdの情報が取得できました。
（リリース用のclientIdはこの後作成）

App Distribution

apkファイルをアップロードする場所が必要なので、用意します。

アプリケーション追加

アプリを追加するところから始めます。

Androidをクリックします。

アプリの登録

以下2つの情報を設定して、「登録」をクリックします。

• Android パッケージ名：android/build.gradle内部のapplicationId
• デバッグ用の署名証明書 SHA-1：デバッグ用で、取得した値を設定
  

構成ファイルのダウンロード

は後で行うので、「次へ」クリックします。

Firebase SDK の追加

後ほど、build.gradleの全体を共有するので、そちらで設定内容を確認いただく形でOKです。

App Disribtutionのトップ画面に戻りますので、「開始」をクリックします。

Apkファイルがアップロードできる状態になりました。

ローカルで以下コマンドを実行して、apkファイルを作成します。ドラッグアンドドロップでapkファイルをアップロードし、ご自身のメールアドレスに送信してください。

お持ちの端末等にダウンロードして、Google認証の処理以外の部分が動いているか、確かめてみてください。

flutter build apk

SHA 証明書フィンガープリントの設定

Google Cloudの方で、OAuthクライアント作成時に設定したSHA-1をここでも使います。

プロジェクトの設定に移動します。

以下画像の赤枠内で、設定しているように、デバッグ用とリリース用、2つのSHA-1を設定してください。

「フィンガープリントを追加」をクリックすると入力できるので、入力して、「保存」します。

ここまで完了しましたら、
先ほどスキップした、構成ファイルのダウンロードを行っておきましょう。
ダウンロード後、android/app/google-services.jsonに配置します。

git管理対象外に
google-services.jsonは、git管理対象外にするので、gitignoreに記載を追加してください。

OAuth 2.0 クライアント IDの状態確認

SHA-1の設定実施後、Google Cloudに戻ります。
OAuth 2.0 クライアント IDが一つ増えています。赤枠で囲った箇所に記載されている通り、Firebaseによって自動生成されています。
中身を確認してみると、release.keystoreのSHA-1の値をフィンガープリントの欄に設定されているはずです。

これでOAuth 2.0 クライアント IDは完了です。

Authenticationの設定

最後にちょこっと作業します。ウェブクライアントIDとシークレットを設定します。

すでに設定してあるので、「保存」が押せませんが、無効から有効に設定する際はクリックできます。

これでGoogle Cloudの設定はほぼ終わりです。
（残りは、ウェブクライアントの承認済みのリダイレクト URIの設定のみ）
続いてSupabaseの話へ進みます。

Supabaseの設定

プロジェクトが無い方は適宜作成をお願いします。

必要な情報は、Project URLとAPI Keysです。Project Settingから情報を取得します。

OAuthクライアントIDの設定

Google認証に関する設定を行います。
メニューからAuthentication > Provider、クリックします。

Client IDsとClient Secret (for OAuth)を設定します。
OAuthクライアントの作成で、取得できた値を設定していきます。

• Client IDs：OAuth 2.0 クライアントのID3つをカンマつなぎで設定（赤線箇所の通り）
• Client Secret (for OAuth)：「Webアプリケーション」の箇所で取得したシークレット値を設定
• Callback URL (for OAuth)：コピーしてください。この後、Google Cloud側で設定

Callback URL (for OAuth)の設定

Google Cloudのコンソールに戻ります。
作成済のOAuth 2.0 クライアント IDのうち、種類がWebアプリケーションのものを選択して、編集画面を開きます。以下画像の、現在赤くなっている箇所に先ほどコピーした値を設定します。

これでSupabaseとGoogle Cloudの設定も完了です！

関連する実装と今後

この記事の最後に、認証に関係する実装と画面の情報を記載いたします。

実装

最初に認証処理について記載しましたが、他に必要そうな情報を共有いたします。
（関連するクラスが複数ある関係で、ログイン後の遷移先画面は添付していません。）

• auth_google_service.dart：認証処理
• env.dart：環境変数の設定（enviedを使った構築）
• id_keys.dart：環境変数の読みこみ処理
• loginPage.dart：画面と認証処理

コード詳細

https://gist.github.com/eno-conan/ffaf6ad9f98d135200753e2253742564

画面

Googleログインボタンをタップすると、アカウント選択画面が表示されます。
選択後、読み込みが始まり（真ん中の画像）、認証が成功してホーム画面が表示されます。
（Starbucks Cloneに挑戦している関係でホーム画面がそれっぽいものになっています。）

今後

本記事はここまでとさせていただきます。
この後、GithubActionsを用いたapkファイルのアップロードに取り掛かります。

近いうちに、Part2は公開予定です。

参考記事

他にもあったかと思いますが、じっくり確認させていただいたものを中心に記載させていただきました。