Supabase Apple Login en Web

Requisitos previos

Esta guía te ayudará a integrar Apple Sign-In con Supabase Authentication en Web. Se supone que ya has completado:

• el Configuración de inicio de sesión de Apple en Web
• el Configuración general de inicio de sesión de Apple en Supabase.

Implementación

La implementación completa está disponible en el archivo del ejemplo de aplicación. Esta guía explica los conceptos clave y cómo utilizarlo. supabaseAuthUtils.ts Usando la Ayuda de Autenticación

Usando la ayuda de autenticación

El authenticateWithAppleSupabase función maneja todo el flujo de autenticación:

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

Cómo Funciona

Sección titulada “Cómo Funciona”

1. En Web, Apple Sign-In utiliza un flujo de OAuth popup:Inicialización
2. : La plugin se inicia con su ID de Servicio y la URL actual de la página como la URL de redirecciónOAuth Popup
3. : Abre una ventana emergente con la página de OAuth de AppleEl usuario se autentica con Apple en la ventana emergente
4. Token de IdentidadApple devuelve un token de identidad (JWT) que contiene información del usuario
5. Autenticación de SupabaseEl token de identidad se envía a Supabase mediante signInWithIdToken()

La función de ayuda detecta automáticamente la plataforma web y configura todo correctamente.

Observaciones importantes

Configuración del ID de Servicio

• La plataforma web requiere su ID de Servicio de Apple (igual que Android)
• El ID de Servicio debe estar configurado en el Portal de Desarrolladores de Apple con las URL de devolución correctas
• Asegúrate de que tu dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple

URL de redireccionamiento

• En web, la URL de redireccionamiento se establece automáticamente en window.location.href (URL de la página actual)
• Debes asegurarte de que coincida con una de las URL de retorno configuradas en el Portal de Desarrolladores de Apple
• Asegúrate de que tanto la URL con como la sin barra de dirección estén configuradas en el Portal de Desarrolladores de Apple

ID del cliente de Supabase

En Supabase, configura tu proveedor de Apple con:

• ID del cliente: Tu ID de Servicio de Apple (por ejemplo, com.example.app.service)

If necesariamente estás utilizando iOS, necesitarás proporcionar tanto el ID de la aplicación como el ID de servicio en el campo ID del cliente de Supabase (separado por comas).

Actualizar la función de ayuda

Cuando se utiliza la authenticateWithAppleSupabase función de ayuda, tú debes actualizar el clientId a que coincida con tu ID de servicio de Apple:

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Importante

Sustituir 'your.service.id.here' con su ID de Servicio de Apple real (el mismo valor que configuraste en el Portal de Desarrolladores de Apple).

Solución de problemas

Diferencia en el ID de Servicio

• : Verifica que el ID de Servicio coincida en tanto en el Portal de Desarrolladores de Apple como en tu : Verify your Service ID matches in both Apple Developer Portal and your code
• : Asegúrate de que la URL actual de la página (con y sin barra de dirección) esté configurada en el Portal de Desarrolladores de AppleVentana emergente bloqueada
• : Revisa las configuraciones del navegador - algunos navegadores bloquean ventanas emergentes por defectoDominio no permitido
• : Verifica que tu dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de AppleSolución de problemas
• Configuración de Supabase: Verifique que su ID de Servicio esté configurado correctamente en los ajustes del proveedor de Apple de Supabase
• Revisar el ejemplo de aplicación code para referencia

Siga adelante desde Supabase Apple Login en Web

Si está utilizando Supabase Apple Login en Web para planificar la autenticación y los flujos de cuenta, conecte Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-login social para los detalles de implementación en @capgo/capacitor-login social @capgo/capacitor-clave de acceso para los detalles de implementación en @capgo/capacitor-clave de acceso @capgo/capacitor-autenticación biométrica nativa para los detalles de implementación en @capgo/capacitor-autenticación biométrica nativa, y Autenticación de dos factores para los detalles de implementación en Autenticación de dos factores.