Login di Google 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'applicazione su Google Play Store, DEVI aggiungere un ID del client Android aggiuntivo che contiene la SHA1 dal console di Google Play 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 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 credentials e clicca sul APIs and Services il 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 nella cartella del tuo app e esegui android Terminal mostrante il comando gradlew signInReport ./gradlew signInReport

   
   11. Terminal output mostrante il fingerprint del certificato SHA1 SHA1.
   
   12. come il applicationId e il tuo SHA1 nel campo del certificato e clicca Package Name Forma di creazione del client Android con campo del pacchetto e SHA1 compilati create
   

2. Vai alla

   1. pagina in Console di Google Create credentials Create a web client (this is required for Android)

   2. Imposta il tipo di applicazione a Web

      

   3. Clicca Create

      

   4. Copia l'ID del client, utilizzerai questo come il webClientId in il 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.javaInserisci 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 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.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))

      Se inizializzi Google con

      ritorna mode: 'offline', SocialLogin.login() per il flusso di scambio backend. Non chiamare serverAuthCode in l'app in quel modo. Scambio SocialLogin.refresh({ provider: 'google' }) in l'app in quel modo. Scambio serverAuthCode inserisci il token di rinfresco Google sul tuo backend, e rinfresca sul backend.

5. Configura l'emulatore per le prove

   1. Accedi a 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 il 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 la 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:

   

Risoluzione dei problemi

Se hai dei problemi, per favore consulta il Github problemi.

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

Se non riesci ad ottenere il certificato SHA1 di sviluppo, prova a 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 Usando @capgo/capacitor-social-login per la capacità nativa in Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per il dettaglio di implementazione in @capgo/capacitor-native-biometric, e L'autenticazione a due fattori per i dettagli di implementazione nella autenticazione a due fattori.