Login di Google su Android

Introduzione

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

Utilizzare il login Google su Android

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

Attenzione

Il certificato SHA1 di Android è un incubo e non vorrei che nessuno dovesse passare per questo. I passaggi seguenti presuppongono lo scenario più semplice di un'applicazione non pubblicata su Google Play Store e utilizzata solo dal simulatore locale o dal dispositivo di sviluppo.

Se hai distribuito il tuo'applicazione su Google Play Store, DEVI aggiungere un ID di client Android aggiuntivo che contiene il SHA1 dal Google Play console per le rilasci di produzione. Puoi trovare l'hash SHA1 che Google Play utilizza per firmare il tuo bundle di rilascio sotto Test and release > Setup > App Signing.

Infine, è importante menzionare che se sbagli, l'errore NON sarà evidente. Potrebbe essere molto difficile da debuggare. Se hai difficoltà con la configurazione, per favore consulta il Github issues.

Inoltre, puoi consultare la sezione di risoluzione dei problemi del setup di Google Login per Android per ulteriori informazioni.

Nota

Puoi creare più ID client Android. Ciò è richiesto se hai più certificati SHA1.

1. Crea un ID client Android.

   1. Clicca sulla barra di ricerca

      

   2. Cerca e credentials clicca sul APIs and Services uno (numero 2 nella schermata)

      

   3. Clicca sul create credentials

      

   4. Scegli OAuth client ID

      

   5. Scegli il Android tipo di applicazione

      

   6. Apre Android Studio

   7. Al livello più basso della navigazione, trova la Gradle Scripts

      

   8. Cerca build.gradle For il modulo app

      

   9. Copia il android.defaultConfig.applicationIdQuesto sarà il tuo package name nel console di Google

      

   10. Ora, apri il terminale. Assicurati di essere nel android cartella del tuo app e esegui ./gradlew signInReport

   
   11. Scorri verso l'alto di questo comando. Dovresti vedere il seguente. Copia il SHA1.
   
   12. Ora, torna al Console di Google. Inserisci il applicationId come il Package Name e il tuo SHA1 nel campo del certificato e clicca create
   

2. Crea un client web (questo è richiesto per Android)

   1. Vai alla Create credentials pagina nel Console di Google

   2. Imposta il tipo di applicazione a Web

      

   3. Clicca Create

      

   4. Copia l'ID del client, utilizzerai questo come il webClientId nel tuo JS/TS code

      

3. Modifica il tuo MainActivity

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

   2. Trova MainActivity.java

      1. Apri il app cartella

         

      2. Trova java

         

      3. Trova il tuo MainActivity.java e clicca su di esso

         

   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. Usa il login di Google nella tua applicazione

   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))

      Attenzione

      Se inizializzi Google con mode: 'offline', SocialLogin.login() ritorna serverAuthCode per il flusso di scambio del backend. Non chiamare SocialLogin.refresh({ provider: 'google' }) nel tuo app in quel modo. Scambia serverAuthCode sul tuo backend, memorizza il token di rinfresco di Google lì, e rinfresca sul backend.

5. Configura l'emulatore per le prove

   1. Entrare in Device manager e clicca sul pulsante plus

      

   2. Crea un dispositivo virtuale

      

   3. Seleziona qualsiasi dispositivo con un Play Store icona

      

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

   4. Clicca next

      

   5. Assicurati che l'immagine del sistema sia di tipo Google Play. DEVI essere di tipo Google Play

      

   6. Clicca su next

      

   7. Verifica la configurazione del tuo dispositivo. Puoi chiamare il tuo emulatore come preferisci

      

   8. Accedi a Device Manager e avvia il tuo simulatore

      

   9. Dopo che il simulatore si è avviato, accedi alle sue impostazioni

      

   10. Accedi a Google Play

   
   11. Clicca Update e attendi circa 60 secondi
   

6. Verifica la tua applicazione

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

   

Risoluzione dei problemi

Se hai problemi, per favore guarda il Github problemi.

I problemi con il login di Google sono SEMPRE relativo al certificato SHA1.

Se non riesci ad ottenere il certificato SHA1 di sviluppo, prova ad utilizzare un keystore personalizzato. Ecco un commento che spiega come aggiungere il keystore al tuo progetto.

Continua da Google Login su Android

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