Saltare al contenuto

Google Login su Android

GitHub

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

In questo capitolo, imparerai a configurare l'accesso Google su Android.

  1. Crea un ID client Android.

    1. Clicca sulla barra di ricerca

      Barra di ricerca di Google Console
    2. Cerca e clicca sul credentials uno (numero 2 nella schermata) APIs and Services Risultati della ricerca mostranti l'opzione credenziali con API e Servizi evidenziati

      Clicca sul
    3. Crea credenziali nel Google Console create credentials

      Crea credenziali nel Google Console
    4. Seleziona OAuth client ID

      l'opzione ID client OAuth nella menu di creazione delle credenziali
    5. Seleziona il Android tipo di applicazione

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

    7. In fondo alla finestra di navigazione, trova la Gradle Scripts

      sezione dei Script Gradle nella navigazione del progetto di Android Studio
    8. Trova build.gradle per il modulo app

      il file build.gradle (modulo: app) nella sezione dei Script Gradle
    9. Copia il android.defaultConfig.applicationId. Questo sarà il tuo package name nel pannello di controllo di Google

      Il file Build.gradle mostrando la configurazione dell'ID dell'applicazione
    10. Ora, apri il terminale. Assicurati di essere nel android cartella del tuo app e esegui ./gradlew signInReport

    Il terminale mostrante il comando gradlew signInReport
    1. Scorri verso l'alto di questo comando. Dovresti vedere il seguente. Copia il SHA1.
    Output del terminale mostrante il fingerprint del certificato SHA1
    1. Ora, torna indietro al Pannello di controllo di Google. Inserisci il applicationId come il Package Name e il tuo SHA1 nel campo del certificato e clicca create
    Form di creazione del client Android con campo nome pacchetto e SHA1 compilati
  2. Crea un client web (questo è richiesto per Android)

    1. Vai alla Create credentials pagina in Google Console

    2. Imposta il tipo di applicazione su Web

      Selezione del tipo di applicazione con l'opzione Web evidenziata
    3. Clicca Create

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

      Dettagli dell'ID del client mostrando l'ID del client web da copiare
  3. Modifica il tuo MainActivity

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

    2. Trova MainActivity.java

      1. Apri il app cartella

        Cartella App nel navigatore del progetto Android Studio
      2. Trova java

        cartella Java nel progetto struttura di Android Studio
      3. Trova il tuo MainActivity.java e clicca su di esso

        file MainActivity.java nella struttura del pacchetto
    3. Modifica MainActivity.java. 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. Usa Google Login nel tuo applicativo

    1. In primo luogo, importa SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Chiamare initialize. 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. Crea un pulsante e esegui il seguente code al click.

      const res = await SocialLogin.login({
      provider: 'google',
      options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))
  5. Configura l'emulatore per le prove

    1. Entrare Device manager e clicca sul pulsante plus

      Gestore dispositivi in Android Studio con pulsante plus evidenziato
    2. Crea un dispositivo virtuale

      Pulsante Crea Dispositivo Virtuale nella configurazione del dispositivo virtuale
    3. Seleziona qualsiasi dispositivo con un Play Store icona

      Selezione hardware che mostra dispositivi con supporto per Play Store

      Come puoi vedere, il pixel 8 supporta i Play Store servizi

    4. Clicca next

      Il pulsante Next nella guida per la creazione del dispositivo
    5. Assicurati che l'immagine del sistema sia del tipo Google Play. DEVE ESSERE DI TIPO Selezione immagine del sistema che mostra immagini di tipo Google Play Google Play

      Clicca next
    6. Il pulsante Next nella selezione dell'immagine del sistema

      Assicurati che l'immagine del sistema sia del tipo __CAPGO_KEEP_0__
    7. Conferma il tuo dispositivo. Puoi chiamare il tuo emulatore come preferisci

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

      Pannello di gestione dei dispositivi con dispositivo virtuale elencato e pulsante di riproduzione
    9. Dopo che il simulatore si è avviato, entra nelle sue impostazioni

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

    Pantalla delle impostazioni con opzione Google Play
    1. Clicca Update e attendi circa 60 secondi
    Pantalla di aggiornamento di Google Play con pulsante di aggiornamento
  6. Testa la tua applicazione

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

    Demo del flusso di accesso Google su Android che mostra il processo di accesso e l'autenticazione riuscita

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

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

