Comparte en Facebook Twitter Google+

autenticación mediante Facebook con Laravel Socialite

Las redes sociales son un punto influyente en la Internet donde miles de millones de usuarios comparten temas, mensajes, imágenes y muchas cosas más. Múltiples aplicaciones y páginas web ofrecen a sus usuarios la posibilidad de poder registrarse o acceder a ellas usando redes sociales, sin la necesidad de que tengan que rellenar molestos formularios. En Laravel tenemos un paquete llamado Laravel Socialite el cual nos permitirá que en nuestro sitio podamos tener un simple botón o enlace para que el usuario pueda registrarse con sus redes sociales con un simple click.

Laravel Socialite

Es un paquete oficial de la comunidad de Laravel que nos facilita el manejo de accesos desde las redes sociales, ofreciendo una interfaz expresiva y fluida a la autenticación OAuth. El paquete por defecto nos ofrece compatibilidad para las siguientes redes sociales:

  • Facebook
  • Twitter
  • Google
  • GitHub
  • LinkedIn
  • Bitbucket

Si deseas añadir otra puedes hacerlo creando un nuevo Provider siguiendo la colección de Socialite Providers ofrecido por la documentación del paquete.

Instalación del paquete

Antes de comenzar con la instalación vamos a generar un nuevo proyecto Laravel con Composer ejecutando el comando:

Ahora debemos ingresar a la carpeta del proyecto llamada socialite desde nuestra terminal o consola:

Con esto ya tenemos todo preparado para la instalación del paquete. Para instalarlo debemos decirle a Composer que requerimos el paquete y todas sus dependencias de la siguiente forma:

Debemos esperar a que carguen todas las dependencias necesarias para el correcto funcionamiento del paquete y cuando finalmente termine de hacerlo podemos continuar agregando el Service Provider en el archivo de configuración config/app.php específicamente en el arreglo providers:

En este mismo archivo debemos agregar un nuevo Facade en el arreglo aliases de la siguiente forma:

Con esto el paquete ya estaría instalando en nuestro proyecto, pero aun no hemos agregado las credenciales las cuales van a necesitar las redes sociales con las que estemos trabajando, para obtenerlas debemos crear una nueva app. La gran mayoría de las redes sociales nos ofrecen una API la cual nos permitirá interactuar con ellas y serán las encargadas de ofrecernos las credenciales únicas a nuestra aplicación.

Si deseas estudiar en detalle los Facade de Laravel te invito a visitar las siguientes lecciones en Styde:

Creando una nueva app en Facebook

Para nuestro ejemplo vamos a utilizar Facebook, comenzaremos creando una nueva app y esto lo podemos hacer ingresando a la dirección https://developers.facebook.com/apps/, pulsamos sobre el botón Agregar una nueva aplicación y rellenamos el formulario de la siguiente forma:

creando nuevo identificador de la aplicación en facebook

Luego de terminar de rellenar el formulario pulsamos sobre Crear identificador de la aplicación y seremos llevados a una página como esta:

pantalla de la configuración de la aplicación creada

Seleccionaremos la primera opción Inicio de sesión con Facebook, pulsamos el botón Empezar y luego en el panel de la izquierda seleccionaremos la opción Configuración, en esa página pulsaremos sobre Agregar plataforma y nos mostrará una ventana como esta:

selección de plataforma en Facebook

En esta ventana seleccionaremos la opción Sitio Web y nos mostrará un formulario donde debemos ingresar la dirección de la página web la cual podrá obtener acceso a nuestra aplicación de Facebook, en mi caso estaré utilizando el servidor de pruebas y colocaré http://localhost:8000. Ahora que hemos agregado la dirección debemos ir a la opción Panel ubicado en la izquierda y seremos llevados a una página como esta:

información de API de Facebook

Ahora sin cerrar esta página vamos a nuestro proyecto, específicamente al archivo config/services.php y agregamos al final del arreglo:

Estos datos, son los datos de mi aplicación los cuales debes sustituir de la siguiente forma, client_id es el Identificador de la aplicación y client_secret es Clave secreta de la aplicación, esta información es la que hemos obtenido desde la aplicación de Facebook. Podemos observar que ademas tenemos redirect, el valor que tiene es la dirección a la cual Facebook va a redireccionar luego de comprobar los datos, mas adelante estaremos observando mucho mejor cual es su función.

