GitHub es una plataforma utilizada por una gran cantidad de desarrolladores hoy en día, aunque sea de forma casual. Así que si estás pensando crear una aplicación solo para desarrolladores, podrías considerar agregar autenticación mediante GitHub como una alternativa a la autenticación tradicional de usuario y contraseña que incluye Laravel por defecto. Quizás suena complicado integrar una autenticación de terceros en tu aplicación, pero en realidad el componente Laravel Socialite lo hace muy sencillo, como veremos en el siguiente tutorial:
Para poner a prueba el componente Laravel Socialite, necesitaremos por supuesto un proyecto de Laravel, yo crearé uno nuevo desde la consola con el comando laravel new hub (siendo hub el nombre que voy a darle al proyecto). Por otro lado la URL de este proyecto será http://hub.app/
Instalando Laravel Socialite
composer require laravel/socialite
Ahora típicamente agregaríamos el Service Provider en nuestro archivo config/app.php, pero Laravel 5.5 incluye una nueva característica de detección automática de paquetes que hace este paso opcional, de igual forma el alias del Facade Socialite será agregado automáticamente. Puedes darte cuenta de esto porque al instalar el componente deberías ver un mensaje como el siguiente en la consola:
Discovered Package: laravel/socialite
Agregando nuestras credenciales de GitHub
Lo siguiente que debemos hacer es agregar nuestras credenciales de GitHub en config/services.php de la siguiente forma:
'github' => [
'client_id' => 'your-github-app-id',
'client_secret' => 'your-github-app-secret',
'redirect' => 'http://hub.app',
],
Pero en vez de almacenar los valores de GitHub como cadenas en el archivo de configuración, voy a utilizar mi archivo de entorno para ello, por medidas de seguridad:
'github' => [
'client_id' => env('GITHUB_ID'),
'client_secret' => env('GITHUB_SECRET'),
'redirect' => 'http://hub.app/login/callback',
],
Para obtener estos dos valores debes ir ahora a tu cuenta de GitHub, buscar en:
- Settings
- Developer Settings
- OAuth Apps
- Register a new application
- Colocar los datos de tu nueva aplicación:
- Asegúrate de colocar en «Authorization callback URL» la misma URL que colocaste en
redirect(en mi caso:http://hub.app/login/callback).
- Asegúrate de colocar en «Authorization callback URL» la misma URL que colocaste en
- Presiona «Register Application»
Luego copia y pega el ID y el Secret generados al final del archivo .env de tu aplicación, de esta forma.
GITHUB_ID=imn0tg1v1ngy0umy1d0k GITHUB_SECRET=0fc0urs3th1s1sn0tmys3cr3tstr1ng31th3rl0l
Nota que yo estoy asignándolos a las variables de entorno GITHUB_ID y GITHUB_SECRET, tú puedes colocarles los nombres que quieras siempre que coincidan con los que colocaste en config/services.php y que por favor mantengas estos valores excluidos del repositorio del proyecto. Aprende más sobre variables de entorno y sobre seguridad en Laravel.
Como redirect es una simple URL puedes dejarla en services.php o colocarla también como variable de entorno si quieres.
Utilizando Laravel Socialite
Ahora estamos listos para poner a prueba este componente. Primero creemos un nuevo controlador:
php artisan make:controller LoginController
Luego en el controlador escribiremos el siguiente código:
<?php
namespace App\Http\Controllers;
use Laravel\Socialite\Facades\Socialite;
class LoginController extends Controller
{
/**
* Envia al usuario a la pagina de inicio de GitHub.
*/
public function redirectToGitHub()
{
return Socialite::driver('github')->redirect();
}
/**
* Obtiene la información del usuario de GitHub.
*/
public function handleGitHubCallback()
{
$githubUser = Socialite::driver('github')->user();
return "Bienvenido {$githubUser->name} ({$githubUser->nickname})";
}
}
Por supuesto debemos registrar las rutas en el archivo routes/web.php:
Route::get('login', 'LoginController@redirectToGitHub');
Route::get('login/callback', 'LoginController@handleGitHubCallback');
Ahora cuando visito http://hub.app/login soy llevado a GitHub y luego de otorgar autorización, soy llevado de vuelta a mi app donde veo en pantalla el mensaje Bienvenido Duilio Palacios (sileence)
Por supuesto nosotros no queremos limitarnos a obtener información, sino que queremos autenticar a nuestro usuario y ¡En este punto ya podemos hacerlo! Puesto que hemos comprobado su identidad a través de GitHub. Así que vamos a actualizar el método handleGitHubCallback con lo siguiente:
/**
* Obtiene la información del usuario de GitHub.
*/
public function handleGitHubCallback()
{
$githubUser = Socialite::driver('github')->user();
$appUser = User::firstOrCreate([
'email' => $githubUser->getEmail()
], [
'nickname' => $githubUser->getNickname(),
'name' => $githubUser->getName(),
'avatar' => $githubUser->getAvatar(),
]);
auth()->login($appUser);
return redirect('/')->with('alert', "Bienvenido {$appUser->name}");
}
Ahora, utilizando Eloquent, le indicamos a Laravel que queremos obtener o crear un usuario con el email obtenido desde GitHub (si el email ya existe en la tabla users vamos a traer al usuario, de lo contrario crearemos un usuario nuevo con dicho email más los datos extras que pasamos como segundo argumento (nickname, etc). De cualquier forma firstOrCreate nos devolverá un objeto de tipo User que representará al usuario de nuestra aplicación y en mi ejemplo lo estoy almacenando en una variable $appUser.
Estoy utilizando las variables $githubUser y $appUser para que puedas visualizar que son 2 objetos diferentes, el primero proviene de Socialite y contiene la información de GitHub y el último será solo un modelo de Eloquent como ya hemos trabajado antes.
Una vez obtenido o creado el usuario, lo vamos a autenticar con auth()->login($appUser) y finalmente debemos hacer una redirección a otra página, en mi ejemplo, a la página de inicio y también envié un mensaje de alerta que puedes imprimir en la vista simplemente con:
@if (session()->has('alert'))
{{ session('alert') }}
@endif
Si quieres probar el código anterior, por supuesto necesitarás crear una base de datos, configurarla en el archivo .env y además modificar la migración de usuarios para agregar los campos extras:
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('nickname');
$table->string('avatar');
$table->string('email')->unique();
$table->rememberToken();
$table->timestamps();
});
Es importante que elimines el campo password (en el caso de que solo quieras soportar autenticación mediante GitHub).
También debes modificar la propiedad $fillable dentro del modelo User (en app/User.php), para agregar las columnas adicionales:
protected $fillable = [
'name', 'nickname', 'avatar', 'email',
];
Una vez hecho esto, sólo tienes que ejecutar las migraciones con php artisan migrate y ¡Ya estás listo para probar el nuevo login!
Conclusión
Como puedes ver, Laravel Socialite hace que sea muy fácil aprovechar el sistema de autenticación de otras plataformas como GitHub, para no solo identificar al usuario, sino también obtener información básica que podemos almacenar en la base de datos de nuestra aplicación, haciendo el proceso de registro básico muy sencillo, rápido y sin formularios. La única desventaja acá es que obligaríamos a nuestros usuarios a tener cuenta de GitHub, lo cual puede ser un problema o no. Para solucionar esto, podemos ofrecer otras vías de autenticación (por ejemplo mediante Facebook con Socialite) o seguir soportando el sistema tradicional de usuario + contraseña. De cualquier forma con esta introducción espero que puedas sacarle provecho a este componente de Laravel. No dejes de revisar la documentación de Socialite para ver todas las opciones disponibles.
Si quieres aprender más sobre autenticación con Laravel, regístrate en nuestro listado de emails y te informaré de nuevos tutoriales:
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
