Google Accedi su Android

Introduzione

In questa guida imparerai come configurare Google Accedi con Capgo Accesso social per Android. Presumo che tu abbia già letto la guida generale alla configurazione.

Utilizzando Google accedi su Android

In questa parte imparerai come configurare l’accesso a Google in Android.

Caution

Il certificato Android SHA1 è più che doloroso e non augurerei a nessuno di doverlo configurare. I passaggi seguenti presuppongono lo scenario più semplice di un’app non pubblicata su Google Play Store e utilizzata solo dal simulatore locale o dal dispositivo hardware di sviluppo.

Se hai distribuito la tua app su Google Play Store, DEVI aggiungere un ulteriore ID client Android che contenga SHA1 dalla console Google Play per le versioni di produzione. Puoi trovare l’hash SHA1 che Google Play utilizza per firmare il tuo bundle di rilascio in Test and release > Setup > App Signing.

Infine, è importante ricordare che se sbagli, l’errore NON sarà evidente. Potrebbe essere molto difficile eseguire il debug. Se hai difficoltà con la configurazione, consulta i problemi di Github.

Inoltre, puoi consultare la sezione relativa alla risoluzione dei problemi della [Google Configurazione dell’accesso per Android](#risoluzione dei problemi) per ulteriori informazioni.

Note

Puoi creare più ID cliente Android. Ciò è necessario se disponi di più certificati SHA1.

1. Crea un ID cliente Android.

   1. Fare clic sulla barra di ricerca

      

   2. Cerca credentials e fai clic su “API e servizi” (numero 2 nello screenshot)

      

   3. Fare clic su “crea credenziali”.

      

   4. Seleziona OAuth client ID

      

   5. Seleziona il tipo di applicazione Android

      

   6. Apri Android Studio

   7. Nella parte inferiore del navigatore, trova gli “Script Gradle”.

      

   8. Trova build.gradle per il modulo app

      

   9. Copia android.defaultConfig.applicationId. Questo sarà il tuo “nome pacchetto” nella console Google

      

   10. Ora apri il terminale. Assicurati di essere nella cartella android della tua app ed esegui ./gradlew signInReport

   
   11. Scorri fino all’inizio di questo comando. Dovresti vedere quanto segue. Copia SHA1.
   
   12. Ora torna alla console Google. Inserisci il tuo applicationId come Nome pacchetto e il tuo SHA1 nel campo del certificato e fai clic su create
   

2. Crea un client Web (richiesto per Android)

   1. Vai alla pagina “Crea credenziali” nella Google Console

   2. Imposta il tipo di applicazione su Web

      

   3. Fai clic su Create

      

   4. Copia l’ID cliente, lo utilizzerai come webClientId nel tuo codice JS/TS

      

3. Modifica il tuo MainActivity1. Apri l’app in Android Studio. Puoi eseguire “cap open Android”.

   2. Trova MainActivity.java

      1. Apri la cartella app

         

      2. Trova java

         

      3. Trova il tuo MainActivity.java e fai clic su di esso

         

   3. Modifica MainActivity.java. Si prega di aggiungere il seguente codice

      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. Salvare il file

4. Utilizza Google Accedi nella tua applicazione

   1. Innanzitutto, importa SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Chiama l’inizializzazione. 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. Chiama SocialLogin.login. Crea un pulsante ed esegui il seguente codice al clic.

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))

5. Configurare l’emulatore per il test

   1. Vai in “Gestione dispositivi” e fai clic sul pulsante più

      

   2. Crea un dispositivo virtuale

      

   3. Seleziona qualsiasi dispositivo con un’icona Play Store

      

      Come puoi vedere, pixel 8 supporta i servizi Play Store

   4. Fai clic su next

      

   5. Assicurati che l’immagine del sistema operativo sia di tipo Google Play. DEVE essere di tipo Google Play

      

   6. Fare clic su Avanti

      

   7. Conferma il tuo dispositivo. Puoi nominare il tuo emulatore come preferisci

      

   8. Vai in “Gestione dispositivi” e avvia il tuo simulatore

      

   9. Dopo l’avvio del simulatore, accedere alle sue impostazioni

      

   10. Vai a Google Play

   
   11. Fai clic su Update e attendi circa 60 secondi
   

6. Testa la tua applicazione

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

   

Risoluzione dei problemi

In caso di problemi, consulta i problemi di Github.

I problemi con l’accesso Google sono SEMPRE correlati al certificato SHA1.

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