Configuración de inicio de sesión de Apple - Configuración general

Resumen

Esta guía te ayudará a integrar Apple Sign-In con Supabase Authentication. Apple Sign-In proporciona un método de autenticación seguro y centrado en la privacidad que funciona en plataformas iOS, Android y Web.

Requisitos previos

Antes de empezar, asegúrate de que tienes:

1. Crear un proyecto de Supabase

2. Leído el context Guía para configurar las credenciales OAuth de Apple

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

   • Configuración para Android
   • Configuración para iOS
   • Configuración para 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 el proveedor de OAuth de Apple en Supabase

1. Vaya a tu Panel de Supabase

2. Haga clic en su proyecto

   

3. No vaya a la Authentication menú

   

4. Haga clic en la Providers pestaña

   

5. Encuentre el Apple proveedor

   

6. Activar 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 TIENES QUE configurar Secret key (for OAuth). Nosotros realizaremos una implementación de backend personalizada para manejar la autenticación de Apple.

¡Listo! Has habilitado ahora el inicio de sesión con Apple y la autenticación de Supabase 🎉

Usando la Ayuda de Autenticación

que maneja todo el flujo de inicio de sesión con Apple y Supabase. Esta función: authenticateWithAppleSupabase() Inicia el inicio de sesión con Apple con la configuración específica de plataforma

• Maneja el flujo de autenticación (nativo en iOS, redirección de OAuth en Android/Web)
• Nota
• Extrae el token de identidad de Apple
• Se 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 aplicación supabaseAuthUtils.ts Uso básico

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

context: Capgo Builder / producto de construcción nativa de la nube. Papel: Título de sección o página. Clave de mensaje `native_build_how_it_works_title` (Título de cómo funciona la construcción nativa). | Área/página: Sección de problemas/soluciones de la página de inicio. Papel: Etiqueta de interfaz de usuario corta o elemento de navegación. Visto en: página premium-support.astro. Clave de mensaje `ps_how_it_works` (Ps ¿Cómo funciona). | Área/página: Página de producto de actualizaciones en vivo. Papel: Título de sección o página. Visto en: página live-update.astro. Clave de mensaje `live_update_how_it_works_title` (Título de cómo funciona la actualización en vivo).

La función de ayuda maneja automáticamente las diferencias específicas de la plataforma:

• iOS: Utiliza la autenticación nativa de Apple Sign-In (no se necesita una URL de redirección, utiliza automáticamente el ID de paquete)
• Android: Utiliza el flujo de OAuth con una función de borde de backend (requiere ID de Servicio)
• Web: Utiliza el flujo de OAuth de popup (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().

Continúa desde Supabase Apple Login - Configuración General

Si estás utilizando Supabase Apple Login - Configuración General para planificar la autenticación y los flujos de cuenta, conecte con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login para el detalle de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Dos factores de autenticación para el detalle de implementación en Dos factores de autenticación.