Configurar inicio de sesión con Facebook
Facebook Login permite que los clientes se autentiquen con una cuenta Facebook existente. Meta gestiona el desafío de inicio de sesión. Ordering.co guarda App ID y App Secret y muestra el botón cuando Enable Facebook Login está configurado en Yes.
Beneficios
- Comodidad: Los clientes usan sus credenciales Facebook en lugar de otra contraseña y nombre de usuario.
- Seguridad del proveedor: Facebook Login usa los protocolos de autenticación de Meta.
- Facilidad para volver: Un acceso más rápido puede aumentar las visitas de clientes que regresan al storefront.
- Datos básicos del perfil: Facebook puede compartir los campos que tu app tenga permiso para solicitar y que puedes usar para completar una cuenta Ordering.co.
- Menos fricción al registrarse: Una menor cantidad de campos puede aumentar los registros.
Guardar campos en Dashboard o cambiar un interruptor de Meta no demuestra por sí solo que un cliente pueda iniciar sesión.
Crear una app Facebook
Crea una cuenta de desarrollador en https://developers.facebook.com/. El flujo actual de creación de Meta usa use cases. En consolas anteriores se usaba un tipo de app como Consumer. Sigue las pantallas que muestre tu cuenta y guarda el App ID y App Secret para Dashboard.
Meta documenta este flujo en Crear una app con Meta. Empieza en https://developers.facebook.com/apps/creation/ o abre My Apps y selecciona Create App.
En los diseños anteriores de My Apps, también aparece Create App en el encabezado.
Si la consola todavía muestra tipos de app, selecciona Consumer y continúa.
Detalles de la app
Introduce el nombre de la app y su correo electrónico de contacto y selecciona Next.
En las pantallas anteriores de Create App, completa:
- App Display Name: Nombre de tu app Ordering.co.
- App Contact Email: Confirma el correo asociado con la cuenta Facebook.
- Do you have a business Manager Account?: Selecciona un portfolio o No Business Manager Account selected.
- Create App
Casos de uso
Abre la lista completa de casos de uso (la consola puede etiquetarla All (18)) y selecciona Authenticate and request data from users with Facebook Login. Después selecciona Next.
Meta clasifica esto como el caso de uso Facebook Login. No se puede combinar con algunos otros casos de uso en la misma app.
Business
Selecciona el portfolio de negocio que se debe conectar o sáltalo si la consola lo permite, y luego selecciona Next.
Requisitos
Confirma que Business verification y App Review aparezcan en los requisitos de publicación y selecciona Next. Revisar la lista no completa la verificación ni la revisión.
Resumen
Revisa el nombre, caso de uso, negocio y requisitos y luego selecciona Go to dashboard.
Completar la lista de tareas de Facebook Dashboard
El dashboard de la app enumera las tareas de configuración restantes. Completa cada una que la consola marque como pendiente.
- Customize the Authenticate and request data from users with Facebook Login use case. Ábrelo, confirma que está activado y vuelve al dashboard.
- Review and complete testing requirements. Cuando regreses, este elemento suele aparecer marcado. Si no lo está, ábrelo y vuelve al dashboard.
-
Business verification. Si no aparece marcado, abre Business Verifications y completa los pasos de Meta. Omitirlo puede impedir el modo Live para quienes no sean testers de la app.
-
App Review. Ábrelo y selecciona Next.
- App settings. Carga el App icon en el formato que indique Meta. Añade la URL de Privacy Policy, configura User data deletion, selecciona App category e introduce el correo de Primary contact. Luego continúa.
Allowed usage: Selecciona Get started, marca la casilla y luego Save y Next.
Data handling: Antes de completar esta sección, consulta al propietario de la organización:
- ¿Qué Platform Data, si la hay, comparte o procesa esta organización mediante la app?
- ¿Qué persona o entidad aprobada por la organización es responsable de esos datos y dónde está ubicada?
- Según las decisiones de privacidad autorizadas por la organización, ¿cómo se debe responder cada pregunta restante de Data Handling?
No uses una respuesta predeterminada tomada de una captura o de esta guía.
Reviewer instructions: Selecciona Go to settings. Se abre una ventana nueva. Copia App ID y App secret para Dashboard de Ordering.co y completa todos los campos marcados con un recuadro verde.
Data protection officer contact information: Antes de completar esta sección, consulta al propietario de la organización si se aplica a esta app y, si es así, qué datos de contacto aprobados pertenecen allí. No inventes un contacto ni copies uno de una captura. Luego guarda los cambios.
En la parte inferior de la página, selecciona Add platform, elige Web y añade la URL del sitio que mostrará Facebook Login. Guarda los cambios.
-
Vuelve a Review → App Review. En Provide instructions for accessing the app, describe cómo un revisor usa Facebook Login, por ejemplo:
- Ve a tu sitio.
- Selecciona el botón de inicio de sesión.
- Selecciona Continue with Facebook.
- Introduce las credenciales Facebook.
Puedes adjuntar un video de la prueba. Los demás campos son opcionales, salvo que tu app los necesite. Selecciona Next.
-
Cuando terminen los pasos de Review, envía la app a revisión.
Enviar una revisión solicita la decisión de Meta. No activa Facebook Login en modo Live ni demuestra el inicio de sesión en Ordering.co.
Completar Settings → Basic
Si el menú de la izquierda todavía muestra Settings → Basic, completa también esos campos. Se superponen con la lista App settings y siguen siendo donde las consolas anteriores guardan dominios y URL legales.
- Display Name: Nombre de tu app Ordering.co.
- Namespace: Nombre de app en minúsculas y sin espacios.
- App Domains:
localhosty tu dominio personalizado (escribe la URL en vez de pegarla).
- Contact Email: Correo de contacto de la app.
- Privacy Policy: URL de la política de privacidad. Facebook Login no funciona sin ella.
- Terms of Service URL: URL de términos. Si no tienes una, créala en el administrador de páginas estáticas del sitio de Ordering.co.
- User Data Deletion: Data Deletion Instructions URL (recomendado) o Data Deletion Callback URL. Implementa una página con instrucciones para eliminar datos e introduce esa URL.
- App Icon: Carga el icono.
- Category: Categoría correspondiente al proyecto.
- App Purpose: Finalidad correspondiente al proyecto (las fuentes recomiendan clients).
Para Data Protection Officer Contact Information, pregunta al propietario de la organización si se aplica y, de ser así, qué datos aprobados de contacto pertenecen allí. No transfieras datos personales desde una captura ni desde otra organización.
Añadir una plataforma Website
Selecciona + Add Platform, elige Website y luego Next.
En Site URL, introduce el dominio personalizado, por ejemplo https://www.ordering.co/, y selecciona Save Changes.
Añadir una app iOS
Selecciona + Add Platform, elige iOS y luego Next.
Introduce el Bundle ID. Copia desde el campo Package de Settings en el constructor el bundle de la app Ordering.co.
Añadir una app Android
Selecciona + Add Platform, elige Android y luego Next.
Selecciona Google Play y luego Next.
Completa:
- Package names: El mismo package bundle que iOS. Ejemplo:
com.orderingapp.ordering. - Class Name:
com.facebook.loginactivity - Key Hashes: Pega estos seis hashes:
P06REiEMufbvSOrQ76OaICh4L50=
TwtQwSSbQbitJBrpdPuZwp56eaA=
KNhJ+X6VJU/FVwXiAV3fs1KGC7c=
wwaw8MEJvRZJY0UDqH1D5hg97ns=
nQDiV5o9r4uzoIMvN/xzEDi1QF4=
Xo8WBi6jzSxKDVR4drqm84yr9iU=
Deja activo Log In-App Events Automatically (Recommended).
Guarda los cambios. En el panel izquierdo, abre Add product y selecciona Set up en Facebook Login.
Abre Settings en el panel izquierdo. No abras Quickstart.
Interruptores OAuth de inicio de sesión y URI de redirección
Desactiva Force Web OAuth Login. Activa embedded Browser OAuth Login.
En Valid OAuth redirect URIs, añade:
https://localhost:8100/oauthcallback.htmlhttps://YOUR_DOMAIN/oauthcallback.html
Reemplaza YOUR_DOMAIN por tu dominio personalizado. Ejemplo: https://www.ordering.co/oauthcallback.html. Habilita JavaScript SDK y luego selecciona Save.
Las etiquetas de los controles OAuth de Meta pueden cambiar. Conserva la ruta de redirección /oauthcallback.html tanto en localhost como en el dominio de producción.
Cambiar la app Facebook a modo Live
Para habilitar Facebook Login en modo Live, la app Ordering.co debería estar publicada primero en Google Play y App Store.
Recomendaciones
- Configura Facebook Login en Development con credenciales de tester y publica las apps en las tiendas primero.
- O habilita el modo Live solo para el sitio web. Cuando las apps nativas estén disponibles, termina la configuración de plataformas, añade Facebook Login ID a la app Ordering.co y publica una versión nueva.
Cambia de Development a Live solo cuando se cumplan esas condiciones.
Si aparece una ventana emergente, selecciona Use the name of this package para continuar.
Cambiar el interruptor no completa App Review, la ficha de la tienda ni un inicio de sesión Facebook de cliente.
Añadir credenciales Facebook en Ordering.co Dashboard
Copia App ID en Facebook Application ID, en Settings → Pro → Social login options → Facebook Sign-in.
Facebook_app_name debe coincidir con el nombre en la cuenta Facebook Developer. Pega App Secret en Facebook Application Secret Key y guarda.
Algunos Dashboards mostraban esta opción en Settings → Operation Settings → Facebook Settings. Si tu interfaz la llama Social login options → Facebook Sign-in, utiliza esa ubicación.
Resolver un hash de clave no válido
Si Facebook devuelve Invalid key hash. The key hash "xxxxxxxxxxxxxxxx=" does not match any stored key hashes, abre la configuración de plataforma Android y añade ese hash junto a los seis indicados arriba.
Configuraciones prácticas
- Incorporación fluida: Deja apagado Enable Facebook Login Confirmation solo si Facebook devuelve todos los campos que necesitas.
- Personalización: Usa los campos de perfil Facebook que la app tiene permitido recibir. Permisos adicionales pueden requerir App Review.
- Compartir en redes y anuncios: Compartir en Facebook o ejecutar anuncios Meta queda fuera de esta configuración de inicio de sesión.
- Modo Live después de publicar apps: No cambies la app Facebook a Live para aplicaciones nativas antes de publicarlas.
Conclusión
Crea la app Facebook, añade plataformas web y móviles, registra las URI de redirección OAuth y hashes de claves, y luego pega App ID y App Secret en Ordering.co. Configura Enable Facebook Login como Yes cuando el storefront deba mostrar el botón. Prueba el inicio de sesión con Facebook en el sitio o app antes de considerar que funciona.