Saltare al contenuto principale
Capgo logo
Tutorial

Configura l'autenticazione Supabase con il plugin di login sociale Capacitor

Impara a integrare l'autenticazione Supabase con il plugin di login sociale Capgo per un'autenticazione senza intoppi con Google, Apple e Facebook nel tuo Capacitor app.

Martin Donadieu

Martin Donadieu

Responsabile del contenuto
Configura l'autenticazione Supabase con il plugin di login sociale Capacitor

Configurare l'autenticazione negli app mobili può essere complesso, ma combinando Supabase con il Capgo Plugin di accesso sociale makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

__CAPGO_KEEP_0__ app.

Perché Usare Supabase con Accesso Sociale? Supabase @capgo/capacitor-social-login @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-supabase @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase

  • Autenticazione sociale senza intoppi
  • Gestione sicura dei token
  • Compatibilità multi-piattaforma
  • Integrazione del database in tempo reale
  • Gestione degli utenti integrata

Requisiti

Prima di iniziare, assicurati di avere:

  • Un progetto Capacitor configurato
  • Un account e progetto Supabase
  • Gli account dei developer per i tuoi provider social scelti (Google, Apple, Facebook)

Passo 1: Installare e configurare il Plugin di Accesso Social

Innanzitutto, installa il plugin di accesso sociale Capgo:

npm install @capgo/capacitor-social-login
npx cap sync

Vedi le Login Social e Supabase pagina dei plugin per la configurazione specifica della piattaforma.

Passo 2: Configurazione del Progetto Supabase

