Google Login su Android

Copia un prompt di setup con i passaggi di installazione e la guida markdown completa per questo plugin.

Introduzione

In questa guida imparerai a configurare Google Login con Capgo Social Login per Android. Presumo che tu abbia già letto la guida alla configurazione generale.

In questa parte imparerai a configurare Google login su Android.

Configurare il certificato SHA1 di Android è un incubo che non augurerei a nessuno. I passaggi seguenti assumono lo scenario più semplice: un'app non pubblicata sul Google Play Store, utilizzata solo tramite simulatore locale o dispositivo di sviluppo.

Se hai già distribuito la tua app sul Google Play Store, devi CHIAMARE aggiungere un client ID Android extra che contenga lo SHA1 della Google Play console per i rilasci in produzione. Trovi l'hash SHA1 che Google Play usa per firmare il tuo release bundle in Test and release > Setup > App Signing.

Infine, ricorda che se commetti un errore, il messaggio non sarà ovvio. Potrebbe essere molto difficile da debuggare. Se hai problemi con la configurazione, consulta problemi con Github.

Inoltre, puoi consultare la sezione troubleshooting di Configurazione di Google Login per Android per ulteriori informazioni.

Crea un client ID Android.
1. Clicca sulla barra di ricerca
2. Cerca credentials and click on the APIs and Services quello (numero 2 nello screenshot)
3. Clicca sul create credentials
4. Seleziona OAuth client ID
5. Seleziona il Android tipo di applicazione
6. Apri Android Studio
7. In fondo al navigatore, trova il Gradle Scripts
8. Trova build.gradle per il modulo app
9. Copia il android.defaultConfig.applicationId. Questo sarà il tuo package name nella console di Google
10. Ora, apri il terminale. Assicurati di essere nella android cartella della tua app ed esegui ./gradlew signInReport
1. Scorri fino all'inizio del comando. Dovresti vedere quanto segue. Copia il SHA1.
1. Ora, torna sulla Google Console. Inserisci il tuo applicationId come Package Name e il tuo SHA1 nel campo del certificato e clicca create
Crea un web client (necessario per Android)
1. Vai su Create credentials pagina nella Google Console
2. Imposta il tipo di applicazione su Web
3. Clicca su Create
4. Copia il client ID, che userai come webClientId nel tuo code JS/TS

Modifica il tuo MainActivity

Apri la tua app in Android Studio. Puoi eseguire cap open android
Trova MainActivity.java
1. Apri la app cartella
2. Trova java
3. Trova il tuo MainActivity.java e cliccaci sopra

Modifica MainActivity.java. 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() {}
}

Salva il file

Usa Google Login nella tua applicazione
1. Per prima cosa, importa SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Chiama initialize. Deve essere chiamato una sola 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. Esegui SocialLogin.login. Crea un pulsante ed 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 mode: 'offline', SocialLogin.login() restituisce serverAuthCode per il tuo flusso di scambio backend. Non chiamare SocialLogin.refresh({ provider: 'google' }) nell'app in quella modalità. Scambia serverAuthCode sul tuo backend, salva lì il refresh token di Google e aggiornalo lato backend.
Configura l'emulatore per i test
1. Vai su Device manager e clicca sul tasto più
2. Crea un dispositivo virtuale
3. Seleziona un dispositivo con Play Store icona
  
  Come puoi vedere, pixel 8 supporta i Play Store services
4. Clicca su next
5. Assicurati che l'immagine OS sia di tipo Google Play. DEVE ESSERE sia di tipo Google Play
6. Clicca su Avanti
7. Conferma il dispositivo. Puoi dare al tuo emulatore il nome che preferisci
8. Entra in Device Manager e avvia il tuo simulatore
9. Dopo l'avvio del simulatore, entra nelle impostazioni
10. Vai in Google Play
1. Clicca su Update e attendi circa 60 secondi
Testa la tua applicazione

Se hai fatto tutto correttamente, vedrai il flusso di login di Google funzionare correttamente:

Risoluzione problemi

