Como hacer inicio de sesión con google en Laravel

En muchas ocaciones nos han preguntado como hacer un inicio de sesión con google en laravel, para esta pregunta contestare que a partir de la versión 5, laravel nos proporciona Laravel socialite es un excelente paquete que nos permite autenticar a nuestros usuarios con una gran variedad de servicios tales como, Facebook, Google, Twitter, LinkedIn, GitHub, Bitbucket entre otros. Por lo tanto una ves teniendo la configuración en nuestra aplicación podremos utilizar muchas otras plataformas para el proceso de inicio de sesión. Toda la lista de proveedores la podremos encontrar aquí.

Primero vamos a comenzar con nuestra instalación de un nuevo proyecto de laravel y configuración del paquete.

Instalación

Para empezar vamos a crear una nueva aplicación de Laravel, la cual puedes nombar como socialite. Estoy usando Laravel 5.4 y Laravel Valet para este ejemplo.

Configuración de la base de datos

Entonces creamos nuestra base de datos de a siguiente forma.

En mi entorno local estoy usando el usuario root para mysql, ustedes lo puede cambiar de acuerdo a su configuración, edite el archivo de configuración del entorno Laravel .env (en el directorio raíz) y agregue la configuración de su base de datos:

Migraciones

En la ruta database/migrations podemos observar que por defecto laravel nos genera 2 archivos de migraciones una de users y otra de password resets, abrimos el archivo de migración de users y vamos agregar dos campos más que son el provider y el provider_id.

El campo provider nos va ayudar a identificar con que servicio inicio sesión por ejemplo: facebook, twitter, google, githut, el campo de provider_id es un identificador que nos proporciona el Oauth de los servicios ya mencionados lo cual tiene que ser único. Al crear un nuevo usuario a travez del Oauth no necesitaremos generar una contraseña así que el campo de password le agregamos nullable, por lo tanto quedaría de la siguiente forma:

Ejecutamos la migración:

Editando el modelo User

Debemos agregar provider y provider_id a la lista de atributos en el modelo de user.

app/User.php

Creamos el las vistas y controlador de autenticación que nos brinda laravel con el siguiente comando.

Iniciamos nuestro servidor para visualizar que laravel se este ejecutando.

laravel

Instalando Socialite

Para empezar a usar laravel/socialite debemos de requerir el paquete.

Configuración

Después de terminar la instalación del paquete vamos registrar el Laravel\Socialite\SocialiteServiceProvider dentro del archivo config/app.php

y agregar el socialite facade dentro de nuestro arreglo de aliases.

Por lo tanto una ves ya instalado y configurado el paquete nos dirigimos a nuestro navegador y refrescamos la pagina para verificar que no tengamos ningún error en la instalación.

Entonces una ves ya teniendo toda nuestra configuración de paquete, base de datos y de nuestra aplicación vamos con lo lo siguiente:

Como hacer inicio de sesión con google en Laravel

Primeramente necesitamos de abrir el Developers Console y crear un nuevo proyecto.

Para eso nos dirigimos donde dice Credenciales >Crear credenciales > y seleccionamos Id de cliente de Oauth

Google apis credenciales

Después seleccionamos el tipo de aplicación que seria en ese caso Web, le asignamos un nombre a nuestra aplicación y vamos autorizar nuestras url de nuestro servidor local  de desarrollo en mi caso seria de la siguiente forma http://socialite.dev/  y utilizare como callback la ruta con google http://socialite.dev/auth/google/callback así que tienes que añadir tu url local , a continuación le damos en crear.

Nota: si no estas usando laravel valet o homestead, puede que uses tu php artisan serve  de igual forma funciona http://localhost:8000 y http://localhost: 8000/auth/google/callback.

Esto nos va a generar un Google id cliente y una Google id Secreto que vamos a agregar en nuestro archivo .env  mas adelante.

Por lo tanto no se nos olvide habilitar Google+ Api ya que si esto, no nos va permitir acceder a la aplicación, así que nos dirigimos a  nuestro lado derecho en Biblioteca > Google+ Api Y le damos en habilitar.

