AndroidでのGoogle Login

はじめに

このガイドでは、Android向けの Capgo Social Loginを使ってGoogle Loginをセットアップする方法を説明します。 すでに以下を読んでいることを前提としています。 一般的なセットアップガイド.

AndroidでGoogleログインを使う

このパートでは、AndroidでGoogle Loginをセットアップする方法を説明します。

注意

AndroidのSHA1証明書の設定はとにかく大変で、誰にも勧めたい作業ではありません。以下の手順は、Google Play Storeに公開されておらず、ローカルのシミュレーターまたは開発用実機でのみ使うアプリという、最もシンプルなケースを想定しています。

アプリを Google Play Store にリリース済みの場合は、 必ず 本番環境用に、Google Play Console の SHA1 を含む Android クライアント ID を追加してください。Google Play がリリース用 bundle の署名に使用する SHA1 ハッシュは、以下から確認できます。 Test and release > Setup > App Signing.

最後に、設定を誤った場合、エラー内容が分かりにくい可能性があることに注意してください。デバッグが非常に困難になる場合があります。セットアップがうまくいかない場合は、以下を参照してください。 Github の問題.

また、こちらのトラブルシューティング セクションも参考にしてください。 Android 用 Google Login のセットアップ 詳細はこちら。

注意

複数の SHA1 証明書を使用している場合は、複数の Android クライアント ID を作成する必要があります。

1. Android クライアント ID を作成する

   1. 検索バーをクリックします

      

   2. を検索し、 credentials 次をクリックします： APIs and Services 該当の項目（スクリーンショットの番号2）

      

   3. 次の create credentials

      

   4. 選択します OAuth client ID

      

   5. 次の Android アプリケーションの種類

      

   6. Android Studioを開く

   7. ナビゲーターの最下部にある Gradle Scripts

      

   8. 次を探して、 build.gradle モジュールの app

      

   9. 以下をコピー android.defaultConfig.applicationIdを探します。これが package name Googleコンソールでの

      

   10. 次に、ターミナルを開きます。必ず android アプリのフォルダに移動して実行します ./gradlew signInReport

   
   11. このコマンドの先頭までスクロールしてください。次のように表示されるはずです。これをコピーして SHA1.
   
   12. 次に、Google Console に戻ります。以下を入力してください applicationId を Package Name として入力し、SHA1 も証明書フィールドに入力してクリックします create
   

2. Web クライアントを作成する（Android にはこれが必要です）

   1. 以下にアクセスしてください： Create credentials Google Console のページ

   2. アプリケーションの種類を以下に設定 Web

      

   3. クリック Create

      

   4. クライアントIDをコピーしてください。これを以下の用途で使用します： webClientId JS/TSの code 内で

      

3. 以下を修正してください MainActivity

   1. Android Studioでアプリを開いてください。以下のコマンドを実行できます： cap open android

   2. 次を探して、 MainActivity.java

      1. 次を開きます： app フォルダ

         

      2. 次を探して、 java

         

      3. 次を見つけて、 MainActivity.java をクリックします

         

   3. を修正します MainActivity.java。以下の code を追加してください

      import ee.forgr.capacitor.social.login.GoogleProvider;
      import ee.forgr.capacitor.social.login.SocialLoginPlugin;
      import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
      import com.getcapacitor.PluginHandle;
      import com.getcapacitor.Plugin;
      import android.content.Intent;
      import android.util.Log;
      import com.getcapacitor.BridgeActivity;
      
      // ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
      public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {
      
            @Override
            public void onActivityResult(int requestCode, int resultCode, Intent data) {
              super.onActivityResult(requestCode, resultCode, data);
      
              if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
                PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
                if (pluginHandle == null) {
                  Log.i("Google Activity Result", "SocialLogin login handle is null");
                  return;
                }
                Plugin plugin = pluginHandle.getInstance();
                if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
                }
                ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
              }
            }
      
            // This function will never be called, leave it empty
            @Override
            public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
      }

   4. ファイルを保存します

4. アプリでGoogle Loginを使用する

   1. まず、以下をインポートします SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. initialize を呼び出します。これは一度だけ呼び出すようにしてください。

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
          }
        })
      })

   3. 呼び出す SocialLogin.login。ボタンを作成し、クリック時に以下の code を実行します。

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))

      注意

      Google を次のように初期化した場合、 mode: 'offline', SocialLogin.login() を返します serverAuthCode をバックエンドの交換フローに使用します。アプリ内で SocialLogin.refresh({ provider: 'google' }) モードで呼び出さないでください。バックエンドで serverAuthCode を処理し、Google リフレッシュトークンをバックエンドに保存して、バックエンド側でリフレッシュを行ってください。

5. テスト用のエミュレータを設定する

   1. を開き、 Device manager プラスボタンをクリックします

      

   2. 仮想デバイスを作成する

      

   3. 以下のアイコンが付いたデバイスを選択してください Play Store アイコン

      

      ご覧の通り、 pixel 8 は Play Store サービスに対応しています

   4. クリック next

      

   5. OSイメージのタイプが以下であることを確認してください Google Play. 必ず のタイプである必要があります Google Play

      

   6. 次へをクリック

      

   7. デバイスを確認してください。エミュレータの名前は任意で設定できます

      

   8. に移動して Device Manager シミュレータを起動してください

      

   9. シミュレーターが起動したら、設定を開きます

      

   10. 〜を開きます Google Play

   
   11. クリック Update そのまま60秒ほど待ちます
   

