Pasar al contenido principal

Como instalar y configurar el Login de Drupal 8 con Google y Facebook

En este artículo del blog explicaremos como instalar y configurar el login con Google y Facebook en un portal web construido sobre Drupal 8.

Lo primero que debemos hacer es descargar los módulos necesarios para Composer o Drush:

 

Composer requiere los siguientes módulos:

  • "drupal/social_api:1.x-dev"

  • "drupal/social_auth:1.x-dev"

  • "drupal/social_auth_google:1.x-dev"

  • "drupal/social_auth_facebook:1.x-dev"

 

Drush requiere los siguientes módulos:

  • drush dl

  • social_api

  • social_auth

  • social_auth_google

  • social_auth_facebook


Luego procedemos a la configuración con Google y Facebook, los siguientes son los pasos a seguir:


Para la configuración con Google:

Entramos a la url: https://console.developers.google.com/

En la parte superior izquierda al lado de el logo de Google damos en la flecha y creamos un nuevo proyecto, luego en el panel de administración cliqueamos en credenciales.

Nos aparecerán tres tabs (Credenciales, Pantalla de autorización de Auth, Verificación de Dominio), cliqueamos en Pantalla de autorización Auth y llenamos los campos correspondientes de acuerdo al proyecto.

drupal

Luego nos vamos al tab de credenciales y llenamos los campos Nombre, Orígenes de javascript autorizados y UrIs de redireccionamiento autorizados, en este último campo siempre va el nombre del dominio del sitio acampanado de /user/login/google/callback

Por ejemplo: http://www.example.com/user/login/google/callback

drupal

Luego guardamos y nos dará un ID de cliente y una clave, estos se utilizaran para configurar el módulo en el sitio.

Vamos al sitio para configurar el modulo en configuration/social api settings/user authentication o http://www.example.com/admin/config/social-api/social-auth

blog

Dar click en Google

blog

Llenamos lo campos Client ID y Client Secret que fueron generados en https://console.developers.google.com/ guardamos y ya queda configurado nuestro login con Google.

 

Para la configuración con Facebook:

Entramos a la siguiente url: http://developers.facebook.com/

Creamos una nueva aplicación como muestra la siguiente imagen:

drupal

Al haber clickeado en Crear Aplicación nos mostrará el siguiente cuadro de diálogo el cual se llenará con las informacion deseada:

drupal

Después de creada la app vamos a activarla, nos dirigimos a la pestaña App Review y en la opción Make “nombredelaapp” public? Le ponemos en “Yes” y guardamos.

drupal

Luego en en panel damos en la opción Add Product y agregamos Facebook Login

drupal

Al agregar el producto nos desplegara el siguiente cuadro de dialogo en el cual solo llenaremos el campo Valid OAuth rederict UrIs con http://www.example.com/user/login/facebook/callback y guardamos:

drupal

Ahora vamos a Settings llenamos los campos Display Name, App Domains y agregamos una plataforma (Add Platform) en este colocamos la url de nuestro sitio

drupal

Vamos a el sitio para configurar el modulo en configuration/social api settings/user authentication o http://www.example.com/admin/config/social-api/social-auth

blog

Clickeamos en Facebook en cual nos desplegará la configuración, llenamos los campos Application ID y App Secret que se encuentran en la app de Facebook en la pestaña de Settings

drupal

Guardamos y ya queda configurado.

Por último Social Auth genera un bloque en el cual estarán integrados los login de Google y Facebook, este bloque se podrá poner donde el usuario lo requiera para ser mostrado. Nombre del bloque (Social Auth Login).

 

Maycol Sanchez Salazar

Desarrollador Drupal

Seed EM

 

 

 

Añadir nuevo comentario