Habilitar google+ api

 

Bueno ya mero terminamos ya concluimos los primeros pasos que fue instalación y configuración de nuestra aplicación también del paquete de Laravel Sociliate y de Google, así que no desesperes y continuamos.

Configuración de socialite y google

Entonces nos vamos a nuestro archivo config/services.app  dentro de nuestra aplicación  y dentro del array agregamos la configuración del servicio de google de la siguiente manera:

Abrimos nuestro archivo .env  y añadimos nuestra client id y id secreto que nos proporciono google.

A cada uno de nosotros nos dio uno diferente así que puede cambiar los valores si se nos olvido cual era, no se alarmen podemos revisarlo en Developers Console donde creamos nuestra app.

Routes

Agregar en routes/web.php 

Editando nuestro LoginController

Así que abrimos nuestro archivo app/Http/Controllers/Auth/LoginController.php  que es el auth que nos genero Laravel y lo vamos a modificar agregando dos nuevos métodos que nos van ayudar hacer el login con google.

El primero nos va a dirigir a la pagina de google para darle permisos a la aplicación de acceder a nuestra información.

Y el segundo nos ayudara a guardar la información obtenida de google en nuestra base de datos.

No se les olvide añadir el

Modificando las vistas

Es hora de agregar los enlaces a las vista de registro e inicio de sesión para que los usuarios puedan inscribirse e iniciar sesión con Google, Facebook, Github y Twitter. Observará que los enlaces apuntan a / auth / {provider} y lo llevarán al proveedor de OAuth para la autenticación. En la vista de registro de usuario, agregue esto después del botón Registrar:

La vista del login quedaria así:

login laravel socialite

De lo anterior cuando presionamos el botón de google nos va a enviar al servicio de OAuth de google y cuando le damos en permitir nos va a redireccionar al callback que guarda nuestro usuario de google en la base de datos y así comenzar a iniciar sesión con nuestra cuenta de google.

En conclusión el día de hoy aprendimos como iniciar una sesión con nuestra cuenta de google en Laravel con el paquete de Laravel Sociliate, desde la instalación hasta la configuración y obtención de credenciales de google, si tuviste algún problema pregúntanos en los comentarios o en nuestro canal de slack Laravel en español y si te gusto y ayudo, ayúdanos  a compartirlo en tus redes sociales, para que mas personas puedan utilizarlo. Saludos.

Comparte este artículo

Entra en la discusión y deja tu comentario

  • Juan Rincón

    Excelente! Mil gracias lo estaba necesitando

  • Dennis Castro Alonzo

    Buenisimo!

  • Max

    Hola, como estan? Trate de probar con laravel 5.2 , pero me da error el composer. Socialite 3.x requiere laravel 5.4. Cual es la que corresponde a laravel 5.2 de socialite? trate de encontrar en la doc pero no dice mucho el readme. Y la versión de socialite anterior es bastante diferente por lo que vi.

    • Kontiki Velasco

      Que tal max, puedes intentar con la 2.0 de socialite , sino mal recuerdo no cambia demasiado.

      Saludos

  • Juan Rincón

    Saludos una pregunta, luego de que el usuario inicie con algún proveedor como hacer que complete su registro? por ejemplo, llenar el campo contraseña, país, ciudad?

    • Kontiki Velasco

      Que tal Juan, lo que puedes hacer una ves que haces login con algun proveedor, puedes mandarlo a otra vista en donde te pida completar los datos puedes hacerlo de dos formas la primera; seria en tu misma tabla de users agregar los campos que faltaria sin olvidar ponerlos que sea nulleables, esto para cuando hagas en registro con el proveedor no te mande alguna excepción, la segunda forma es crear otra tabla por ej. Users_profile y esa asu ves este relacionada con la tabla users, esas son las dos maneras que se me ocurren , sino son muchos campos que registrar me iria por la primer opcion, espero que te sirva mi respuesta y me gustaria saber si lo resolviste ya sea por este medio o por nuestro canal de slack. Saludos