Accesso con Google e Supabase - Configurazione generale

Introduzione

Questa guida ti guiderà attraverso l'integrazione di Google Sign-In con l'autenticazione Supabase utilizzando il plugin di accesso sociale Capacitor di Capgo. Questa configurazione consente di utilizzare la registrazione nativa di Google sui piattaforme mobili, mentre si utilizza l'autenticazione Supabase per l'autenticazione backend.

Requisiti

Prima di iniziare, assicurati di avere:

1. Creato un progetto Supabase

2. Letto il Setup di Google Login Generale guida per configurare le credenziali OAuth di Google

3. Seguito le guide specifiche per piattaforma per configurare le credenziali OAuth di Google per la tua piattaforma di destinazione:

   • Setup Android
   • Setup iOS
   • Impostazione Web

   Nota

   Prima di iniziare il tutorial di Supabase, è necessario generare gli ID del client per le piattaforme che si intendono utilizzare. Si utilizzeranno in passaggio 7 di questa guida.

Abilitare il provider OAuth Google in Supabase

1. Vai al tuo Pannello di controllo di Supabase

2. Clicca sul tuo progetto

   

3. Vai al Authentication menu

   

4. Clicca sul Providers tab

   

5. Trova il Google provider

   

6. Abilita il provider

   

7. Aggiungi gli ID client per le piattaforme che intendi utilizzare

   

   Nota

   Questa includeva l'ID del client web, l'ID del client iOS e l'ID del client Android. Puoi saltare la fornitura di alcuni di essi, a seconda delle piattaforme che intendi utilizzare.

8. Clicca sul Save tasto

   

Nota

Tu NON DEVI impostare Client Secret (for OAuth) o Callback URL (for OAuth). Alcune fonti potrebbero anche suggerire di impostare Skip nonce checks Ecco per Google su iOS, ma con questo guide non è più necessario.

Ecco, hai ora abilitato l'accesso con Google con l'autenticazione Supabase 🎉

Come funziona l'aiuto per l'accesso con Google con l'autenticazione Supabase

Questa sezione spiega come funziona l'integrazione dell'accesso con Google con Supabase sotto la pelle. Comprendendo questo flusso aiuterà a implementare e risolvere i problemi di autenticazione.

Esecuzione completa

L'esecuzione completa è disponibile nel file dell'applicazione di esempio. supabaseAuthUtils.ts 1. Generazione di nonce

Sottosezione intitolata “1. Generazione di nonce”

The implementation generates a secure pair of nonce following the Requisiti nonce Supabase:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Flusso:

• rawNonce: stringa casalinga random (64 caratteri esadecimali)
• nonceDigest: SHA-256 dell'hash di rawNonce (codificato in esadecimale)
• nonceDigest viene passato a Google Sign-In → Google include il digest nonce nel token ID
• rawNonce viene passato a Supabase → Supabase hasha la nonce raw e la confronta con il nonce del token

2. Google Sign-In

La funzione inizializza il plugin e si connette con Google:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. Validazione del JWT

Prima di inviare il token a Supabase, l'implementazione valuta il token JWT:

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Perché validare prima di Supabase?

La validazione del token JWT prima di inviare il token a Supabase serve diversi scopi importanti:

1. Prevenire Richieste Non Valide: Se il token ha un'audience o un nonce errato, Supabase rifiuterà comunque il token. Validare prima evita chiamate API non necessarie e fornisce messaggi di errore più chiari.

2. Issue di Cache dei Token: Su alcune piattaforme (soprattutto iOS), Google Sign-In SDK può memorizzare i token per prestazioni. Quando viene restituito un token memorizzato, il token memorizzato potrebbe essere stato generato con un diverso nonce (o nessun nonce), causando Supabase a rifiutare il token con un errore di “mismatch nonce”. Validando prima di inviare a Supabase, possiamo rilevare questo problema in anticipo e riprovare automaticamente con un token fresco.

3. La sicurezza (iOS): Assicurazione della validità del token garantisce che il token sia stato emesso per i tuoi ID Client Google specifici, prevenendo potenziali problemi di sicurezza dall'utilizzo di token destinati ad altre applicazioni.

4. Errore Migliorato: La detezione degli errori prima che Supabase consenta la logica di riprova automatica, essenziale per la gestione trasparente degli errori di caching iOS.

Se la validazione fallisce, la funzione esegue automaticamente:

1. Si disconnette da Google (elimina i token memorizzati - critico su iOS)
2. Riprova l'autenticazione una volta (forza la generazione di un nuovo token con nonce corretto)
3. Se anche la riprova fallisce, restituisce un errore

4. Accesso a Supabase

Infine, il token validato viene inviato a Supabase:

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Completa la Code Documentazione

La completa implementazione è disponibile nel file dell'applicazione di esempio, che include: supabaseAuthUtils.ts - Genera un nonce sicuro per l'URL

• getUrlSafeNonce() - Cifra una stringa con SHA-256
• sha256Hash() - Genera coppia nonce
• getNonce() - Decodifica token JWT
• decodeJWT() - Valida l'audience e il nonce del token JWT
• validateJWTToken() - Funzione di autenticazione principale con ritentativo automatico
• authenticateWithGoogleSupabase() Esempi di File Aggiuntivi

Sezione intitolata “Esempi di File Aggiuntivi”

• SupabasePage.tsx - Esempio di componente con gestione del redirect (Web)
• SupabaseCreateAccountPage.tsx - Esempio di pagina di registrazione

Passaggi successivi

Per favore procedi al guide di configurazione specifica per la tua piattaforma:

• Configurazione per Android
• Configurazione per iOS
• Configurazione per Web

Continua da Supabase Google Login - Configurazione generale

Se stai utilizzando Supabase Google Login - Impostazioni Generali per pianificare l'autenticazione e le flussi di account, connettilo con Usando @capgo/capacitor-login-social per la capacità nativa in Usando @capgo/capacitor-login-social, @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometric-nativo per il dettaglio di implementazione in @capgo/capacitor-biometric-nativo, e L'autenticazione a due fattori per i dettagli di implementazione nella autenticazione a due fattori.