Apple Login en Android de Supabase

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 Apple Login 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 servidor de backend.

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

Primero, debemos 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. Copie la función de borde code

   La implementación completa de la función de borde se encuentra en la aplicación de ejemplo.

   Copie los siguientes archivos en su proyecto:

   • supabase/functions/apple-signin-callback/index.ts - Función principal de borde 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

   - El endpoint de llamada OAuth de Apple debe ser público (no se requiere autenticación) porque Apple lo redirigirá. Actualice su supabase/config.toml - Copiar al portapapeles

   [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"

   - Configuración

   - Haga que este endpoint sea público. Esto es necesario porque la redirección OAuth de Apple no incluye encabezados de autenticación de Supabase. El endpoint valida el flujo de OAuth por sí mismo. verify_jwt = false - Desplegar la función

5. - Ventana de terminal

   supabase functions deploy apple-signin-callback

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

   Después de la implementación, 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 la apple-signin-callback URL de la función para copiarla.

   Guarda esta URL

   Deberás necesitar esta URL en el siguiente paso al configurar 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 de backend y obtener todos los valores necesarios.

URL de 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 Apple Login para Android para:

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

2. Establezca la URL de retorno en el Portal del Desarrollador de Apple

   Cuando configure la URL de retorno en el Portal del Desarrollador 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 utilice la URL de redireccionamiento del Guía de configuración de inicio de sesión de Apple para AndroidEsa guía utiliza una URL de servidor de backend personalizado. Para la integración de Supabase, debe deber utilizar en su lugar la URL de función de borde de Supabase.

   Coincidencia Exacta Requerida

   La URL de retorno debe coincidir exactamente con lo que configuras aquí. Apple es muy estricto con el ajuste de la URI de redireccionamiento.

3. Recolecte todos los valores requeridos

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

   • ID DE EQUIPO DE APPLE: Su ID de equipo de desarrollador de Apple
   • ID DE CLAVE DE APPLE: La clave ID del portal de desarrolladores de Apple
   • LLAVE PRIVADA DE APPLE: Su archivo de clave privada .p8 (debe 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)

   La

   es el esquema de enlace profundo configurado en su BASE_REDIRECT_URL Este 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 configurado android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" en su AndroidManifest.xmlluego, su 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. Codifique su clave privada

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

   base64 -i AuthKey_XXXXX.p8

   Copiar el contenido completo (es una sola cadena larga).

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 marcadores con tus valores reales del paso 2.

3. Alternativa: Establecer secretos en la consola de Supabase

   Si prefieres utilizar la consola:

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

Configuración de la aplicación 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 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 BASE_REDIRECT_URL en el paso 3.

Paso 4: Utilice el Asistente 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 ejemplo de aplicación’s supabaseAuthUtils.ts archivo.

Utilizando 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 Ayuda

Cuando se utiliza la authenticateWithAppleSupabase función auxiliar, usted debe actualizar los siguientes valores para que coincidan con su configuración:

1. Actualizar redirectUrl - Establezca esto a su URL de función de Supabase Edge:

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

2. Actualizar clientId - Establezca esto a 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

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

Consulte el implementación completa para referencia.

Paso 5: Pruebe la Integración

1. Construya y ejecute su aplicación Android

   npx cap sync android
   npx cap run android

2. Pruebe el flujo de autenticación

   • Presione el botón “Iniciar sesión con Apple”
   • Deberías ver la página de autenticación 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. Verifica 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 la autenticación 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 borde intercambia code por tokens
   6. La función de borde 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:

• Error de URI de redirección: Verifique que la URL de retorno en el Portal de Desarrolladores de Apple coincida exactamente con APPLE_REDIRECT_URI secret
• Enlace profundo no funciona: Verifique que AndroidManifest.xml filtro de intención coincida con su BASE_REDIRECT_URL
• Secretos faltantes: Verifique que todos los secretos estén configurados correctamente utilizando supabase secrets list
• Intercambio de tokens falla: Revisa los registros de función de borde en Supabase Dashboard para obtener mensajes de error detallados
• No recibe la aplicación la devolución de llamada: Asegúrate de que onNewIntent esté implementado correctamente en MainActivity
• Revisa el ejemplo de aplicación __CAPGO_KEEP_0__ example app code Cómo Funciona

context: Página/área: Capgo Builder / producto de construcción nativa en la nube. Rol: Título de sección o página. Clave de mensaje `native_build_how_it_works_title` (Título de cómo funciona la construcción nativa). | Página/área: Sección de problemas/soluciones de la página principal. Rol: Etiqueta de interfaz de usuario corta o elemento de navegación. Visto en: página premium-support.astro. Clave de mensaje `ps_how_it_works` (Cómo funciona Ps). | Página/área: Página de actualizaciones en vivo. Rol: Título de sección o página. Visto en: página live-update.astro. Clave de mensaje `live_update_how_it_works_title` (Título de cómo funciona la actualización en vivo).

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

1. Inicialización: La plugin se inicia con tu ID de Servicio y la URL de redireccionamiento de backend.
2. Flujo de OAuth: Abre una ventana del navegador/Chrome Custom Tab con la página de OAuth de Apple.
3. Callback de Backend: Apple redirige a tu 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 final de token de Apple
5. Redireccionamiento de Enlace Profundo: La función de borde redirige de nuevo a tu aplicación con el token de identidad
6. Autenticación de Supabase: La aplicación recibe el token y se inicia en Supabase

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

Seguir 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-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-privada para el detalle de implementación en @capgo/capacitor-clave-privada @capgo/capacitor-biometría-nativa para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para los detalles de implementación en Autenticación en dos factores.