Google Login su Android

Introduzione

In questo guide, 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

La certificazione SHA1 di Android è davvero un incubo e non vorrei che nessuno dovesse passare per questo. 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 il tuo 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 sbagli, 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 del client Android. Ciò è richiesto se hai più certificati SHA1.

1. Crea un ID del client Android.

   1. Clicca sulla barra di ricerca

      

   2. Cerca per 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 Android tipo di applicazione

      

   6. Apre Android Studio

   7. Al fondo del navigatore, trova la Gradle Scripts

      

   8. Cerca build.gradle per il modulo app

      

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

      

   10. Now, apri il terminale. Assicurati di essere nel android folder 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 indietro 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 al Create credentials page in Google Console

   2. Seleziona il tipo di applicazione 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. Si prega di aprire il tuo app in Android Studio. Puoi eseguire cap open android

   2. Cerca MainActivity.java

      1. Apre il app cartella

         

      2. Trova java

         

      3. Trova il tuo MainActivity.java e cliccaci sopra

         

   3. Modifica. Per favore aggiungi il seguente __CAPGO_KEEP_0__ MainActivity.java. Please add the following 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. Utilizza il login di Google nell'applicazione

4. In primo luogo, importa

   1. First, import 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'app in quel modo. Scambio serverAuthCode inserisci il token di rinfresco di Google nel tuo backend, e rinfresca 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, il pixel 8 supporta Play Store Servizi

   4. Clicca next

      

   5. Assicurati che l'immagine del sistema sia del tipo Google Play. DEVE ESSERE di tipo Google Play

      

   6. Clicca successivo

      

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

      

   8. Vai dentro Device Manager e avvia il tuo simulatore

      

   9. Dopo che il simulatore si è avviato, vai nelle sue impostazioni

      

   10. Vai nelle Google Play

   
   11. Clicca Update e aspetta circa 60 secondi
   

6. Testa la tua applicazione

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

   

Aiuto

Se hai problemi, per favore, guarda i Github problemi.

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

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

Continua da qui: il login di Google su Android

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 in Autenticazione a due fattori.