Supabase Apple Login en Web

Requisitos previos

Esta guía le ayudará a integrar Apple Sign-In con la autenticación de Supabase en Web. Se asume que ya ha completado:

• el Configuración de inicio de sesión de Apple en web
• el Supabase Apple Login - General Setup.

Implementación

La implementación completa está disponible en el Utilizando el Asistente de Autenticación supabaseAuthUtils.ts Guía. Esta guía explica los conceptos clave y cómo utilizarla.

Utilizando la Ayuda de Autenticación

The authenticateWithAppleSupabase La 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

En la Web, Apple Sign-In utiliza un flujo de OAuth popup:

1. IniciaciónLa plugin se inicia con su ID de Servicio y la URL actual de la página como URL de redirección.
2. OAuth Popup: Abre una ventana emergente con la página de OAuth de Apple
3. Autenticación del usuarioEl 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 la plataforma web y configura todo correctamente.

Sección titulada “Notas importantes”

Configuración de ID de Servicio

• Requiere su ID de Servicio de Apple (lo mismo que Android)
• Asegúrese de que su dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple
• Asegúrese de que su dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple

Supabase Authentication

• En web, la URL de redirección se establece automáticamente en window.location.href (URL de la página actual)
• Deben coincidir con uno de los URLs de retorno configurados 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, configure su proveedor de Apple con:

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

Si también estás utilizando iOS, debes proporcionar tanto el ID de la aplicación como el ID de servicio en el campo ID del cliente de Supabase (separados por comas).

Actualice la función de ayuda

Cuando utilices la authenticateWithAppleSupabase función de ayuda, debes must actualizar el clientId 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,
  },
});

Important

Sustituye 'your.service.id.here' por tu ID de Servicio de Apple real (el mismo valor que configuraste en el Portal de Desarrolladores de Apple).

Troubleshooting

Si falla la autenticación:

• Error de identificador de servicioVerifique que su ID de Servicio coincida en el Portal de Desarrolladores de Apple y en su code
• No configurado el URL de retornoAsegú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
• Ventana bloqueada: Check browser settings - some browsers block popups by default
• No permitido el dominioVerifica que tu dominio está agregado a los dominios permitidos en el Portal de Desarrolladores de Apple
• Configuración de SupabaseVerifique que su ID de Servicio esté configurado correctamente en los ajustes del proveedor Apple de Supabase.
• Revisa el ejemplo de aplicación code para referencia

Sigue 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-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-iniciodeiniciodeiniciodeautenticación para el detalle de implementación en @capgo/capacitor-social-login, @capgo/capacitor-clave de paso para la implementación en @capgo/capacitor-passkey @capgo/capacitor-nativo-biometria para la implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para la implementación en Autenticación en dos factores.