Supabase Apple Login en la web

Requisitos previos

Esta guía te ayudará a integrar el inicio de sesión de Apple con la autenticación de Supabase en Web. Se asume que ya has completado:

• el Configuración de inicio de sesión de Apple para Web
• la Configuración general de inicio de sesión de Apple de 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

Sección titulada “Usando la Ayuda de Autenticación”

función maneja todo el flujo de autenticación: authenticateWithAppleSupabase Copiar a portapapeles

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”

Section titled “Authentication Helper”

1. Iniciación: El plugin se inicia con su ID de Servicio y la URL actual de la página como URL de redirección
2. Ventana de OAuth: Abre una ventana emergente con la página de OAuth de Apple
3. Autenticación de usuario: El usuario se autentica con Apple en la ventana emergente
4. Token de identidad: Apple devuelve un token de identidad (JWT) que contiene información del usuario
5. Autenticación de Supabase: El token de identidad se envía a Supabase utilizando signInWithIdToken()

La función de ayuda detecta automáticamente el entorno web y configura todo de manera adecuada.

Notas importantes

Configuración del ID de Servicio

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

URL de redirección

• En la aplicación web, la URL de redirección se establece automáticamente en window.location.href (la URL actual de la página)
• Esto debe coincidir con una de las URL de retorno configuradas en el Portal de Desarrolladores de Apple
• Asegúrese de que tanto la URL con como 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)

Si también 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 (separados por comas).

Actualizar la función de asistencia

Al utilizar la authenticateWithAppleSupabase función de asistencia, debes actualizar clientId para coincidir con su 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 real de Apple (el mismo valor que configuró en el Portal de Desarrolladores de Apple).

Solución de problemas

Diferencia en el ID de Servicio

• : Verifique que su ID de Servicio coincida en ambos Portal de Desarrolladores de Apple y su __CAPGO_KEEP_0__: Verify your Service ID matches in both Apple Developer Portal and your code
• Section titled “Solución de problemas”: Asegúrese de que la URL actual de la página (con y sin barra de dirección) esté configurada en el Portal de Desarrolladores de Apple
• Popup bloqueado: Verifique las configuraciones del navegador - algunos navegadores bloquean los popups por defecto
• Dominio no permitido: Verifique que su dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple
• 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ás utilizando Supabase Apple Login en Web 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 Usando @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social Usando @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey Usando @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación de dos factores para los detalles de implementación en la autenticación de dos factores.