Supabase Apple Login en Android

Requisitos previos

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

• el Configuración general de Supabase Apple Login.

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 backend.

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

Primero, necesitamos desplegar la función de borde de Supabase que manejará el llamado de retorno de Apple OAuth.

1. Navegue a su directorio de proyecto de Supabase

   cd your-project/supabase

2. Crear la función de borde (si no existe)

   supabase functions new apple-signin-callback

3. Copiar la función de borde code

   La implementación completa de la función de borde está disponible en la aplicación de ejemplo.

   Copiar los siguientes archivos en tu 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 firmar JWT)

4. Configurar la verificación de JWT

   The endpoint de Apple OAuth debe ser público (no se requiere autenticación) porque Apple lo redirigirá a él. 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 de OAuth de Apple no incluye encabezados de autenticación de Supabase. El punto de conexión valida el flujo de OAuth en sí.

5. Despliegue la función

   supabase functions deploy apple-signin-callback

6. Obtenga la URL de su función

   Después del despliegue, obtendrá una URL como:

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

   Si no lo 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 copiarlo.

   Guarda esta URL

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

Paso 2: Configurar el Portal de Desarrolladores de Apple

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

URL de función

Asegúrese de tener su URL de función de Supabase Edge desde el paso 1 antes de proceder. Lo necesitará para configurar la URL de retorno en el Portal de Desarrolladores de Apple.

1. Siga el Guía de configuración de Apple Login para Android

   Complete el Guía de configuración de Apple Login para Android a:

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

2. Establezca la URL de retorno en el Portal de Desarrolladores de Apple

   Cuando configures la URL de retorno en el Portal de Desarrolladores de Apple (paso 6.9 de la guía de Apple), utilice su 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 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 de servidor de backend personalizado. Para la integración de Supabase, debe utilizar su URL de función de borde de Supabase en su lugar.

   Coincidencia exacta requerida

   La URL de retorno debe coincidir exactamente lo que configuras aquí. Apple es muy estricto con la coincidencia de la URI de redirección.

3. Reúne todos los valores requeridos

   Después de completar la guía de configuración de Apple, deberías tener:

   • __CAPGO_KEEP_0__: Tu ID de equipo de desarrollador de Apple
   • : El ID de clave desde el portal de desarrolladores de Apple: Tu archivo de clave privada .p8 (necesita ser codificado en base64)
   • : Tu ID de servicio de Apple (por ejemplo,ANDROID_SERVICE_ID
   • __CAPGO_KEEP_0____CAPGO_KEEP_0__ com.example.app.service)
   • BASE_REDIRECT_URL: Su URL de enlace profundo (por ejemplo, capgo-demo-app://path)

   La

   es el esquema de enlace profundo configurado en su BASE_REDIRECT_URL . Esto es donde el backend redirigirá después de la autenticación. AndroidManifest.xmlEl valor de su enlace profundo depende del

   __CAPGO_KEEP_0__. Si ha establecido android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" , entonces su enlace profundo será AndroidManifest.xmlPaso 3: Establecer Secretos de Supabase 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. Codificar la clave privada

   Primero, codifique la clave privada de Apple (.p8 archivo) a base64:

   base64 -i AuthKey_XXXXX.p8

   Copiar el resultado completo (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

   Sustituye todos los valores de los marcadores con tus valores reales desde el paso 2.

3. Opcional: Establece secretos en Supabase Dashboard

   Si prefieres usar la consola de administración:

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

Configuración de la aplicación de Android

El Guía de configuración de Apple Login 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úrese de haber completado esos pasos antes de proceder. El esquema de enlace profundo que configure allí será su BASE_REDIRECT_URL en el paso 3.

Paso 4: Utilice la Ayuda de Autenticación

Ahora puede utilizar la ayuda de autenticación en su aplicación code.

Implementación

The complete implementation is available in the archivo de la aplicación de ejemplo. supabaseAuthUtils.ts Using the Authentication Helper

Sección titulada “Using the Authentication Helper”

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 “Actualizar la función del asistente”

helper function, you authenticateWithAppleSupabase must actualizar los siguientes valores para que coincidan con su configuración: __CAPGO_KEEP_0__

1. Actualizar redirectUrl - Establezca esto en la URL de su función de borde de Supabase:

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

2. Actualizar clientId - Establezca esto en 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Importante

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

Consulte el implementación completa por referencia.

Paso 5: Prueba la Integración

1. Construye y ejecuta tu aplicación Android

   npx cap sync android
   npx cap run android

2. Prueba 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 autenticar, 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 presiona “Iniciar sesión con Apple”
   2. La aplicación abre el navegador con OAuth de Apple
   3. El usuario se autentica con Apple
   4. Apple redirige 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 inicia sesión en Supabase con el token de identidad

Solución de problemas

Si falla la autenticación:

• URI de redireccionamiento no coincide: Verifique que la URL de retorno en el Portal de Desarrolladores de Apple coincida exactamente con APPLE_REDIRECT_URI secret
• La enlace profundo no funciona: Verifique que AndroidManifest.xml el filtro de intención coincida con su BASE_REDIRECT_URL
• Faltan secretos: Verifique que todos los secretos estén configurados correctamente utilizando supabase secrets list
• Falló el intercambio de tokens: Verifique los registros de función de borde en la Consola de Supabase para obtener mensajes de error detallados
• La aplicación no recibe la devolución de llamada: Asegúrese onNewIntent is properly implemented in MainActivity
• Revisar el ejemplo de aplicación code para referencia

Cómo Funciona

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

1. Inicialización: La extensión se inicia con su ID de Servicio y URL de redirección de backend
2. Flujo de OAuth: Abre una pestaña del navegador/Chrome Personalizada con la página de OAuth de Apple
3. Llamada de Retorno de Backend: Apple redirige a su función de borde de Supabase con una autorización code
4. Intercambio de Token: La función de borde intercambia el code por tokens utilizando el punto de extremo de Apple
5. Redirección de Enlace Profundo: La función de borde redirige de nuevo a su 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 para Android para Iniciar sesión con Apple.

Siga adelante desde Supabase Apple Login en Android

Supabase Apple Login on Android Iniciar sesión en Apple en Android con 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, @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social, @capgo/capacitor-clave-de-pasaje para el detalle de implementación en @capgo/capacitor-clave-de-pasaje, @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.