--- title: "Configurar el inicio de sesión con Facebook para tu Progressive Web App (PWA)" description: "Para activar el inicio de sesión con Facebook, tienes que declarar tu aplicación en Facebook. Crea una cuenta de desarrollador en Facebook: Cómo registrart" canonical_url: "https://es.goodbarber.com/help/gestionar-el-acceso-de-usuario-y-los-grupos-r102/configurar-el-inicio-de-sesion-con-facebook-para-tu-progressive-web-app-pwa-a307/" lang: es --- # Configurar el inicio de sesión con Facebook para tu Progressive Web App (PWA) Source: https://es.goodbarber.com/help/gestionar-el-acceso-de-usuario-y-los-grupos-r102/configurar-el-inicio-de-sesion-con-facebook-para-tu-progressive-web-app-pwa-a307/ Para activar el inicio de sesión con Facebook, tienes que declarar tu aplicación en Facebook. Crea una cuenta de desarrollador en Facebook: [Cómo registrarte como desarrollador en Facebook](https://es.goodbarber.com/help/gestionar-el-acceso-de-usuario-y-los-grupos-r102/registrarse-como-desarrollador-de-facebook-a89/). *Durante la explicación, utilizamos un ejemplo. Presta atención para rellenar la información correcta en TU app.* Si no sigues el procedimiento completo, no podrás conectar tu aplicación a Facebook. ## 1. Crea una app 1. Ve a esta URL: [https://developers.facebook.com/apps](https://developers.facebook.com/apps) 2. Haz clic en "**Crear aplicación**". 3. Selecciona "**Consumidor**" en la ventana emergente. 4. Haz clic en "**Continuar**". ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893122.jpg?v=1784801080.4549944) 5. Completa los campos en la ventana emergente: - "**Nombre para mostrar de la aplicación**": Completa el nombre de tu aplicación - "**Correo electrónico de contacto de la aplicación**": agrega tu correo electrónico 6. Haz clic en "**Crear aplicación**". ## 2. Agrega un producto 1. Haz clic en "**Configurar**" en el campo Facebook Login ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893124.jpg?v=1784801080.4869945) ## 3. Selecciona la plataforma "Web" ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893125.jpg?v=1784801080.5229948) 1. En el campo “**Site URL**“ inserta la URL de tu backend en GoodBarber, como el siguiente: "**http://[YOURAPP].goodbarber.app**". 2. Haz click en "**Guardar cambios**". **¡Atención!**: Cuando vayas a instalar el nombre del dominio de tu Progressive Web App, tienes que volver aquí y editar el campo de la **Site URL** (con el nuevo que estas usando como tu nombre de dominio) de la plataforma Facebook. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893126.jpg?v=1784801080.5509949) ## 4. Configuración del cliente de OAuth 1. Ve al menú**Inicio de** **sesión de Facebook> Configuración** 2. Completa el campo URI de redireccionamiento de OAuth válidos con tu PWA url seguido por **/login** Por ejemplo: *https://myapp.goodbarber.app**/login*** *Si configuras un nombre de dominio, asegúrate de agregar ambos: url predeterminada + url personalizada (con tu nombre de dominio) seguido de /login* 3. Cambia la opción "**Iniciar sesión con el SDK de JavaScript**" a **Sí** 4. Completa el campo***Dominios admitidos para el SDK de JavaScript***con la URL de tu PWA. Por ejemplo: *https://myapp.goodbarber.app/* Si configuras un nombre de dominio, asegúrate de agregar ambos: *URL predeterminada + URL personalizada (con tu nombre de dominio)* 5. Haz clic en "**Guardar cambios**" en la parte inferior de la página. Ve el ejemplo a continuación: ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-28035858.jpg?v=1784801080.578995) ## 5. Ve a "Configuración > Información Básica" en la columna izquierda 1. Agrega tu **URL de política de privacidad** *Puedes descargar una política de privacidad estándar para tu app, desde [este enlace](https://blog.goodbarber.com/docs/privacypolicy/privacypolicy_25-05-2018.doc) Esta es una plantilla de una política de privacidad. Te invitamos a personalizarla. En tu back office, ve a Ajustes > Otros ajustes > Mis Archivos, crea una carpeta llamada Política de Privacidad y sube tu archivo en formato .pdf* *Abre el archivo en un navegador externo para mostrar el URL completo. Copia y pega el URL en la plataforma Facebook.* 2. En el campo **User Data Deletion**, selecciona **URL de las instrucciones para la eliminación de datos** y completa tu URL: *Para cumplir con el Reglamento general de protección de datos (GDPR), debe proporcionar una URL con instrucciones explícitas para informar a las personas cómo eliminar sus datos de su aplicación.* 3. Escoge una **​categoría** del menú desplegable. 4. Haz clic en "**Guardar cambios**" al fondo de la pagina. ## 6. Ve al menú Configuración> Avanzada 1. Activa la opción "**Aplicación nativa o para computadora?**" 2. Haz clic en "**Guardar cambios**" al fondo de la pagina. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893128.jpg?v=1784801080.606995) ## 7. Haz tu app Facebook publica 1. Toca el botón para hacer pública tu aplicación en la barra superior de la plataforma de Facebook. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893129.jpg?v=1784801080.6389954) 2. Haz clic en "**Cambiar modo**" en la ventana emergente. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893130.jpg?v=1784801080.6589954) ## 8. Copia tu App ID en la Plataforma Facebook 1. Recupéralo en la parte superior de la página. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893132.jpg?v=1784801080.6869955) ## 9. Pega el valor en tu back office de GoodBarber 1. Ve al menú **Ajustes > Configuración de registro > Proceso de registro** para autorizar a tus usuarios a registrarse en tu PWA. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893133.jpg?v=1784801080.7109957) 2. Debajo de **Servicios Externos**, cambia **Autorizar conexión Facebook** a **On** 3. Pega tu **Facebook App ID** en el campo correcto. 4. Haz clic en **OK** ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-27893134.jpg?v=1784801080.7349958) ## 10. Solicitar acceso avanzado para el permiso public_profile 1. Ve al menú **Revisión de la aplicación> Permisos y funciones** en la plataforma de Facebook. 2. Haz clic en "**Obtener acceso avanzado**" para el permiso **public_profile.** 3. Confirma el acceso avanzado para public_profile (no olvide marcar la casilla*"Acepto que los datos que reciba a través de public_profile se utilizarán de acuerdo con el uso permitido"*). 4. Vuelva a ingresar tu contraseña de Facebook para enviar la confirmación. 5. Asegúrate de tener un acceso avanzado para el permiso *public_profile* en la lista como se muestra a continuación: ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28035075-43619818.jpg?v=1784801080.766996) ## 11. Completa Data Use Checkup Si Facebook te pide que completes Data Use Checkup: 1. Haz clic en "**Iniciar revisión**". 2. Marca la casilla "*Certifico que cualquier uso de public_profile cumple con el uso permitido".* 3. Haga clic en "**Continuar**". 4. Marca la casilla para certificar el cumplimiento de los términos de la plataforma y las políticas para desarrolladores y haga clic en "**Continuar**". 5. Haga clic en "**Enviar**". ## 12. Reconstruye tu PWA Reconstruye tu PWA para que puedas probar la autentificación Facebook: [Los diferentes tipos de actualización de la Progressive Web App](https://es.goodbarber.com/help/publicar-y-actualizar-la-pwa-r122/actualizar-tu-progressive-web-app-pwa-a306/) Esta característica no funciona en la vista previa del back office. La única forma de probar la autenticación de Facebook en tu aplicación es en **la PWA recién generada.**