In caso di problemi, confronta prima la configurazione della tua app con i valori su Google Cloud Console. I fallimenti di Google Sign-In su Android sono solitamente causati da discrepanze nel package name, nello SHA-1 o nel client ID.

Credential Manager, SHA-1 e Firebase

Su Android questo plugin utilizza Google Credential Manager (androidx.credentials e Sign in with Google), non il vecchio GoogleSignInClient API. Errori Logcat come GetCredentialCustomException: [28444] Developer console is not set up correctly provengono da quello stack.

Filtra Logcat con GoogleProvider o CapgoSocialLogin dopo un login fallito. Il plugin logga il package name, lo SHA-1 di firma e un webClientId mascherato, così puoi confrontarli con Google Cloud Console.

Configurazione Google Cloud richiesta

Ti servono due tipi di client ID OAuth 2.0 nello stesso progetto Google Cloud:

Tipo di client	Utilizzo	Destinazione
Applicazione web	Audience del token ID del server	`webClientId` le `SocialLogin.initialize()`
Android, uno per chiave di firma	Verifica che l'APK possa chiamare Google	Solo Google Cloud Console. Non passare questo ID a `webClientId`

Un errore comune è usare l'Android client ID come webClientId. Credential Manager richiede il Web client ID. L'Android client necessita solo del nome del package e dello SHA-1 registrati nella console.

Crea un client OAuth Android per ogni certificato che firma i build che testi:

Debug: da ./gradlew signingReport per la variante debug.
Release: dall'APK o AAB che installi effettivamente.
Play App Signing: da Play Console > App integrity > App signing key certificate. È necessario per i build del Play Store, anche se lo SHA-1 della tua upload key è già registrato.

L'oggetto applicationId le android/app/build.gradle deve corrispondere esattamente al package name dell'Android OAuth client, inclusi eventuali .debug suffissi.

Se la schermata di consenso OAuth è in modalità Testing, aggiungi ogni account Google che usi sotto Audience > Test users. Non è necessario pubblicare l'app in Production per email e profile scope. Digital Asset Links ("assetlinks.json) non sono richiesti per il Sign in with Google tramite Credential Manager.

Le modifiche a Google Cloud possono impiegare fino a qualche ora a propagarsi.

Errore 28444: la Developer console non è configurata correttamente

Questo significa quasi sempre che Google ha rifiutato la combinazione tra il certificato di firma dell'APK installato, il package name e webClientId. Segui questa checklist:

Verifica che webClientId sia il client ID dell'applicazione Web e termini con .apps.googleusercontent.com.
Avvia l'app, riproduci l'errore e leggi i log su Logcat per GoogleProvider, signingSha1=, e package=.
In Google Cloud Console > Credenziali, apri il client OAuth di Android e verifica il nome del package e lo SHA-1 esatti.
Se stai testando una release build, registra lo SHA-1 di quella build, non solo quello del debug keystore.
Se l'app è distribuita tramite Play Store, registra anche lo SHA-1 di Play App Signing.
Assicurati che i client Web e Android si trovino nello stesso progetto Google Cloud.
Se la schermata di consenso è in modalità Testing, conferma che l'account Google sia un utente di test.
Attendi e riprova dopo aver modificato la console.

USER_CANCELLED dopo aver scelto un account in una debug build errata, potrebbe trattarsi ancora di un mismatch di SHA-1 o client ID. Correggi prima la configurazione della console sopra.

Estrai lo SHA-1 dalla build che installi

Build di debug o locali:

cd android && ./gradlew signingReport

APK release firmata:

keytool -printcert -jarfile android/app/release/app-release.apk

Aggiungi quello SHA-1 a un client OAuth di Android con il relativo package name, reinstalla lo stesso APK firmato e riprova:

adb install android/app/release/app-release.apk

I token sono annidati sotto result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Per Firebase Auth, crea le credenziali con idToken e usa il Web client ID come webClientId le initialize.

Se non riesci a ottenere il certificato SHA-1 di sviluppo, prova un keystore personalizzato. Questo commento su spiega come aggiungere un keystore al progetto.

Se stai usando Google Login su Android per pianificare i flussi di autenticazione e account, collegalo con Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.