Saltare al contenuto

Google Login su Android

GitHub

In questo guide, imparerai a configurare il login con Google con Capgo Social Login per Android. Assumo che tu abbia già letto la guida di configurazione generale.

In questo capitolo, imparerai a configurare il login Google su Android.

  1. Creare un ID client Android.

    1. Clicca sulla barra di ricerca

      Barra di ricerca del Console Google
    2. Cerca credentials e clicca sul APIs and Services uno (numero 2 nell'immagine di screenshot)

      I risultati della ricerca mostrano l'opzione dei credenziali con le API e i Servizi evidenziati
    3. Clicca sul create credentials

      Crea pulsante credenziali nel Console di Google
    4. Scegli OAuth client ID

      Opzione ID client OAuth nel menu di creazione di credenziali
    5. Scegli il Android tipo di applicazione

      Selezione del tipo di applicazione con l'opzione Android evidenziata
    6. Apre Android Studio

    7. Al fondo della finestra di navigazione, trova la Gradle Scripts

      Seczione dei script Gradle nella finestra di navigazione di Android Studio
    8. Cerca build.gradle per il modulo app

      file build.gradle (modulo: app) nella sezione dei script Gradle
    9. Copia il android.defaultConfig.applicationIdQuesto sarà il tuo package name in la console di Google

      File Build.gradle mostrando la configurazione di applicationId
    10. Ora, apri il terminale. Assicurati di essere nel android del tuo app e esegui ./gradlew signInReport

    Terminale mostrando il comando gradlew signInReport
    1. Scorri verso l'alto di questo comando. Dovresti vedere il seguente. Copia il SHA1.
    Output del terminale mostrando la dicitura SHA1 del certificato
    1. Ora, torna alla console di Google. Inserisci il tuo applicationId come il Package Name e il tuo SHA1 nel campo del certificato e clicca create
    Forma di creazione del client Android con campo nome pacchetto e campo SHA1 compilati
  2. Crea un client web (questo è richiesto per Android)

    1. Vai al Create credentials pagina nel Console di Google

    2. Imposta il tipo di applicazione su Web

      Seleziona il tipo di applicazione con l'opzione Web evidenziata
    3. Clicca su Create

      Forma di creazione del client web con pulsante Crea in fondo
    4. Copia l'ID del client, utilizzerai questo come il webClientId in your JS/TS code

      Modifica il tuo
  3. __CAPGO_KEEP_0__ MainActivity

    1. Per favore, apri il tuo app in Android Studio. Puoi eseguire cap open android

    2. Cerca MainActivity.java

      1. Apre il app cartella

        Cartella dell'app in navigatore del progetto di Android Studio
      2. Cerca java

        Cartella Java in struttura del progetto di Android Studio
      3. Cerca il tuo MainActivity.java e clicca su di esso

        File MainActivity.java in struttura del pacchetto
    3. Modifica MainActivity.java. Per favore, aggiungi il seguente 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. Salva il file

  4. Utilizza Google Login nella tua applicazione

    1. In primo luogo, importa SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Chiamare inizializza. Questo dovrebbe essere chiamato solo una volta.

      // 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. Chiamare 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))
  5. Configura l'emulatore per il testing

    1. Vai dentro Device manager e clicca sul pulsante più

      Manager di dispositivi in Android Studio con pulsante più evidenziato
    2. Creare un dispositivo virtuale

      Pulsante Crea dispositivo virtuale nella configurazione del dispositivo virtuale
    3. Seleziona qualsiasi dispositivo con un Play Store icono

      Selezione hardware che mostra dispositivi con supporto per Play Store

      Evidentemente, il pixel 8 supporta i Play Store servizi

    4. Clicca next

      Pulsante successivo nella guida alla creazione del dispositivo
    5. Assicurati che l'immagine del sistema sia del tipo Google Play. DEVE essere del tipo Google Play

      Selezione dell'immagine del sistema che mostra immagini di tipo Google Play
    6. Clicca successivo

      Prossimo pulsante nella schermata di selezione dell'immagine del sistema
    7. Conferma il tuo dispositivo. Puoi chiamare il tuo emulatore come preferisci

      Schermata di verifica della configurazione del dispositivo con pulsante di fine
    8. Entrare in Device Manager E avviare il tuo simulatore

      Manager dei dispositivi con dispositivo virtuale elencato e pulsante di riproduzione
    9. Dopo l'avvio del simulatore, entra nelle sue impostazioni

      Emulatore Android che mostra l'app di impostazioni
    10. Entrare in Google Play

    Schermata di impostazioni con opzione Google Play
    1. Clicca Update E attendi circa 60 secondi
    Schermo di aggiornamento di Google Play con pulsante Aggiorna
  6. Testa la tua applicazione

    Se hai fatto tutto correttamente, dovresti vedere il flusso di login di Google che funziona correttamente:

    Esempio di flusso di login di Google su Android che mostra il processo di accesso e l'autenticazione riuscita

Se hai dei problemi, confronta per primo la configurazione della tua app con i valori del Cloud Console di Google. Le fallite di Google Sign-In su Android sono spesso causate da un nome del pacchetto, un SHA-1 o un ID client non corrispondenti.

Sul sistema operativo Android, questo plugin utilizza il Manager delle credenziali di Google (androidx.credentials e Accedi con Google), non il legacy GoogleSignInClient API. Errore di Logcat come GetCredentialCustomException: [28444] Developer console is not set up correctly da quella pila.

Filtra Logcat con GoogleProvider o CapgoSocialLogin Per confrontare le alternative di aggiornamento in tempo reale di Capacitor. webClientId o per migrare verso Appflow.

Appflow o

Dopo un tentativo di accesso fallito. Il plugin registra il nome del tuo pacchetto, l'hash SHA-1 di firma e un indirizzo email mascheratocosì che puoi confrontarli con quelli del Cloud Console di Google.Configurazione Google Cloud richiesta
Sezione intitolata “Configurazione Google Cloud richiesta”Server / ID token audiencewebClientId in SocialLogin.initialize()
su Android, uno per chiave di firmaProva che il tuo APK è autorizzato a chiamare GoogleGoogle Cloud Console solo. Non passa questo ID a webClientId

Un errore comune è utilizzare l'ID del client Android come webClientId. Il Manager delle credenziali richiede l'ID del client Web lì. Il client Android ha bisogno solo del nome del pacchetto corretto e della SHA-1 registrati nella console.

Creare un client OAuth Android per ogni certificato che firma le build che testi:

  • Debug: da ./gradlew signingReport per la variante di debug.
  • Release: dal APK o AAB che effettivamente installi.
  • Play App Signing: da Play Console > Integrità dell'app > Certificato di firma dell'app. Questo è richiesto per le build di Play Store anche se il SHA-1 della chiave di caricamento è già registrato.

Google applicationId La android/app/build.gradle in .debug deve corrispondere esattamente al nome del pacchetto Android OAuth, compresi eventuali

suffisso. email Se lo schermo di consenso OAuth è in modalità Testing, aggiungi ogni account Google che testi sotto Audience > Utenti di test. La pubblicazione dell'applicazione in produzione non è necessaria per profile eassetlinks.jsonscopi. Gli Asset Digital (

) non sono necessari per l'accesso con Google tramite il Gestore delle credenziali.