Filtra Logcat con GoogleProvider o CapgoSocialLogin dopo un fallito accesso. Il plugin registra il nome del pacchetto, l'hash SHA-1 di firma e un indirizzo webClientId così che puoi confrontarli con il Console di Google Cloud.

Sei necessari due tipi di ID client OAuth 2.0 nello stesso progetto di Google Cloud:

Tipo di clientUtilizzato perDove va
Applicazione webServer / destinazione ID tokenwebClientId In Android, uno per chiave di firma SocialLogin.initialize()
Prova che il tuo APK è autorizzato a chiamare GoogleGoogle Cloud Console solo. Non passa questo ID aUn errore comune è utilizzare l'ID del client Android come webClientId

. Il Credential Manager richiede l'ID del client Web lì. Il client Android richiede solo il nome del pacchetto corretto e la SHA-1 registrata nella console. webClientIdCreare un client OAuth Android per ogni certificato che firma le build che testi:

Debug: da

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

Il applicationId In deve corrispondere esattamente al nome del pacchetto del client Android OAuth, compresi eventuali suffissi. android/app/build.gradle Se lo schermo di consenso OAuth è in modalità Testing, aggiungi ogni account Google che testi sotto Audience > Utenti di test. La pubblicazione dell'app in Produzione non è necessaria per .debug e gli ambiti di accesso. I Digital Asset Links (

) non sono necessari per l'accesso con Google tramite Credential Manager. email I cambiamenti di Google Cloud possono richiedere fino a poche ore per propagarsi. profile Errore 28444: Il console dello sviluppatore non è configurato correttamenteassetlinks.jsonSottosezione intitolata “Errore 28444: Il console dello sviluppatore non è configurato correttamente”

Questo accade quasi sempre quando Google rifiuta la combinazione del certificato di firma APK installato, del nome del pacchetto e di

) non sono necessari per l'accesso con Google tramite Credential Manager. webClientIdI cambiamenti di Google Cloud possono richiedere fino a poche ore per propagarsi.

  1. Conferma webClientId è l'ID del client dell'applicazione Web e si conclude con .apps.googleusercontent.com.
  2. Esegui l'app, riproduci il fallimento e leggi Logcat per GoogleProvider, signingSha1=, e package=.
  3. In Google Cloud Console > Credenziali, apri il tuo client OAuth Android e verifica l'esatta denominazione del pacchetto e SHA-1.
  4. Se stai testando un build di rilascio, registra il SHA-1 da quel build, non solo il keystore di debug.
  5. Se l'app è distribuita attraverso Play Store, registra anche il SHA-1 di firma dell'app di Play.
  6. Assicurati che i client Web e Android vivano nello stesso progetto Google Cloud.
  7. Se lo schermo di consenso è in Testing, conferma che l'account Google sia un utente di test.
  8. Attendi e riprova dopo le modifiche al console.

USER_CANCELLED Dopo aver selezionato un account su una configurazione di debug non corretta, può ancora esserci un mismatch SHA-1 o ID client. Correggi la configurazione del console sopra.

Costruzioni di debug o locali:

Fenestra del terminale
cd android && ./gradlew signingReport

APK di rilascio firmata:

Fenestra del terminale
keytool -printcert -jarfile android/app/release/app-release.apk

Aggiungi quel SHA-1 a un client OAuth Android con lo stesso nome del pacchetto, reinstalla lo stesso APK firmato, e testa nuovamente:

Fenestra del terminale
adb install android/app/release/app-release.apk

I token sono nidificati sotto result:

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

Per Firebase Auth, crea le credenziali con quello idToken e utilizza il client ID web come webClientId in initialize.

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

If you are using Google Login su Android per pianificare l'autenticazione e le flussi di account, connettilo con Usando @capgo/capacitor-login-sociale per la capacità nativa in Usando @capgo/capacitor-login-sociale, @capgo/capacitor-login-sociale per il dettaglio di implementazione in @capgo/capacitor-login-sociale, @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, e Autenticazione a due fattori per i dettagli di implementazione nella autenticazione a due fattori.