Login Google su Android

Introduzione

In questa guida, imparerai a configurare l'accesso Google con Capgo Social Login per Android. Assumo che tu abbia già letto la guida di configurazione generale.

Utilizzo dell'accesso Google su Android

In questa parte, imparerai a configurare l'accesso Google in Android.

Attenzione

L'installazione del certificato SHA1 per Android è estremamente complicata e non vorrei che nessuno dovesse affrontare questa procedura. I seguenti passaggi 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 hardware.

Se hai distribuito la tua app su Google Play Store, DEVI aggiungere un ID del 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 commetti un errore, l'errore non sarà ovvio. Potrebbe essere molto difficile da debuggare. Se hai difficoltà con la configurazione, per favore guarda i Github problemi.

Inoltre, puoi guardare la sezione di risoluzione dei problemi del Google Login setup 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 credentials e clicca sul APIs and Services uno (numero 2 nella schermata)

      

   3. Clicca sul create credentials

      

   4. Seleziona OAuth client ID

      

   5. Seleziona il tipo di applicazione Android Selezione del tipo di applicazione con opzione Android evidenziata

      

   6. Alla fine della finestra di navigazione, trova la sezione

   7. Sezione dei script Gradle nella finestra di navigazione di Android Studio Gradle Scripts

      

   8. per il modulo build.gradle build.gradle (modulo: app) file nella sezione dei script Gradle app

      

   9. Questo sarà il tuo android.defaultConfig.applicationIdnel console di Google package name in Google console

      

   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 alla 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 al Create credentials pagina in Google Console

   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.javaAggiungi 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 il login di Google nell'applicazione tua

   1. Importa per primo 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.loginCrea 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 backend. Non chiamare SocialLogin.refresh({ provider: 'google' }) all'interno dell'applicazione in quel modo. Scambia serverAuthCode salva il token di rinfresco Google sul tuo backend, e rinfresca lì sul backend.

5. Configura l'emulatore per le prove

   1. Accedi a Device manager e clicca sul pulsante più

      

   2. Crea un dispositivo virtuale

      

   3. Seleziona qualsiasi dispositivo con un Play Store icona

      

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

   4. Clicca next

      

   5. Assicurati che l'immagine del sistema operativo sia del tipo Google Play. DEVE ESSERE DEL TIPO Selezione dell'immagine del sistema che mostra immagini di tipo Google Play Google Play

      

   6. Pulsante "Avanti" nella schermata di selezione dell'immagine del sistema

      

   7. Conferma il tuo dispositivo. Puoi chiamare il tuo emulatore con il nome che preferisci

      

   8. Accedi a Device Manager e avvia il tuo simulatore

      

   9. Dopo l'avvio del simulatore, accedi alle sue impostazioni

      

   10. Accedi Google Play

   
   11. Clicca Update e attendi circa 60 secondi
   

6. Verifica il tuo'applicazione

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

   

Risoluzione dei problemi

Se hai qualsiasi problema, per favore guarda il Github problemi.

I problemi con l'accesso Google sono SEMPRE relativi al certificato SHA1.

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