Login con Facebook (Laravel Socialite)

Login con Facebook (Laravel Socialite)
Laravel Livewire
Carlos Villatoro

Carlos Villatoro

hace 10 meses

Vamos a realizar un login con Facebook para nuestra aplicaciones web, para esto vamos a utilizar la librería Socialite de Laravel.


Requisitos

  • Proyecto en Laravel 8
  • Jetstream
  • Stack Livewire

En este caso podremos seguir registrando usuarios desde el formulario, pero ahora tendremos habilitada la opción para registrarnos he iniciar sesión con nuestra cuenta de Facebook.

Paso #1

Una vez creado un proyecto con Laravel 8, JetStream/Livewire y configurado la base de datos con el nuevo campo para almacenar el id de Facebook (”fb_id”) de tipo string y nullable, vamos a instalar el paquete de Laravel/Socialite con el siguiente comando: composer require laravel/socialite.

Paso #2

Vamos a configurar los providers y el alias para nuestra librería, para esto nos dijimos a la siguiente ruta: ./config/app.php.

En los providers vamos a agregar el siguiente:

  • Laravel\Socialite\SocialiteServiceProvider::class,

En los alias agregamos el siguiente:

  • 'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Paso #3

Vamos a crear un controlador llamado SocialController y dentro de esta vamos a importar los facade de auth y socialite, además de el modelo usuario y exception, tenemos que crear 2 funciones que se encargaran de hacer el redireccionamiento de datos a nuestra base de datos:

Función para controlador

Función 2

En el campo contraseña al llevar a producción lo mejor es colocar el fb_id como contraseña por seguridad del usuario.

Paso #4

Vamos a crear las rutas necesarias, debemos importar el controlador SocialController

Socialcontroller rutas

Paso #5

Ahora configuraremos las variables de entorno en la siguiente ruta: ./config/service.php 

variables de entorno

y estas variables de entorno las configuraremos en el archivo .env

Variables en .env

En este caso el client id y el client secret los vamos a obtener de la aplicación de Facebook developer.

Paso #6

En este caso el client id y el client secret los vamos a obtener de la aplicación de Facebook developer.

1. Nos dirigimos a nuestras app

2. Le damos al botón crear app > seleccionamos ninguno > colocamos el nombre de la app y el email del responsable > nos pedirá la contraseña de nuestro perfil.

3.  De los productos que nos ofrece Facebook seleccionamos iniciar sesión con Facebook > le indicamos que estamos desarrollando para la web > colocamos la URL con https de nuestra página > y nos dirigimos a la barra izquierda a configuraciones y básicas para extraer los datos para las variables.

Si nos damos cuenta el app esta en desarrollo, para poder pasar la app a deploy debemos a agregar en configuración básica un link de nuestras políticas de privacidad.

Paso #7

Botón de inicio de sesión con Facebook

Maquetamos el botón en la vista login y en la register, este deberá apuntar a la ruta ‘auth/facebook’ que nosotros creamos.
Puedes descargar el maquetado de este botón que realice en TailwindCSS en el siguiente enlace.

Evitando errores en local

vamos a evitar el error 60 que sale por no utilizar el protocolo https en nuestro dominio, para esto nos dirigimos a la ruta: ./vendor/guzzlehttp/guzzle/src/client.php y dentro de la función configureDefault vamos a modificar el valor de ‘verify’ a falso.