AndroidでGoogleログイン

導入

このガイドでは、Capgo Social Login for AndroidとGoogleログインを設定する方法を学びます。一般的な設定ガイドをすでに読んだと想定しています。 AndroidでGoogleログインを使用する.

「AndroidでGoogleログインを使用する」のセクション

__CAPGO_KEEP_0__

注意

AndroidのSHA1証明書はとても苦痛で、誰にも強いことを願わない。以下の手順は、Google Play Storeに公開されていないアプリ、またはローカルシミュレータまたは開発用ハードウェアデバイスのみで使用されるシンプルなシナリオを前提としています。

Google Play Storeにアプリを公開している場合、 MUST 追加のAndroidクライアントIDを追加する必要があります。IDにはGoogle Playコンソールから取得したSHA1が含まれます。プロダクションリリース用に。Google Playがリリースバンドルに署名するSHA1ハッシュを、Google Playコンソールで見つけることができます。 Test and release > Setup > App Signing.

最後に、重要なことは、失敗するとエラーが明らかにならないことです。エラーをデバッグするのはとても難しいことになります。セットアップに苦労している場合は、 Github.

問題を解決するための Google Loginのセットアップの Android

注意

複数のAndroidクライアントIDを作成できます。これは、複数のSHA1証明書を持つ場合に必要です。

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 コンソールに戻り、 applicationId と Package Name Android クライアント作成フォームにパッケージ名と SHA1 を入力し、 create
   

2. Android クライアント作成フォーム

   1. Go to the Create credentials Google Consoleのページに移動

   2. Set application type to Web

      

   3. Click Create

      

   4. Copy the client ID, you’ll use this as the webClientId JS/TSのcodeにこのクライアントIDを使用

      

3. Modify your MainActivity

   1. Android Studioでアプリを開いてください。アプリを実行することができます。 cap open android

   2. Find MainActivity.java

      1. Android スタジオのプロジェクト ナビゲーターでフォルダを開く app フォルダ

         

      2. 見つける java

         

      3. MainActivity.java ファイルのパッケージ構造を見つける MainActivity.java 変更する。__CAPGO_KEEP_0__ を追加してください

         

   3. ファイルを保存する MainActivity.java. Please add the following 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 ログインをアプリケーションに使用する

   1. 最初に、 SocialLogin

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

   2. __CAPGO_KEEP_0__ を 1 回だけ呼び出す必要があります。

      // 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 Android Studioのデバイスマネージャーにプラスボタンが強調表示されている

      

   2. 仮想デバイス設定の「Create Virtual Device」ボタン

      

   3. デバイスのアイコン Play Store ハードウェアの選択でプレイストアをサポートするデバイスが表示されている

      

      ご覧のとおり、 pixel 8 をサポートしています。 Play Store サービス

   4. をクリック next

      

   5. OSイメージが次のタイプであることを確認してください。 Google Play. __CAPGO_KEEP_0__ のタイプであることを確認してください。 Google Play

      

   6. をクリック

      

   7. デバイスを確認してください。エミュレータに名前を付けることができます。

      

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

      

   9. シミュレータが起動したら、設定画面に

      

   10. 設定画面に Google Play

   
   11. ボタンを Update 約60秒待ってください
   

6. Updateボタン

   正しくすべてを実行した場合は、Google ログインフローが正常に動作するはずです：

   

トラブルシューティング

問題があれば、まずアプリの設定をGoogle Cloud Consoleの値と比較してください。AndroidのGoogle Sign-Inの失敗は、パッケージ名、SHA-1、またはクライアントIDの不一致によって引き起こされることがよくあります。

クレデンシャルマネージャー、SHA-1、Firebase

とSign in with Google)を使用し、LEGACYandroidx.credentials __CAPGO_KEEP_0__。ログキャットエラー GoogleSignInClient API. Logcat errors such as GetCredentialCustomException: [28444] Developer console is not set up correctly ログキャットをフィルタ

with GoogleProvider または CapgoSocialLogin 失敗したログイン後。 webClientId プラグインはパッケージ名、署名のSHA-1、そしてマスクされた

これらをGoogle Cloud Consoleと比較することができます。

セクションのタイトル：必要なGoogle Cloud設定

Google Cloudプロジェクト内に2種類のOAuth 2.0クライアントIDが必要です。	クライアントタイプ	使用する
どこに置く	Webアプリケーション	webClientId サーバー/IDトークン受信者 SocialLogin.initialize()
Android、各サインインキーごとに1つ	GoogleのAPKが許可されていることを証明します	Google Cloud Consoleのみ。 このIDを webClientId

AndroidクライアントIDを使用するのはよくない習慣です webClientIdCredential ManagerにはWebクライアントIDが必要です。 Androidクライアントには、コンソールで正しく登録されたパッケージ名とSHA-1のみが必要です。

テストするビルドを署名する各証明書に対して、Android OAuthクライアントを作成してください:

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

The applicationId アプリ内 android/app/build.gradle Android OAuth クライアント パッケージ名は、任意のサフィックスを含めて正確に一致する必要があります。 .debug OAuth 同意画面がテストモードになっている場合、ユーザー > テストユーザーでテストする Google アカウントをすべて追加してください。アプリをプロダクションに公開する必要はありません。

スコープ。 email Google の Digital Asset Links ( profile ) は、Credential Manager を使用して Google でサインインするために必要ありません。assetlinks.jsonGoogle Cloud の変更は、最大数時間かけて反映されることがあります。

エラー 28444: 開発者コンソールが正しく設定されていない

このセクションのタイトルは “エラー 28444: 開発者コンソールが正しく設定されていない” です。

の組み合わせを拒否したことを意味します。以下のチェックリストを確認してください。 webClientId確認

1. must exactly match the Android OAuth client package name, including any webClientId はWebアプリケーションクライアントIDであり、 .apps.googleusercontent.com.
2. アプリを実行し、エラーを再現し、Logcatを読み、 GoogleProvider, signingSha1=、および package=.
3. で Google Cloud Console > 資格情報で、Android OAuthクライアントを開き、正確なパッケージ名とSHA-1を確認する。
4. リリースビルドをテストしている場合、デバッグキーストアからのみSHA-1を登録するのではなく、そのビルドからSHA-1を登録する。
5. アプリがPlayストアを通じて配布されている場合、Playアプリ署名SHA-1も登録する。
6. WebアプリケーションとAndroidアプリケーションが同じGoogle Cloudプロジェクト内に存在することを確認する。
7. consent画面がテストモードである場合、Googleアカウントがテストユーザーであることを確認する。
8. コンソールの変更後、待機して再試行する。

USER_CANCELLED デバッグビルドの設定が不正である場合、まだアカウントを選択した後もSHA-1またはクライアントIDの不一致が発生する可能性がある。コンソールの設定を修正することから始めること。

ビルドをインストールしてSHA-1を抽出

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

cd android && ./gradlew signingReport

署名済みリリースAPK:

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

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

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

ログイン結果を読み取る

__CAPGO_KEEP_0__ result:

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

Firebase Authの場合、以下の資格情報を作成してください。 idToken WebクライアントIDを使用してください。 webClientId もし initialize.

開発用のSHA-1証明書が取得できない場合は、カスタムキーストアを試してください。 __CAPGO_KEEP_0__ この問題コメント

プロジェクトにキーストアを追加する方法を説明しています。

AndroidのGoogleログインから続けてください。 Android用Googleログイン 認証とアカウントフローの計画に役立つため、 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric 2要素認証 2要素認証