Cómo integrar el Login de Instagram/Facebook en una App de iOS (sin morir en el intento)

Publicado el

En el mundo del desarrollo móvil, la fricción es el enemigo número uno de la conversión. Si obligas a un usuario a rellenar un formulario de registro de diez campos, lo más probable es que desinstale tu app antes de empezar. Aquí es donde entra el Social Login.

Integrar el Login de Facebook e Instagram no solo facilita la vida al usuario, sino que te otorga acceso a datos verificados y mejora la confianza en tu plataforma. Sin embargo, navegar por la documentación de Meta, lidiar con los cambios de SDK y configurar los permisos de iOS puede ser un auténtico laberinto.

En esta guía paso a paso, aprenderás a implementar esta funcionalidad en Swift de manera robusta, actualizada a 2024 y, lo más importante, manteniendo tu salud mental intacta.

1. El primer paso: Configuración en Meta for Developers

Antes de tocar una sola línea de código en Xcode, debes preparar el terreno en el portal de desarrolladores de Meta. Sin una App ID correctamente configurada, nada funcionará.

  1. Crea una App: Ve a Meta for Developers y crea una nueva aplicación. Selecciona un tipo de aplicación (generalmente «Consumidor» o «Empresa» dependiendo de tus necesidades).
  2. Agrega el producto: En el panel de control, busca «Inicio de sesión con Facebook» y haz clic en «Configurar».
  3. Configura la plataforma iOS:
    • Introduce el Bundle ID de tu proyecto (ej. com.tuempresa.app).
    • Activa el inicio de sesión con el SDK de iOS.
    • Asegúrate de que el interruptor de «Single Sign On» esté activado si deseas una experiencia fluida.

Importante: Toma nota del App ID y del Client Token (este último se encuentra en Configuración > Configuración avanzada). Los necesitarás para el archivo Info.plist.

2. Instalación del SDK de Meta mediante Swift Package Manager (SPM)

Atrás quedaron los días de configurar manualmente archivos binarios pesados. La forma más limpia de integrar el SDK de Facebook en iOS es mediante Swift Package Manager.

  1. En Xcode, ve a File > Add Packages.
  2. Pega la URL del repositorio oficial: https://github.com/facebook/facebook-ios-sdk.
  3. Selecciona las librerías necesarias. Para un inicio de sesión básico, necesitas:
    • FacebookLogin
    • FacebookCore

Xcode descargará e indexará las dependencias automáticamente.

3. Configurando el archivo Info.plist (El paso donde todos fallan)

Este es el punto más crítico. Si olvidas una sola clave aquí, tu app se cerrará inesperadamente al intentar abrir Facebook. Debes abrir tu archivo Info.plist como código fuente y agregar lo siguiente (reemplazando los valores correspondientes):

CFBundleURLTypes


  CFBundleURLSchemes

    fbTU_APP_ID



FacebookAppID
TU_APP_ID
FacebookClientToken
TU_CLIENT_TOKEN
FacebookDisplayName
Nombre de tu App
LSApplicationQueriesSchemes

  fbapi
  fb-messenger-share-api

Nota: Asegúrate de que en CFBundleURLSchemes, el prefijo fb vaya seguido inmediatamente por tu ID numérico, sin espacios.

4. Inicializando el SDK en el AppDelegate o SceneDelegate

Para que el SDK pueda gestionar los callbacks cuando el usuario regresa de la app de Facebook, debes inicializarlo correctamente.

Si usas el ciclo de vida clásico de AppDelegate:

import FacebookCore

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
        return true
    }

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        ApplicationDelegate.shared.application(app, open: url, sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String, annotation: options[UIApplication.OpenURLOptionsKey.annotation])
    }
}

5. Implementando el Login de Facebook en Swift

Meta ofrece dos formas de implementar el login: usar su botón prefabricado (FBLoginButton) o crear tu propio flujo personalizado. La mayoría de los desarrolladores prefieren el flujo personalizado para tener control total sobre el diseño.

