Google Login on Android

導入

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

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

general setup guide

注意

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

Google Play Storeにアプリを公開している場合、 MUST productionリリース用にGoogle PlayコンソールからSHA1を含む追加のAndroidクライアントIDを追加する必要があります。 Test and release > Setup > App Signing.

Google Playがリリースバンドルを署名するために使用するSHA1ハッシュを確認するには Github issues.

__CAPGO_KEEP_0__ 問題 トラブルシューティングセクションの AndroidのGoogleログインセットアップ

注意

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

1. AndroidクライアントIDを作成します。

   1. 検索バーをクリックしてください

      

   2. を検索してください credentials と検索結果の APIs and Services 2番目のスクリーンショットの数字

      

   3. をクリックしてください create credentials

      

   4. を選択してください OAuth client ID

      

   5. Select the Android アプリケーションタイプ

      

   6. Android Studioを開く

   7. ナビゲーターの最下部で、 Gradle Scripts

      

   8. Find build.gradle モジュール app

      

   9. . この値は、モジュールの android.defaultConfig.applicationId. This will be your package name Googleコンソール

      

   10. ターミナルを開いてください。アプリのフォルダに移動し、 android ターミナルで gradlew signInReportコマンドを実行してください ./gradlew signInReport

   
   11. ターミナル出力にSHA1の証明書の指紋が表示されます。 SHA1.
   
   12. に設定し、証明書のSHA1を入力し、 applicationId Androidクライアント作成フォームにパッケージ名とSHA1を入力し、 Package Name Webクライアントを作成してください（Android用に必要です） create
   

2. Webクライアントを作成してください（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 code

      

3. Modify your MainActivity

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

   2. Find MainActivity.java

      1. Open the app folder

         

      2. Find java

         

      3. Find your MainActivity.java とクリックしてください

         

   3. Modify 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 ログインをアプリケーションに使用

   1. 最初に、 SocialLogin

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

   2. __CAPGO_KEEP_0__ を実行するには、ボタンを作成し、次のコードをクリック時に実行してください。

      // 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.loginGoogle を初期化するには、次の 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 Playストアをサポートするデバイスが表示されているハードウェア選択画面

      

      As you can see, the pixel 8 supports the Play Store services

   4. Click next

      

   5. Next button in device creation wizard Google Play. Make sure that the OS image is of type IT MUST Google Play

      

   6. System image selection showing Google Play type images

      

   7. Next button in system image selection screen

      

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

      

   9. シミュレータが起動したら、その設定画面に進んでください

      

   10. __CAPGO_KEEP_0__に Google Play

   
   11. __CAPGO_KEEP_0__を Update 約60秒待ってください
   

6. アプリケーションをテストしてください

   正しく設定が完了している場合、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、maskedをログします。

これらを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を使用するのはよくない習慣です webClientId. WebクライアントIDが必要です。 Credential ManagerにはWebクライアントIDが必要です。

AndroidクライアントIDは、コンソールで正しくパッケージ名とSHA-1を登録している場合にのみ必要です。

• 各テストビルドを署名する証明書ごとに、Android OAuthクライアントを作成してください ./gradlew signingReport デバッグ:
• デバッグ用に
• リリース: 実際にインストールするAPKまたはAABから

Play App Signing: Play Console > アプリの安全性 > アプリ署名キー証明書から。この必要です。Play Storeビルドの場合、アップロードキーSHA-1が既に登録されている場合でも。 applicationId 署名キーごとに1つの android/app/build.gradle Android OAuthクライアントパッケージ名を含む任意のサフィックスと完全に一致する必要があります。 .debug OAuth承認画面がテストモードになっている場合、ユーザー > テストユーザー下のすべてのGoogleアカウントを追加してください。アプリをProductionに公開する必要はありません。

Googleアカウントを使用したSign inの場合、Digital Asset LinksはCredential Managerを使用する場合にのみ必要です。 email Google Cloudの変更は最大数時間かかることがあります。 profile エラー 28444:開発者コンソールが正しく設定されていないassetlinks.json「エラー 28444:開発者コンソールが正しく設定されていない」

これはほとんどの場合、Googleがインストール済みのAPK署名証明書、パッケージ名、

の組み合わせを拒否したことを意味します。

確認 webClientIdConfirm

1. Confirm webClientId __CAPGO_KEEP_0__はWebアプリケーションクライアントIDであり、 .apps.googleusercontent.com.
2. アプリを実行し、エラーが発生した場合にログキャットを参照し、 GoogleProvider, signingSha1=、および package=.
3. In Google Cloud Console > 資格情報、Android OAuthクライアントを開き、パッケージ名とSHA-1を確認する
4. リリースビルドをテストしている場合、デバッグキーストアからSHA-1を登録するのではなく、そのビルドからSHA-1を登録する
5. 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

ログイン結果を読み取る

トークンは次のようになります result:

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

Firebase Authの場合、次のクレデンシャルを作成してください idToken WebクライアントIDを使用して webClientId in initialize.

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

Google Login on Androidから続けてください

使用中の場合 Google Android のログイン を計画し、認証とアカウントフローの接続を行うには @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要素認証 2要素認証の実装詳細