Creare e configurare il tuo progetto Supabase

  1. Creare un progetto Supabase:

    • Vai a supabase.com e registrati/accedi
    • Clicca Nuovo Progetto
    • Scegli la tua organizzazione
    • Inserisci un Nome del Progetto (ad esempio, "MyApp Auth")
    • Imposta una Password del Database (salva questo in modo sicuro)
    • Scegli la tua Regione (scegli quella più vicina ai tuoi utenti)
    • Clicca Crea un nuovo progetto

  2. Ottieni le credenziali del tuo progetto:

    • Una volta creato, vai a Impostazioni > API
    • Copia il tuo URL del progetto (ad esempio https://your-project-ref.supabase.co)
    • Copia il tuo pubblico anonimo API chiave
    • Salva queste per un uso successivo nell'app

Configura le impostazioni di autenticazione

  1. Impostare le impostazioni di autenticazione generali:

    • Vai a Autenticazione > Impostazioni
    • Sotto Impostazioni generali:
      • Imposta URL del sito al tuo URL dell'app (ad esempio https://yourdomain.com o http://localhost:3000 per lo sviluppo)
      • Aggiungi ulteriori Indirizzi di reindirizzamento se necessario: 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. Configura le impostazioni di posta elettronica (facoltativo ma consigliato):

    • Sotto Impostazioni SMTP, configura il tuo provider di posta elettronica
    • Ciò abilita le conferme di posta elettronica e i reset delle password
    • Per lo sviluppo, puoi utilizzare il servizio di posta elettronica integrato

Abilita i provider di autenticazione sociale

  1. Accedi alla sezione dei provider:
    • Vai a Autenticazione > Provider In Supabase, accedi al tuo pannello di controllo
    • Vedrai una lista dei provider social disponibili
    • Ogni provider ha un' Abilita opzione di toggle e opzioni di configurazione

Ora configuriamo ogni provider sociale in dettaglio:

Passo 3: Configura i Provider Social in Supabase

Configurazione dell'autenticazione di Google in Supabase

Prima, ottieni le tue credenziali OAuth di Google:

Segui la nostra guida dettagliata di configurazione di Google: Configurazione dell'autenticazione di Google

Questa guida copre:

  • Creazione di un Progetto Cloud Google
  • Configurazione delle credenziali OAuth 2.0 per web, iOS e Android
  • Configurazione dello schermo di consenso
  • Ottieni gli ID client e le chiavi necessari

Dopo aver completato la configurazione di Google, configuralo in Supabase:

  1. Abilita il provider Google in Supabase:
    • Nella tua dashboard di Supabase, vai a Autenticazione > Provider
    • Trova Google e attivalo ON
    • Compilare la configurazione:
      • ID del client : Il tuo Google OAuth Web ID del client (dal Cloud Console di Google)
      • Segreto del client : Il tuo Google OAuth Web Segreto del client
      • URL di reindirizzamento: https://your-project-ref.supabase.co/auth/v1/callback (compilato automaticamente)
    • Clicca Salva

Importante: Utilizza il ID del Client Web e Segreto del Client Web in Supabase, anche se stai creando un'app mobile. Gli ID dei clienti mobili vengono utilizzati separatamente nella configurazione del plugin.

Configurazione dell'autenticazione Apple in Supabase

Otieni le credenziali Apple:

Segui la nostra guida dettagliata di configurazione Apple: Configurazione dell'autenticazione Apple

Questa guida copre:

  • Configurazione dell'account Apple Developer
  • Creazione degli ID App e ID Servizio
  • Configurazione della capacità di accesso con Apple
  • Generazione delle chiavi private richieste
  • Configurazione specifica per piattaforma per iOS, Android e Web

Dopo aver completato la configurazione Apple, configurala in Supabase:

  1. Abilita il provider Apple in Supabase:
    • Vai a Autenticazione > Provider e attiva Apple ON
    • Compila la configurazione:
      • ID del client : Il tuo identificatore di servizio (ad esempio, com.yourapp.signin)
      • Segreto del client : Genera questo JWT utilizzando la tua chiave privata Apple (vedi documentazione Apple di Supabase per il formato del JWT)
      • URL di reindirizzamento: https://your-project-ref.supabase.co/auth/v1/callback (riempito automaticamente)
    • Clicca “Salva”

Nota: La configurazione di autenticazione Apple è la più complessa a causa delle richieste di Apple per gli ID Servizio, le chiavi private e la generazione di JWT. Segui attentamente la nostra documentazione per ogni piattaforma.

Configurazione di autenticazione Facebook in Supabase

Ottenere le credenziali di Facebook:

Segui la nostra guida completa di configurazione Facebook: Configurazione di autenticazione Facebook

Questa guida copre:

  • Creare un account di sviluppatore Facebook e un'app
  • Aggiungere il prodotto di accesso Facebook
  • Configurare gli URI di reindirizzamento OAuth
  • Ottenere il tuo ID App, Segreto App e Token Client
  • Configurazione specifica per piattaforma per iOS e Android

Dopo aver completato la configurazione di Facebook, configuralo in Supabase:

  1. Abilita il provider Facebook in Supabase:
    • Vai a Autenticazione > Provider e attiva Facebook ATTIVO
    • Riempi le informazioni:
      • ID del client: ID dell'applicazione Facebook
      • Segreto del client: Segreto dell'applicazione Facebook
      • URL di reindirizzamento: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Clicca “Salva”

Importante: Assicurati di aggiungere l'URL di callback Supabase (https://your-project-ref.supabase.co/auth/v1/callback) alle impostazioni di Facebook Login del tuo app Facebook. Validi OAuth Redirect URIs Impostazioni di Facebook Login

Nota importante sulla configurazione di Supabase

Livello di sicurezza per riga (RLS):

  • Dopo aver configurato l'autenticazione, abilita RLS sulle tue tabelle
  • Vai a Database > Tabelle e abilita Abilita RLS per ogni tabella
  • Crea politiche per controllare l'accesso ai dati in base agli utenti autenticati

Gestione degli utenti:

  • Visualizza gli utenti autenticati in Autenticazione > Utenti
  • Monitora gli eventi di autenticazione in Autenticazione > Log
  • Configura i modelli di email in Autenticazione > Modelli email

Testare la configurazione:

  • Usa l' strumento di autenticazione test per Supabase
  • Vai a Autenticazione > Utenti e clicca su “Invita l'utente” per testare i flussi di posta elettronica
  • Controlla la Sezione dei log per eventuali errori di autenticazione

Passo 4: Configura il Plugin di Accesso Social

Ora che Supabase è configurato, devi configurare il plugin di accesso sociale con le credenziali corrispondenti. Importante: Il plugin richiede le credenziali OAuth dai provider originari provider originari (non da Supabase), mentre Supabase gestisce l'autenticazione server-side.

Come Funziona il Flusso di Autenticazione

Prima di immergersi nella configurazione, comprendi il flusso:

  1. Plugin autentica con il provider sociale (Google/Apple/Facebook) nativamente
  2. Plugin riceve i token (token di accesso, token ID) dal provider
  3. La tua app invia questi token a Supabase utilizzando signInWithIdToken()
  4. Supabase verifica i token con il provider e crea una sessione utente
  5. Supabase restituisce il proprio token JWT per le richieste autenticate dell'app

Configurazione del plugin Google

Il plugin richiede il tuo ID del client Web per tutte le piattaforme e optionalmente un ID del client iOS per le funzionalità specifiche di iOS:

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Punti chiave per Google:

  • Usa il ID del Client Web (non ID dei client Android/iOS) per il webClientId campo
  • Il plugin funzionerà su tutte le piattaforme con solo l'ID del Client Web
  • Il iOSClientId è facoltativo e viene utilizzato solo per le funzionalità iOS specifiche di Google

Configurazione del Plugin Apple

La configurazione di Apple differisce tra iOS e Android:

Per iOS (accesso nativo di Apple):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Per Android/Web (richiede ID Servizio):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Punti chiave per Apple:

  • iOS utilizza l'accesso nativo con Apple (nessuna configurazione aggiuntiva necessaria)
  • Android/Web richiede l'ID Servizio che hai creato nel Portale dello Sviluppatore Apple
  • Il redirectUrl dovrebbe corrispondere a quanto configurato in entrambi il Portale dello Sviluppatore Apple e Supabase

Configurazione Plugin Facebook

Facebook richiede il tuo ID App e Token Client:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Punti chiave per Facebook:

  • Utilizza lo stesso ID App che hai configurato in Supabase
  • Il Token Client si trova nelle Impostazioni Base del tuo App Facebook
  • limitedLogin: true abilita la funzione di accesso limitato di Facebook, focalizzata sulla privacy (disponibile solo su iOS)
  • Importante: Vedi il nostro Guida di configurazione di Facebook per informazioni dettagliate sul login limitato, incluso il considerare le ATT

Inizializzazione del Plugin Completa

Ecco come inizializzare tutti i provider insieme:

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

Note importanti:

  • Chiamare initialize() una volta quando il tuo app inizia, non prima di ogni login
  • Hai bisogno di configurare solo i provider che intendi utilizzare
  • I credenziali qui sono da provider originalinon da Supabase
  • Assicurati che le credenziali del provider corrispondano a quelle configurate in Supabase

Passo 5: Configura il client Supabase

Installa il client Supabase:

npm install @supabase/supabase-js

Crea un servizio Supabase:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Passo 6: Implementa il Flusso di Autenticazione

Crea un servizio di autenticazione che combina entrambi:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Passo 7: Implementa nel tuo App

Inizializza il servizio e gestisci l'autenticazione:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

Crea pulsanti di accesso nella tua UI:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Passo 8: Configurazione Specifica per Piattaforma

Configurazione per iOS

For dettagliate istruzioni di configurazione iOS, vedere le nostre guide specifiche per piattaforma:

Riepilogo rapido - Aggiungi a ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Segui le guide correlate per le istruzioni di configurazione iOS complete, compresa la configurazione del progetto Xcode.

Configurazione Android

Istruzioni di configurazione dettagliate per Android, vedi le nostre guide specifiche per il tuo platform:

Configurazione Android essenziale:

1. Ottieni la tua impronta SHA-1 (richiesta per Google):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. Configura AndroidManifest.xml - Aggiungi a android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Aggiungi risorse di Facebook a android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Segui le guide relative alle piattaforme per una configurazione completa di Android, inclusa la configurazione di Google Play Services e il nome del pacchetto.

Passo 9: Utilizzo del database Supabase con utenti autenticati

Una volta autenticati gli utenti, è possibile utilizzare il database di Supabase con la sicurezza di livello di riga (RLS):

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

Considerazioni di sicurezza importanti

  1. Non esporre mai le chiavi sensibili nel tuo client code
  2. Utilizza le variabili di ambiente per la configurazione
  3. Abilita la sicurezza di livello di riga in Supabase
  4. Verifica i token sul tuo backend se necessario
  5. Gestisci il rinnovo dei token automaticamente con Supabase

Risolvere Problemi Comuni

Errori di Mancanza di Token

  • Assicurati che le configurazioni del tuo provider OAuth siano coerenti tra il plugin di accesso sociale e Supabase
  • Controlla che le URL di reindirizzamento siano configurate correttamente

Problemi Specifici della Piattaforma

  • iOS: Verifica che il tuo ID bundle corrisponda alla tua configurazione del Developer Apple
  • Android: Assicurati che i fingerprint SHA1 siano aggiunti correttamente al Console di Google

Interruzioni del Flusso di Autenticazione

  • Implementare un corretto gestione degli errori per le questioni di rete
  • Aggiungere stati di caricamento durante l'autenticazione

Conclusioni

Ora hai un sistema di autenticazione completo che combina il backend robusto di Supabase con le capacità di login sociale native. Questa configurazione fornisce:

  • Autenticazione sociale nativa sicura
  • Gestione dei token senza problemi
  • Integrazione del database in tempo reale
  • Compatibilità multi-piattaforma

La combinazione di Supabase e il plugin di login sociale Capgo di Capgo offre una soluzione di autenticazione potente e scalabile per le tue Capacitor app.

Per funzionalità avanzate come autenticazione a fattore multipla o richieste personalizzate, scopri di più nel documentazione di Supabase e la documentazione del plugin di accesso sociale.

Continua da Setup Supabase Authentication con il plugin di accesso sociale Capacitor

Se stai utilizzando Setup Supabase Authentication con il plugin di accesso sociale Capacitor per pianificare l'autenticazione e le flussi di account, connettilo con @capgo/capacitor-accesso-sociale per i dettagli di implementazione in @capgo/capacitor-accesso-sociale, @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, Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori, e SSO (azienda) per il dettaglio di implementazione in SSO (azienda).

Aggiornamenti in Tempo Reale per le App Capacitor

Quando un bug del layer web è attivo, invia la correzione attraverso Capgo invece di attendere giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile davvero professionale.

Due vie di comunicazione nelle app Capacitor
Sviluppo Mobilità +1
26 aprile 2025

Due vie di comunicazione nelle app Capacitor

5 errori comuni da evitare durante le aggiornamenti OTA
Sviluppo Sicurezza +1
13 Aprile 2025

5 Errori comuni da evitare per le Aggiornamenti OTA

5 Pratiche di Sicurezza per Aggiornamenti Live di Applicazioni Mobili
Sviluppo Mobile +1
14 Gennaio 2025

5 Pratiche di Sicurezza per Aggiornamenti Live di Applicazioni Mobili

Vedi tutti dai nostri blog