Aquí tienes un ejemplo de cómo lanzar el inicio de sesión desde un botón propio:

import FacebookLogin

func iniciarSesionConFacebook() {
    let loginManager = LoginManager()
    loginManager.logIn(permissions: ["public_profile", "email"], from: self) { result, error in
        if let error = error {
            print("Error: \(error.localizedDescription)")
            return
        }

        guard let result = result, !result.isCancelled else {
            print("El usuario canceló el login")
            return
        }

        // Login exitoso, obtener el token
        if let token = AccessToken.current?.tokenString {
            print("Token de acceso: \(token)")
            self.obtenerDatosDeUsuario()
        }
    }
}

¿Cómo obtener el nombre y el email?

Una vez autenticado, debes usar el Graph API para pedir los datos del perfil:

func obtenerDatosDeUsuario() {
    let request = GraphRequest(graphPath: "me", parameters: ["fields": "id, name, email, picture.type(large)"])
    request.start { _, result, error in
        if let userData = result as? [String: Any] {
            let nombre = userData["name"] as? String
            let email = userData["email"] as? String
            print("Bienvenido, \(nombre ?? "usuario")")
        }
    }
}

6. ¿Y qué pasa con el Login de Instagram?

Aquí hay una confusión común. Desde que Meta unificó sus plataformas, el «Instagram Login» para apps móviles se maneja principalmente a través del mismo SDK de Facebook mediante el producto «Instagram Graph API» o simplemente permitiendo que el usuario se identifique con su cuenta de Instagram vinculada a Facebook.

Sin embargo, si necesitas una integración pura de Instagram (sin pasar por el flujo de Facebook), tendrías que usar una implementación de OAuth 2.0 basada en WebViews. Pero para la mayoría de los casos de uso empresariales, la recomendación de Meta es usar el Facebook Login for Business que ya incluye la compatibilidad con cuentas de Instagram.

7. Buenas prácticas y reglas de la App Store (¡Ojo aquí!)

No podemos hablar de login social en iOS sin mencionar las reglas de Apple. Si no sigues estas directrices, tu app será rechazada:

  • Sign in with Apple: Si tu app ofrece cualquier servicio de inicio de sesión social de terceros (Facebook, Google, etc.), estás obligado a ofrecer también «Sign in with Apple».
  • Permisos mínimos: No pidas más permisos de los necesarios. Pedir acceso a la lista de amigos o publicaciones sin una razón justificada es motivo de rechazo.
  • Opción de Logout: Siempre ofrece una forma clara de cerrar sesión y de eliminar la cuenta del usuario, cumpliendo con las normativas de privacidad (GDPR).

8. Solución de problemas comunes (Troubleshooting)

  1. «Can’t Load URL: The domain of this URL isn’t included in the app’s domains»: Revisa que en el panel de Meta, el Bundle ID sea idéntico al de Xcode.
  2. El simulador abre Safari pero no regresa a la App: Revisa el CFBundleURLSchemes en el Info.plist. Si falta el prefijo fb, el sistema operativo no sabrá a qué app enviar el token.
  3. Error de Client Token: Asegúrate de haber copiado el Token de Cliente y no la App Secret en el campo FacebookClientToken.

Conclusión

Integrar el Login de Facebook e Instagram en iOS puede parecer una tarea titánica debido a la cantidad de pasos de configuración externos al código. Sin embargo, una vez que entiendes que la clave reside en una configuración meticulosa del portal de Meta y del archivo Info.plist, el resto fluye con el SDK de Swift.

Al implementar esta funcionalidad, no solo estás simplificando el acceso a tus usuarios, sino que estás construyendo una base sólida para el crecimiento de tu app. Recuerda siempre mantener el SDK actualizado y seguir de cerca los cambios en las políticas de privacidad de Apple y Meta.

¿Te ha servido esta guía? No olvides implementar «Sign in with Apple» justo al lado para asegurar tu publicación en la App Store. ¡Feliz código!

Deja una respuesta