Supabase Apple Login - Configuración General

Resumen

Esta guía le ayudará a integrar la autenticación de Apple con Supabase. La autenticación de Apple proporciona un método de autenticación seguro y centrado en la privacidad que funciona en iOS, Android y plataformas web.

Requisitos previos

Antes de empezar, asegúrese de tener:

1. Crear un proyecto de Supabase

2. Leído el Configuración general de inicio de sesión de Apple guía para configurar las credenciales OAuth de Apple

3. Siguio las guías específicas de la plataforma para configurar las credenciales OAuth de Apple para su plataforma objetivo:

   • Configuración de Android
   • Configuración de iOS
   • Configuración de Web

   Nota

   Antes de comenzar el tutorial de Supabase, debes generar los identificadores de cliente para las plataformas que planeas utilizar.

   Para iOS, el identificador de cliente es el mismo que tu ID de aplicación. Para Android y Web, el identificador de cliente es el mismo que tu ID de servicio. Los utilizarás en el paso 7 de esta guía.

Habilitar proveedor de autenticación OAuth de Apple en Supabase

1. Ir a tu Panel de control de Supabase

2. Haz clic en tu proyecto

   

3. No vaya al Authentication menú

   

4. Haga clic en la Providers pestaña

   

5. Encuentre el Apple proveedor

   

6. Habilite el Apple proveedor

   

7. Rellene la configuración del ID de cliente:

   Nota

   Si está utilizando inicio de sesión de Apple para iOS, el ID de cliente es el mismo que su ID de aplicación. Si está utilizando inicio de sesión de Apple para Android o Web, el ID de cliente es el mismo que su ID de servicio. Si está utilizando ambos, necesita proporcionar ambos el ID de aplicación y el ID de servicio.

   

8. Haga clic en el Save botón

   

   Nota

   Tú NO NECESITA CONFIGURAR setup Secret key (for OAuth)Realizaremos una implementación de backend personalizada para manejar el inicio de sesión de Apple.

¡Listo! Ahora has habilitado el inicio de sesión con Apple con la autenticación de Supabase 🎉

Utilizando la Ayuda de Autenticación

La implementación completa incluye una función auxiliar authenticateWithAppleSupabase() que maneja todo el flujo de inicio de sesión de Apple con Supabase. Esta función:

• Inicia el inicio de sesión de Apple con la configuración específica de la plataforma
• Maneja el flujo de autenticación (nativo en iOS, redirección de OAuth en Android/Web)
• Extrae el token de identidad de Apple
• Inicia sesión en Supabase con el token de identidad

Implementación Completa

La implementación completa está disponible en el archivo del ejemplo de la aplicación. supabaseAuthUtils.ts Basic Usage

Sección titulada “Uso Básico”

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Sección titulada “Cómo Funciona”

iOS

• La implementación completa está disponible en el archivo del ejemplo de la aplicación.Usa la autenticación de Apple nativa (no necesita URL de redirección, utiliza automáticamente el ID de paquete)
• AndroidUsa el flujo de redirección OAuth con función de borde de servidor (requiere ID de Servicio)
• WebUsa el flujo de popup OAuth (requiere ID de Servicio y la URL actual de la página como redirección)

La función devuelve un token de identidad de Apple, que luego se utiliza para autenticar con Supabase utilizando supabase.auth.signInWithIdToken().

Sigue adelante desde Supabase Apple Login - Configuración general

Si estás utilizando Configuración general de Supabase Apple Login para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social, @capgo/capacitor-login-social, para el detalle de implementación en @capgo/capacitor-login-social, @capgo/capacitor-passkey, para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-biométrica-nativa, para el detalle de implementación en @capgo/capacitor-biométrica-nativa, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.