Android の Google ログイン

導入

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

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

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

注意

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

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

最後に、重要な点を述べる必要があります。設定を間違えると、エラーは明らかではありません。デバッグは非常に困難になる可能性があります。設定に苦戦している場合は、 Github.

また、 AndroidでGoogleログインを設定する 詳細はこちら。

注意

複数の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 (Module: app) ファイルをGradle Scriptsセクションで見つける app

      

   9. Googleのソーシャルログインプラグインを使用するには、Google Consoleでプロジェクトを作成する必要があります。 android.defaultConfig.applicationIdプロジェクトを作成したら、Google ConsoleでOAuthクライアントIDとシークレットを取得します。 package name プロジェクトを作成したら、Google ConsoleでOAuthクライアントIDとシークレットを取得します。

      

   10. ターミナルを開いて、プロジェクトのルートディレクトリに移動してください。 android ターミナルでgradlew signInReportコマンドを実行してください。 ./gradlew signInReport

   
   11. コマンドの出力からSHA1証明書の指紋をコピーしてください。 SHA1.
   
   12. OAuthクライアントIDとSHA1証明書の指紋を入力したら、保存ボタンをクリックしてください。 applicationId OAuthクライアントIDとSHA1証明書の指紋を入力したら、保存ボタンをクリックしてください。 Package Name OAuthクライアントIDとSHA1証明書の指紋を入力したら、保存ボタンをクリックしてください。 create
   

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

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

   2. Google Consoleの設定 Web

      

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

      

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

      

3. クライアントIDの詳細を表示し、Webクライアント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. 呼び出し 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() 返します serverAuthCode バックエンドのエクスチェンジフロー用に SocialLogin.refresh({ provider: 'google' }) アプリ内で呼び出さないでください serverAuthCode モードでアプリ内で呼び出すな

5. バックエンドでエクスチェンジする場合、Googleのリフレッシュトークンをそこに保存し、バックエンドでリフレッシュする

   1. エミュレータをテスト用に設定する Device manager に移動し

      

   2. Android Studioのデバイスマネージャーに移動し、プラスボタンが強調表示されている

      

   3. 仮想デバイス設定で作成の仮想デバイスボタンをクリック Play Store アイコン

      

      このように見ると、 pixel 8 プレイストア対応の Play Store サービス

   4. クリック next

      

   5. Capgo Builder / ネイティブクラウドビルド製品ページ (Page/area: Capgo Builder / native cloud build product page. Role: Short UI label or navigation item.) 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）を使用しますが、LEGACYのものではありません。androidx.credentials __CAPGO_KEEP_0__。ログキャットエラーなど GoogleSignInClient API GetCredentialCustomException: [28444] Developer console is not set up correctly から始まるスタックから

ログキャットをフィルタする GoogleProvider または CapgoSocialLogin Capacitorライブアップデートの代替 webClientId 失敗したログイン後、プラグインはパッケージ名、署名のSHA-1、およびマスクされた

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

セクション「Google Cloudの設定が必要です」

同じGoogle Cloudプロジェクト内に2種類のOAuth 2.0クライアントIDが必要です:	クライアントタイプ	使用する
どこに置くか	サーバー / ID トークン聴衆	webClientId in SocialLogin.initialize()
Android、署名キーごとに1つ	GoogleにAPKが許可されていることを証明します	Google Cloud Consoleのみ。IDをここに渡さないでください webClientId

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

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

• デバッグ: ./gradlew signingReport デバッグ用
• リリース: 実際にインストールするAPKまたはAABから
• リリース用

Android OAuthクライアントパッケージ名は、任意の applicationId オートメーション android/app/build.gradle パッケージ名のサフィックスを含めて、完全に一致する必要があります。 .debug テストモードのOAuthconsent画面があれば、Audience > Test usersの下にテストするGoogleアカウントをすべて追加してください。アプリをProductionに公開する必要はありません。

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

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

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

エラー 28444: 開発者コンソールが正しく設定されていない webClientId. Androidアプリを実行し、エラーが発生した場合のログを確認してください。

1. 確認 webClientId はWebアプリケーションクライアントIDであり、 .apps.googleusercontent.com.
2. Run the app, reproduce the failure, and read Logcat for GoogleProvider, signingSha1=, および package=.
3. In Google Cloud Console > Credentials, 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

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証明書を取得できない場合は、カスタムキーストアを試してください この問題コメント プロジェクトにキーストアを追加する方法について説明しています

AndroidのGoogleログインから続けてください

あなたが使用している Googleログイン 認証とアカウントフローの計画に使用している場合 Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細について