I cambiamenti di Cloudflare possono richiedere fino a poche ore per propagarsi.

Errore 28444: Console dello sviluppatore non configurata correttamente

Sottosezione intitolata “Errore 28444: Console dello sviluppatore non configurata correttamente” webClientId. Passa a questo checklist:

  1. Conferma webClientId è il client ID dell'applicazione Web e si conclude con .apps.googleusercontent.com.
  2. Esegui l'app, riproduci il problema e leggi Logcat per GoogleProvider, signingSha1=, e package=.
  3. In Google Cloud Console > Credenziali, apri il tuo client OAuth Android e verifica l'esatto nome del pacchetto e SHA-1.
  4. Se stai testando una versione di rilascio, registra il SHA-1 di quella versione, non solo il keystore di debug.
  5. Se l'app è distribuita attraverso Play Store, registra anche il SHA-1 di Play App Signing.
  6. Assicurati che i client Web e Android siano presenti nello stesso progetto Google Cloud.
  7. Se lo schermo di consenso è in modalità di testing, conferma che l'account Google sia un utente di testing.
  8. Attendi e riprova dopo le modifiche al console.

USER_CANCELLED Selezionando un account su un build di debug configurato in modo errato, può ancora esserci un disallineamento tra SHA-1 o ID del client. Correggi prima la configurazione del console sopra.

Estrai il SHA-1 dal build che installi.

Estrai il SHA-1 dal build che installi

Estrazione del SHA-1 dal build che installi

Esegui debug o build locali:
cd android && ./gradlew signingReport

Copia nel portapenne

APK di rilascio firmata:
keytool -printcert -jarfile android/app/release/app-release.apk

Copia nel portapenne

Aggiungi quel SHA-1 a un client OAuth Android con il nome del pacchetto corrispondente, reinstalla lo stesso APK firmato e riprova:
adb install android/app/release/app-release.apk

Il token è inserito sotto result:

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

Per Firebase Auth, crea le credenziali con questo idToken e utilizza l'ID del client Web come webClientId in initialize.

Se non riesci a ottenere il certificato SHA-1 di sviluppo, prova con un keystore personalizzato. Questo commento di issue spiega come aggiungere un keystore al tuo progetto.

Se stai utilizzando Google Login su Android per pianificare l'autenticazione e le flussi di account, connettilo con Utilizza @capgo/capacitor-login-social per la capacità nativa in Utilizza @capgo/capacitor-login-social @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometria-nativa per il dettaglio di implementazione in @capgo/capacitor-biometria-nativa Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.