Android の Google ログイン

導入

このガイドでは、Capgo Social Login for AndroidとGoogleログインをセットアップする方法を学びます。 既読の一般的なセットアップガイドを読んだことを前提としています。 AndroidでGoogleログインを使用する.

general setup guide

このセクションでは、AndroidでGoogleログインを設定する方法を学びます。

注意

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

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

最後に、設定を間違えると、エラーは明らかではありません。デバッグはとても難しい場合があります。設定に苦戦している場合は、 Github.

問題を参照してください。 また、トラブルシューティングセクションの 詳細についてはこちらを参照してください。

注意

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

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

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

      

   2. で検索してください credentials の APIs and Services 検索結果の表示

      

   3. の create credentials

      

   4. 選択 OAuth client ID

      

   5. 選択する Android アプリケーションタイプ

      

   6. Android Studioを開く

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

      

   8. モジュール build.gradle build.gradle (モジュール: app) ファイルをGradle Scriptsセクションで検索 app

      

   9. Googleのソーシャルログインプラグインを使用するには、Google Consoleでプロジェクトを作成する必要があります。 android.defaultConfig.applicationIdこのプロジェクトの package name をGoogle Consoleに登録する必要があります。

      

   10. ターミナルを開いて、 android のフォルダに移動してください。 ./gradlew signInReport

   
   11. コマンドを実行してください。 SHA1.
   
   12. を確認してください。 applicationId Google Consoleに戻ってください。 Package Name に登録する必要があります。 create
   

2. Android用にWebクライアントを作成する必要があります。

   1. Google Consoleの Create credentials ページに移動します。

   2. アプリケーションの種類を Web

      

   3. Webオプションが強調表示されているアプリケーション種類の選択画面 Create

      

   4. Webクライアントの作成フォームにCreateボタンが表示されています。 webClientId in your JS/TS code

      

3. WebクライアントIDをコピーするためのクライアントID詳細画面 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 ログインをアプリケーションに使用

   1. 最初に、次のコードをインポートしてください SocialLogin

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

   2. 初期化を呼び出してください。 これは、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. Google ログインを使用するには、以下の手順に従ってください。 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. 仮想デバイス設定の「Create Virtual Device」ボタン Play Store icon

      

      このように見えますが pixel 8 Play Storeをサポートする Play Store サービス

   4. クリック next

      

   5. Capgo Builder / ネイティブクラウドビルド製品ページ (Page/area: Capgo Builder / native cloud build product page) Google Play. OSイメージのタイプが 必ず Google Play

      

   6. Google Playタイプのシステムイメージを表示する選択

      

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

      

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

      

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

      

   10. に入ります Google Play

   
   11. をクリックしてください Update 約60秒待ってください
   

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

   すべての設定が正しく行われた場合、Googleログインフローが正常に動作するはずです。

   

トラブルシューティング

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

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

Androidでは、このプラグインはGoogle Credential Manager（およびSign in with Google）を使用しますが、LEGACYandroidx.credentials __CAPGO_KEEP_0__。ログキャットエラーなど GoogleSignInClient API GetCredentialCustomException: [28444] Developer console is not set up correctly から始まるスタックから

Logcatをフィルタする GoogleProvider または CapgoSocialLogin Google Cloud Consoleで比較することができます。 webClientId Google Cloudの設定

Google Cloudの設定

種類

使用	場所	Webアプリケーション
__CAPGO_KEEP_0__	サーバー / ID トークン聴衆	webClientId で SocialLogin.initialize()
Android、署名キーごとに1つ	Googleを呼び出すことを許可されたAPKを証明する	Google Cloud Consoleのみ。 このIDを webClientId

このIDを使用するのはよくある間違いです。 AndroidクライアントIDを使用すると、Credential ManagerではWebクライアントIDが必要です。 Androidクライアントには、コンソールで正しく登録されたパッケージ名とSHA-1のみが必要です。 webClientId各テストビルドを署名する証明書ごとに1つのAndroid OAuthクライアントを作成してください:

デバッグ:

• デバッグ用の ./gradlew signingReport リリース: 実際にインストールするAPKまたはAABから
• プレイアプリ署名: Play Console > アプリの不正行為 > アプリ署名キー証明書から。このはプレイストアビルドの場合でも、アップロードキーSHA-1がすでに登録されている場合でも必要です。
• Play App Signing: from Play Console > App integrity > App signing key certificate. This is required for Play Store builds even if your upload key SHA-1 is already registered.

The applicationId in android/app/build.gradle は完全にAndroid OAuthクライアントパッケージ名を含む、任意の .debug サフィックス。

OAuthconsentスクリーンがテストモードにある場合、受信者>テストユーザーにテストするすべてのGoogleアカウントを追加してください。アプリをプロダクションに公開する必要はありません。 email 、 profile スコープ。assetlinks.jsonDigital Asset Links (

)はSign in with Google through Credential Managerのために必要ありません。

Google Cloudの変更は最大数時間かけて反映されます。

エラー 28444:開発者コンソールが正しく設定されていない webClientId. このチェックリストを確認してください:

1. 確認 webClientId はWebアプリケーションクライアントIDであり、 .apps.googleusercontent.com.
2. アプリを実行し、エラーが発生したときにログキャットを読み、 GoogleProvider, signingSha1=, および package=.
3. Google Cloud Console > 資格情報 で、Android OAuthクライアントを開き、パッケージ名とSHA-1の精確な値を確認してください。リリースビルドをテストしている場合、デバッグキーストアからSHA-1を登録するのではなく、そのビルドからSHA-1を登録してください。
4. リリースビルドを配布している場合、プレイストアを通じて配布している場合も、プレイアプリ署名のSHA-1を登録してください。
5. WebアプリケーションとAndroidクライアントは同じGoogle Cloudプロジェクト内に存在することを確認してください。
6. consent画面がテストモードの場合、Googleアカウントがテストユーザーであることを確認してください。
7. If the app is distributed through Play Store, also register the Play App Signing SHA-1.
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証明書を取得できない場合は、カスタムキーストアを試してください この問題コメント プロジェクトにキーストアを追加する方法について説明しています

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

あなたが使用している場合 Android上でGoogleログイン 認証とアカウントフローの計画に使用している場合、Cloudflareを Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-passkey Capacitorの@capgo/capacitor-passkey Capacitorの@capgo/capacitor-native-biometric Capacitorの@capgo/capacitor-native-biometric Capacitorの@capgo/capacitor-native-biometric 2要素認証 2要素認証の実装詳細について