AndroidでGoogleログイン

概要

このガイドでは、Capgo Social Login for AndroidとGoogleログインを設定する方法について説明します。 一般的なセットアップガイドを既に読んだと想定しています。.

AndroidでGoogleログインを使用する

このセクションでは、AndroidでGoogleログインを設定する方法について説明します。

注意

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

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

最後に、重要なのは、失敗するとエラーは明らかではありません。デバッグはとても難しくなります。設定に苦戦している場合、 Github.

troubleshootingセクションの Google Login設定のAndroid の詳細情報を参照してください。

Note

You may create multiple Android client IDs. This is required if you have multiple SHA1 certificates.

1. Create an Android client ID.

   1. Click on the search bar

      

   2. Search for credentials and click on the APIs and Services one (number 2 on the screenshot)

      

   3. Click on the create credentials

      

   4. Select OAuth client ID

      

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

      

   6. Android Studioを開く

   7. ナビゲーターの最下部で、Gradle Scriptsセクションを探す Gradle Scripts

      

   8. build.gradle (Module: app)ファイルを探す build.gradle . このファイルはあなたの app

      

   9. . このファイルはあなたの__CAPGO_KEEP_0__になります。 android.defaultConfig.applicationId. このファイルはあなたの__CAPGO_KEEP_0__になります。 package name In Google Console

      

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

   
   11. コマンドの先頭に移動してください。次の内容が表示されるはずです。 SHA1.
   
   12. Google Consoleに戻り、 applicationId と Package Name Androidクライアント作成フォームにパッケージ名とSHA1を入力し、 create
   

2. Create a web client (this is required for 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. フォルダを開く 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 ログインをアプリケーションに使用

   1. 最初に、 SocialLogin

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

   2. __CAPGO_KEEP_0__ を実行するボタンを作成し、クリックすると以下の __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.login. Create a button and run the following code on click.

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

      Google を初期化した場合、

      戻り値 mode: 'offline', SocialLogin.login() Copy to clipboard serverAuthCode __CAPGO_KEEP_0__のバックエンド間のデータフロー用に設定してください。呼び出さないでください。 SocialLogin.refresh({ provider: 'google' }) __CAPGO_KEEP_0__モードでアプリ内で呼び出さないでください。 serverAuthCode __CAPGO_KEEP_0__でGoogleのリフレッシュトークンを保存し、リフレッシュをバックエンドで行ってください。

5. __CAPGO_KEEP_0__をテスト用に設定してください。

   1. __CAPGO_KEEP_0__に移動し、プラスボタンをクリックしてください。 Device manager __CAPGO_KEEP_0__のデバイスマネージャーにプラスボタンが表示されます。

      

   2. __CAPGO_KEEP_0__ボタンをクリックしてください。

      

   3. __CAPGO_KEEP_0__が表示されます。 Play Store __CAPGO_KEEP_0__のデバイスを選択してください。

      

      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 __CAPGO_KEEP_0__ Google Play

      

   6. System image selection showing Google Play type images

      

   7. Next button in system image selection screen

      

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

      

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

      

   10. に Google Play

   
   11. をクリック 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__. Logcatエラー GoogleSignInClient API. Logcat errors such as GetCredentialCustomException: [28444] Developer console is not set up correctly Logcatをフィルタ

with GoogleProvider または CapgoSocialLogin 失敗したログイン後。プラグインはパッケージ名、署名のSHA-1、masked webClientId これらをGoogle Cloud Consoleと比較することができます。

必要なGoogle Cloud設定

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

クライアントタイプ	使用	場所
Webアプリケーション	サーバー/IDトークン受信者	webClientId in 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 署名 android/app/build.gradle Android OAuth クライアント パッケージ名は、任意のサフィックスを含めて正確に一致する必要があります。 .debug OAuth 同意画面がテストモードになっている場合、ユーザー > テストユーザーにテストするすべての Google アカウントを追加してください。アプリをプロダクションに公開する必要はありません。

スコープ。 email Google の Digital Asset Links ( ) は、Credential Manager を通じて Google でサインインする必要はありません。 profile Google Cloud の変更は、最大数時間かけて反映されることがあります。assetlinks.jsonエラー 28444: 開発者コンソールが正しく設定されていない

「エラー 28444: 開発者コンソールが正しく設定されていない」セクション

これはほぼ常に、インストール済みの APK 署名証明書、パッケージ名、

このチェックリストを通して、問題を解決してください。 webClientId確認

1. Confirm webClientId __CAPGO_KEEP_0__はWebアプリケーションクライアントIDであり、 .apps.googleusercontent.com.
2. アプリを実行し、エラーを再現し、Logcatを読み、 GoogleProvider, signingSha1=, および package=.
3. In 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の不一致が発生する可能性がある。コンソールの設定を修正することから始める。

__CAPGO_KEEP_0__をインストールしたビルドから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 で 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要素認証の実装詳細