Configurazione generale di Supabase Google Login

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 firma di Google Sign-In nativa sui piattaforme mobili, mentre si utilizza l'autenticazione Supabase per l'autenticazione backend.

Prerequisiti

Prima di iniziare, assicurati di avere:

1. Creato un progetto Supabase

2. Letto il Contenuto di una guida HTML di Capgo (chiave di pagina `read_the_style_guide`). Area: Sito web di marketing di Capgo. Ruolo: frase di copertina del sito web. Visualizzato in: pagina contribuente.astro. Chiave di messaggio `read_the_style_guide` (Leggi La Guida allo Stile). Configurazione generale di Google Login

3. Guida per la configurazione dei credenziali OAuth di Google per la configurazione generale di Google Login per il tuo progetto Supabase. Segui le guide specifiche per la piattaforma di destinazione per configurare i credenziali OAuth di Google per il tuo progetto Supabase:

   • Configurazione Android
   • Configurazione iOS
   • Configurazione Web

   Nota

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

Abilitazione del provider OAuth Google in Supabase

1. Vai al tuo Pannello di controllo di Supabase

2. Clicca sul tuo progetto

   

3. Andare al menu Authentication menu

   

4. Cliccare sul Providers tab

   

5. Trovare il Google provider

   

6. Abilitare il provider

   

7. Aggiungere 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 context NON DEVI IMPOSTARE Client Secret (for OAuth) E o, alcune fonti potrebbero anche suggerire di impostare Callback URL (for OAuth)per Google su iOS, ma con questo guide non è necessario. Skip nonce checks Ecco, hai ora abilitato l'accesso con Google con l'autenticazione Supabase 🎉

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

Sottosezione intitolata “Come funziona l'accesso con Google con l'aiuto dell'autenticazione Supabase”

Esecuzione completa

L'esecuzione completa è disponibile nel

file dell'applicazione di esempio. Si è abilitato l'accesso con Google con l'autenticazione Supabase. supabaseAuthUtils.ts Come funziona l'accesso con Google con l'aiuto dell'autenticazione Supabase Helper

1. Generazione del nonce

L'implementazione genera un pair di nonce sicuro in base alle richieste di nonce di 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: hash SHA-256 di rawNonce (codificato in esadecimale)
• nonceDigest viene passato a Google Sign-In → Google include il nonce digest nel token ID
• rawNonce viene passato a Supabase → Supabase hasha il nonce raw e lo confronta con il nonce del token

2. Google Sign-In

La funzione inizializza il plugin e si accede 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 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 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 TokenOn alcune piattaforme (soprattutto iOS), Google Sign-In SDK può memorizzare i token per migliorare le prestazioni. Quando viene restituito un token memorizzato, il token memorizzato potrebbe essere stato generato con un diverso nonce (o nessun nonce affatto), causando che Supabase rifiuti 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. Sicurezza (iOS): Sulla piattaforma iOS, la validazione assicura 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. Miglioramento dell'errore: Rilevando gli errori prima di Supabase consente la logica di riprova automatica, essenziale per gestire trasparentemente le problematiche 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 token fresco con nonce corretto)
3. Se anche la riprova fallisce, restituisce un errore

4. Autenticazione Supabase

4. Autenticazione 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 l'URL
• sha256Hash() - Cifra la stringa con SHA-256
• getNonce() - Genera coppia nonce
• decodeJWT() - Decodifica token JWT
• validateJWTToken() - Valida l'audience e il nonce JWT
• authenticateWithGoogleSupabase() - Funzione di autenticazione principale con ritentativo automatico

File esemplificativi aggiuntivi

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

Passaggi successivi

Sezione intitolata “Passaggi successivi”

• Si prega di procedere alla guida di configurazione specifica per la piattaforma di destinazione:
• Configurazione per Android
• Configurazione per iOS (Italiano per iOS Setup, as the original text was in English, and the translation is in Italian, so the translation is in Italian as well.)

Continua dall'accesso Google di Supabase - Configurazione generale

Se stai utilizzando Supabase Google Login - Configurazione generale per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login-social per la capacità nativa in Utilizzando @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-biometria-nativa per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.