Nuestro mini-proyecto

Para este ejemplo en un formulario de login estaremos colocando un enlace para ingresar con Facebook, cuando un nuevo usuario lo intente por primera vez capturaremos esos datos y los guardaremos en una tabla llamada users y con esto podremos manipular los datos para utilizarlos en toda nuestra aplicación. Si el usuario ya ha ingresado anteriormente evitaremos crear un nuevo registro en nuestra base de datos.

Vamos a comenzar modificando uno de los archivos de migración el cual Laravel trae por defecto, editaremos el archivo database/migrations/2014_10_12_000000_create_users_table.php al cual le añadiremos una nueva columna y una modificación a la columna password de la siguiente forma:

Con la nueva columna podemos guardar el avatar del usuario, además hemos agregado la opción nullable a la columna password ya que si el usuario ingresa mediante alguna red social no necesitaremos asignarle o pedirle una contraseña.

Vamos a nuestro modelo app/User.php y agregamos la nueva columna al arreglo que tiene la variable $fillable de la siguiente forma:

Antes de continuar debemos editar el archivo .env ubicado en la raíz del proyecto, colocaremos las credenciales de nuestra base de datos

Vamos a ejecutar las migraciones en nuestra consola o terminal con el comando

Ademas también ejecutaremos el siguiente comando:

Con este comando estamos generando el sistema de autentificación que nos trae Laravel por defecto el cual contiene un registro, login y recuperación de clave, puedes encontrar mas información sobre este comando en el siguiente enlace Registro, login y recuperación de clave con el comando make:auth en Laravel 5.3 .

Crearemos un controlador el cual será el encargado de manejar la redirección y la obtención de los datos, este controlador lo guardaremos en un subdirectorio llamado Auth y para esto escribimos en nuestra terminal o consola el siguiente comando:

Ya que hemos creado el controlador, vamos a editarlo y agregar algunos métodos: uno encargado de la redirección a Facebook, otro para obtener la información del usuario y por último uno para realizar el login.

Debemos agregar un par de rutas las cuales estarán apuntadas a un par de métodos que hemos creado en nuestro controlador SocialAuthController, esto lo hacemos en nuestro archivo routes/web.php

Vamos a editar el formulario de login donde agregaremos un enlace para loguearnos con Facebook, sugiero que se coloque en el formulario de login como una alternativa. En nuestro caso editaremos el archivo resources/views/auth/login.blade.php y añadiremos estas líneas en el contenido del formulario:

Ahora tenemos una ruta con el nombre social.auth la cual recibe un parámetro y es el nombre de nuestro Provider o el nombre de la red social en este caso le pasamos facebook, esto lo hacemos para trabajar de forma dinámica y poder aplicar lo que hemos trabajado a diferentes redes sociales.

Para comprobar que todo este funcionando de forma correcta, reemplazaremos el código de la vista resources/views/home.blade.php por éste:

Ahora en nuestra vista home.blade.php observaremos la información del usuario de autentificado muy parecido a una especie de perfil, para comprobar que todo este funcionando ejecutamos el servidor de pruebas con el comando:

Vamos a dirigirnos a http://localhost:8000/login y observaremos un botón llamado Facebook, si lo presionamos observaremos como nos redirige a Facebook y nos solicita permisos para acceder a la aplicación, al aceptar seremos redirigidos a nuestra página web y observaremos una vista como ésta si todo ha salido bien:

aplicación de Laravel accediendo con Socialite

Si deseas agregar otra red social simplemente debes agregar otro provider en el archivo config/services.php con la información necesaria. Si deseas conocer mas sobre el paquete te invito a visitar su repositorio en GitHub:https://github.com/laravel/socialite

Con esto terminamos, como lo has notado manejar el acceso mediante las redes sociales con este paquete es muy simple y útil. Esperamos que sea de tu utilidad este artículo y por favor no olvides compartirlo en las redes sociales.

Material relacionado

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.