Iniciar sesión con Apple en 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
• el Configuración general de inicio de sesión de Apple de Supabase.

Implementación

The complete implementation is available in the __CAPGO_KEEP_0__ archivo de ejemplo del supabaseAuthUtils.ts Este manual explica los conceptos clave y cómo utilizarlo.

Usando el Asistente 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?

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

1. Inicialización: La extensión 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. User Authentication: El usuario se autentica con Apple en la ventana emergente
4. Identity Token: Apple devuelve un token de identidad (JWT) que contiene información del usuario
5. Supabase Authentication: 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 adecuadamente.

Importantes Notas

Configuración de ID de Servicio

• 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 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 web, la URL de redirección se establece automáticamente en window.location.href (URL de la página actual)
• 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 de 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 ambos el ID de la aplicación y el ID de Servicio en el campo ID del cliente de Supabase (separados por comas).

Actualizar la función de ayuda

Al utilizar la authenticateWithAppleSupabase función de ayuda, debes actualizar la a que coincida con tu ID de Servicio de Apple: clientId __CAPGO_KEEP_0__

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 el Portal de Desarrolladores de Apple y en su __CAPGO_KEEP_0__: Verify your Service ID matches in both Apple Developer Portal and your code
• : 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 AppleService ID mismatch: Verify your Service ID matches in both Apple Developer Portal and your __CAPGO_KEEP_0__
• Bloqueado por la barra de herramientas: Verifica las configuraciones del navegador - algunos navegadores bloquean pop-ups por defecto
• Dominio no permitido: Verifica que tu dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple
• Configuración de Supabase: Verifica que tu ID de Servicio esté configurado correctamente en los ajustes del proveedor de Apple de Supabase
• Revisa la aplicación de ejemplo __CAPGO_KEEP_0__ example app code Sigue adelante desde Supabase Apple Login en Web

Sección titulada “Sigue adelante desde Supabase Apple Login en Web”

If you are using Iniciar sesión con Apple en Web de Supabase para planificar la autenticación y los flujos de cuenta, conecte 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-clave-llave para el detalle de implementación en @capgo/capacitor-clave-llave Usando @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores