Configurazione di base per il login con Google di Supabase

Introduzione

Questa guida ti guiderà nell'integrazione di Google Sign-In con l'autenticazione Supabase utilizzando il plugin di accesso sociale Capacitor. Questa configurazione consente di utilizzare la firma di Google Sign-In su piattaforme mobili mentre si utilizza l'autenticazione Supabase per l'autenticazione backend.

Requisiti preliminari

Prima di iniziare, assicurati di avere:

1. Creato un progetto Supabase

2. Letto il Impostazione di Google Login Generale Guida per l'impostazione delle credenziali di autenticazione OAuth di Google

3. Hai seguito le guide specifiche per piattaforma per l'impostazione delle credenziali di autenticazione OAuth di Google per la tua piattaforma di destinazione:

   • Impostazione per Android
   • Impostazione per iOS
   • Impostazione per Web

   Nota

   Prima di iniziare il tutorial di Supabase, è necessario generare gli ID client per le piattaforme che hai pianificato di utilizzare. Li utilizzerai nel passaggio 7 di questa guida.

Abilitazione del provider di autenticazione OAuth di Google in Supabase

1. Vai al tuo Pannello di controllo Supabase

2. Clicca sul tuo progetto

   

3. Non vai al Authentication menu

   

4. Clicca sul Providers tab

   

5. Trova il Google provider

   

6. Abilita il provider

   

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

   

   Nota

   Questa include 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 button

   

Nota

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

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

Come funziona l'helper di accesso con Google con l'autenticazione Supabase

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

Implementazione Completa

La completa implementazione è disponibile nel file dell'applicazione di esempio. supabaseAuthUtils.ts 1. Generazione del nonce

Sezione intitolata “1. Generazione del nonce”

richieste di nonce di Supabase Copia negli appunti:

// 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 };
}

: stringa casalinga randomizzata (64 caratteri esadecimali)

• rawNonce: hash SHA-256 di
• nonceDigest(codificato in esadecimale) rawNonce 1. Generazione del nonce
• nonceDigest viene passato a Google Sign-In → Google include il digest nonce nel token ID
• rawNonce viene passato a Supabase → Supabase crittografa il nonce raw e lo 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. JWT Validation

Prima di inviare il token a Supabase, l'implementazione valida 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 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. La validazione iniziale evita chiamate API non necessarie e fornisce messaggi di errore più chiari.

2. Issue con la 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

3. . Validando prima di inviare a Supabase, possiamo rilevare questo problema in anticipo e riprovare automaticamente con un token fresco. Sicurezza

4. (iOS): La validazione assicura che il token sia stato emesso per i Client ID Google specifici, prevenendo potenziali problemi di sicurezza dall'utilizzo di token destinati ad altre applicazioni. Miglioramento della Gestione degli Errori

: Rilevare gli errori prima che Supabase consenta la logica di riprova automatica, essenziale per la gestione trasparente degli errori di caching iOS.

1. Se la validazione fallisce, la funzione automaticamente:
2. Logga fuori da Google (elimina i token memorizzati - critico su iOS)
3. Riprova l'autenticazione una volta (forza la generazione di un token fresco con nonce corretto)

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
});

Riferimento completo Code

La completa implementazione è disponibile nell' esempio di applicazione supabaseAuthUtils.ts file, che include:

• getUrlSafeNonce() - Genera un nonce sicuro per URL
• sha256Hash() - Cifra una stringa con SHA-256
• getNonce() - Genera coppia nonce
• decodeJWT() - Decodifica token JWT
• validateJWTToken() - Verifica l'audience e il nonce del token JWT
• authenticateWithGoogleSupabase() - Funzione di autenticazione principale con ripetizione automatica

File di esempio aggiuntivi

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

Passaggi successivi

Procedere al guide di configurazione specifica per la piattaforma di destinazione:

• Configurazione Android
• Configurazione iOS
• Configurazione Web