Supabase Apple Login en Android

Requisitos previos

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

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

Importante

Apple Sign-In en Android requiere un servidor de backend porque Apple no proporciona soporte nativo para Android. Usaremos una función de borde de Supabase como el servidor de backend.

Paso 1: Desplegar la función de borde del servidor de backend

Primero, debemos desplegar la función de borde de Supabase que manejará la devolución de llamada de autenticación de Apple.

1. Navegue a su directorio de proyecto de Supabase

   cd your-project/supabase

2. Crear la función de borde Ventana de terminal

   supabase functions new apple-signin-callback

3. Copy the edge function code

   The complete implementation of the edge function is available in the ejemplo de aplicación.

   Copie los siguientes archivos a su proyecto:

   • supabase/functions/apple-signin-callback/index.ts - Función de borde principal code
   • supabase/functions/apple-signin-callback/deno.json - Mapa de importación para dependencias (incluye jose biblioteca para la firma de JWT)

4. Configure la verificación de JWT

   El punto final de llamada OAuth de Apple debe ser público (no se requiere autenticación) porque Apple lo redirigirá. Actualice su supabase/config.toml archivo:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   Importante

   Configuración verify_jwt = false hace que este punto de conexión sea público. Esto es necesario porque la redirección OAuth de Apple no incluye encabezados de autenticación de Supabase. El punto de conexión valida el flujo de OAuth en sí mismo.

5. Despliega la función

   supabase functions deploy apple-signin-callback

6. Obtén la URL de tu función

   Después de la despliegue, obtendrás una URL como:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Si no la encuentras, puedes hacer lo siguiente:

   1. Abrir https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Haz clic en el apple-signin-callback URL de la función para copiarla.

   Guarda esta URL

   Necesitarás esta URL en el próximo paso cuando configures el Portal de Desarrolladores de Apple.

Paso 2: Configura el Portal de Desarrolladores de Apple

Ahora necesitamos configurar el Portal de Desarrolladores de Apple con la URL del backend y obtener todos los valores necesarios.

URL de la función

Asegúrate de tener la URL de la función de Supabase Edge de Step 1 antes de proceder. La necesitarás para configurar la URL de retorno en el Portal de Desarrolladores de Apple.

1. Sigue el Guía de Configuración de Apple Login para Android

   Completa el Guía de configuración de inicio de sesión de Apple para Android a:

   • Crear un ID de servicio
   • Generar una clave privada (archivo .p8)
   • Obtener su ID de equipo y ID de clave
   • Configurar la URL de retorno

2. Establecer la URL de retorno en el portal de desarrolladores de Apple

   Al configurar la URL de retorno en el portal de desarrolladores de Apple (paso 6.9 de la guía de Apple), utilice la URL de función de borde de Supabase:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Importante: Utilice la URL de función de borde de Supabase

   NO utilice la URL de redireccionamiento del Guía de configuración de inicio de sesión de Apple para Android. Esa guía utiliza una URL del servidor de backend personalizado. Para la integración con Supabase, debes usar en su lugar la URL de la función de borde de Supabase.

   La URL de retorno debe coincidir

   exactamente con lo que configuras aquí. Apple es muy estricto con la coincidencia de la URI de redireccionamiento. Reúne todos los valores requeridos Después de completar la guía de configuración de Apple, deberías tener:

3. ID DE EQUIPO DE APPLE

   Exacto. Exacto

   • La URL de retorno debe coincidir exactamente con lo que configuras aquí. Apple es muy estricto con la coincidencia de la URI de redireccionamiento.: Su ID de equipo de desarrollador de Apple
   • APPLE_KEY_ID: El ID de clave desde el portal de desarrollador de Apple
   • APPLE_PRIVATE_KEY: Su archivo de clave privada .p8 (necesita estar codificado en base64)
   • ANDROID_SERVICE_ID: Su ID de servicio de Apple (por ejemplo, com.example.app.service)
   • BASE_REDIRECT_URL: Su URL de enlace profundo (por ejemplo, capgo-demo-app://path)

   Deep Link URL

   El BASE_REDIRECT_URL ¿Está configurada la esquema de enlace profundo en tu AndroidManifest.xml. Esto es donde el backend redirigirá después de la autenticación.

   El valor de tu enlace profundo depende del android:scheme="capgo-demo-app" code. Si has establecido android:scheme="capgo-demo-app" en tu AndroidManifest.xml, entonces tu enlace profundo será capgo-demo-app://path.

Paso 3: Establecer secretos de Supabase

Ahora necesitamos configurar las variables de entorno (secretos) para la función de borde de Supabase.

1. Codifica tu clave privada

   Primero, codifica tu clave privada de Apple (.p8) a base64:

   base64 -i AuthKey_XXXXX.p8

   Copie la salida completa (es una cadena larga de un solo lado).

2. Establecer secretos utilizando Supabase CLI

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Sustituir marcadores

   Sustituir todos los valores de marcadores con tus valores reales de paso 2.

3. Alternativa: Establecer secretos en la consola de Supabase

   Si prefieres utilizar la consola:

   1. Ir a la consola de proyecto de Supabase
   2. Navegar a Funciones de la Orilla → Configuración → Secretos
   3. Agregar cada variable de secreto con su valor

Configuración de la Aplicación de Android

La Guía de configuración de inicio de sesión de Apple para Android Ya cubre la configuración de su aplicación de Android:

• Agregar el filtro de intención de enlace profundo a AndroidManifest.xml
• Agregar el onNewIntent manejador a MainActivity.java

Asegúrate de haber completado esos pasos antes de proceder. El esquema de enlace profundo que configures allí será el tuyo BASE_REDIRECT_URL en el paso 3.

Paso 4: Utiliza la Ayuda de Autenticación

Ahora puedes utilizar la ayuda de autenticación en tu aplicación code.

Implementación

La implementación completa está disponible en el archivo del supabaseAuthUtils.ts ejemplo de aplicación

Usando la Ayuda 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);
}