6. アプリケーションのテスト

   手順通りに進めれば、Googleログインフローが正常に動作します：

   

トラブルシューティング

問題が発生した場合は、まずアプリの設定とGoogle Cloud Consoleの値が一致しているか確認してください。AndroidのGoogle Sign-Inの失敗は、通常、パッケージ名、SHA-1、またはクライアントIDの不一致が原因です。

Credential Manager、SHA-1、およびFirebase

Androidでは、このプラグインはGoogle Credential Manager（androidx.credentials およびSign in with Google）を使用しており、レガシーな GoogleSignInClient API は使用しません。以下のような GetCredentialCustomException: [28444] Developer console is not set up correctly Logcatのエラーは、そのスタックから発生します。

ログイン失敗後、Logcatを次でフィルタリングしてください： GoogleProvider または CapgoSocialLogin プラグインはパッケージ名、署名SHA-1、およびマスクされた webClientId をログに出力するため、Google Cloud Consoleの値と比較できます。

Google Cloud の必須設定

同じ Google Cloud プロジェクト内に、2種類の OAuth 2.0 クライアント ID が必要です：

クライアントタイプ	用途	設定先
Web アプリケーション	サーバー / ID トークンのオーディエンス	webClientId における SocialLogin.initialize()
Android（署名キーごとに1つ）	APK が Google を呼び出せることを証明します	Google Cloud Console のみ。この ID を以下には渡さないでください： webClientId

よくある間違いは、Android用のクライアントIDを webClientIdとして使用することです。Credential Managerでは、ここにWeb用のクライアントIDを指定する必要があります。Androidクライアント側には、コンソールに登録された正しいパッケージ名とSHA-1のみが必要です。

テストするビルドの署名に使用する証明書ごとに、Android用のOAuthクライアントを作成してください：

• Debug: ./gradlew signingReport のデバッグ用バリアントから取得します。
• Release: 実際にインストールするAPKまたはAABから取得します。
• Play App Signing: Play Console > App integrity > App signing key certificate から取得します。アップロードキーのSHA-1が登録済みであっても、Play Store向けのビルドにはこれが必要です。

この applicationId における android/app/build.gradle は、Android OAuthクライアントのパッケージ名と完全に一致している必要があります。これには .debug suffix.

OAuth同意画面が「テスト中」モードの場合は、テストに使用するすべてのGoogleアカウントを「ユーザー」>「テストユーザー」に追加してください。テストのためにアプリを本番環境に公開する必要はありません。 email と profile scopes. Digital Asset Links (assetlinks.json) は、Credential Manager を使用した Google ログインでは不要です。

Google Cloud の設定変更が反映されるまで、数時間かかる場合があります。

エラー 28444: デベロッパーコンソールの設定が正しくありません

これは、インストールされている APK の署名証明書、パッケージ名、および webClientIdの組み合わせを Google が拒否したことを意味します。以下のチェックリストを確認してください：

1. 確認事項 webClientId は Web アプリケーションのクライアント ID であり、末尾が .apps.googleusercontent.com.
2. アプリを実行してエラーを再現し、Logcat で GoogleProvider, signingSha1=や package=.
3. では Google Cloud Console > 認証情報Android OAuth クライアントを開き、パッケージ名と SHA-1 が正確であることを確認してください。
4. リリースビルドでテストする場合は、デバッグ用の keystore だけでなく、そのビルドの SHA-1 も登録してください。
5. アプリを Play Store で配信する場合は、Play App Signing の SHA-1 も登録してください。
6. Web と Android のクライアントが同じ Google Cloud プロジェクト内にあることを確認してください。
7. 同意画面が「テスト中」の状態である場合は、使用する Google アカウントがテストユーザーに含まれているか確認してください。
8. コンソールの設定変更後は、反映されるまで待ってから再度試してください。

USER_CANCELLED 設定ミスのあるデバッグビルドでアカウントを選択しても、SHA-1 またはクライアント ID の不一致が発生する可能性があります。まずは上記のコンソール設定を修正してください。

インストールしたビルドから SHA-1 を抽出する

デバッグまたはローカルビルド:

cd android && ./gradlew signingReport

署名済みリリースAPK:

keytool -printcert -jarfile android/app/release/app-release.apk

そのSHA-1を、一致するパッケージ名を持つAndroid OAuthクライアントに追加してください。その後、同じ署名済みAPKを再インストールして、再度テストを行います。

adb install android/app/release/app-release.apk

ログイン結果の取得

トークンは以下にネストされています result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Firebase Authの場合は、それを使って認証情報を作成し、 idToken WebクライアントIDを次のように使用します。 webClientId における initialize.

開発用のSHA-1証明書が取得できない場合は、カスタムキーストアを試してください。 こちらのIssueのコメントでは、 プロジェクトにキーストアを追加する方法について説明しています。

AndroidでのGoogle Loginの続きから進める

使用している場合 AndroidでのGoogle Login 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@capgo/capacitor-social-login の使用」のネイティブ機能のために、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。