Actualizar la función de asistencia

Cuando utilices la authenticateWithAppleSupabase función de asistencia, debes actualizar los siguientes valores para que coincidan con tu configuración: Actualizar

1. - Establece esto en la URL de tu función de borde de Supabase: redirectUrl Copiar a portapapeles

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. - Establece esto en tu ID de Servicio de Apple: clientId Copiar a portapapeles

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

   Importante

   Sustituir 'your.service.id.here' con su ID de Servicio de Apple real (el mismo valor que utilizó en el paso 3). ANDROID_SERVICE_ID Consulte la implementación

completa para referencia. Paso 5: Probar la Integración

Sección titulada “Paso 5: Probar la Integración”

1. __CAPGO_KEEP_0__

   npx cap sync android
   npx cap run android

2. Probar el flujo de autenticación

   • Toca el botón “Iniciar sesión con Apple”
   • Deberías ver la página de OAuth de Apple en un navegador
   • Después de autenticarte, deberías ser redirigido de regreso a tu aplicación
   • Revisa los registros del consola para cualquier error

3. Verificar el flujo

   El flujo completo debería ser:

   1. El usuario toca “Iniciar sesión con Apple”
   2. La aplicación abre el navegador con Apple OAuth
   3. El usuario se autentica con Apple
   4. Redirige a Apple a: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. La función de Edge intercambia code por tokens
   6. La función de Edge redirige a: your-app://path?id_token=...&access_token=...
   7. La aplicación de Android recibe el enlace profundo y procesa el token de identidad
   8. La aplicación se registra en Supabase con el token de identidad

Solución de problemas

Si falla la autenticación:

• Diferencia en la URI de redirección: Verifique que la URL de retorno en el Portal de Desarrolladores de Apple coincida exactamente con APPLE_REDIRECT_URI secreto
• El enlace profundo no funciona: Verifica que AndroidManifest.xml el filtro de intención coincida con tu BASE_REDIRECT_URL
• Faltan secretos: Verifica que todos los secretos estén configurados correctamente utilizando supabase secrets list
• Falló el intercambio de token: Verifica los registros de función de borde en la consola de Supabase para obtener mensajes de error detallados
• No se recibe la devolución de llamada: Asegúrate de que onNewIntent esté implementado correctamente en MainActivity
• Revisa la aplicación de ejemplo code para obtener referencias

Cómo Funciona

En Android, Apple Sign-In utiliza un flujo de redirección OAuth:

1. Iniciación: El plugin se inicia con su ID de Servicio y URL de redirección de backend
2. Flujo de OAuth: Abre una ventana del navegador/Chrome Custom Tab con la página de OAuth de Apple
3. Llamada de Vuelta al Backend: Apple redirige a su función de borde Supabase con una autorización code
4. Intercambio de Token: La función de borde intercambia el code por tokens utilizando el punto de conexión de tokens de Apple
5. Redirección de Enlace Profundo: La función de borde redirige de regreso a tu aplicación con el token de identidad
6. Autenticación de Supabase: La aplicación recibe el token y se registra en Supabase

Esta flujo es necesario porque Apple no proporciona soporte nativo de Android para Iniciar sesión con Apple.

Sigue adelante desde Supabase Apple Login en Android

Si estás utilizando Supabase Apple Login en Android 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, Usando @capgo/capacitor-social-login para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-almacenada para el detalle de implementación en @capgo/capacitor-clave-almacenada @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y autenticación de dos factores para el detalle de implementación en autenticación de dos factores.