Cómo implementar un inicio de sesión vía redes sociales en Laravel

Tiempo de lectura: 4.22 minutos

Póster del artículo Cómo implementar un inicio de sesión vía redes sociales en Laravel

Socialite es un paquete de Laravel que nos permite iniciar sesión mediante aplicaciones de terceros.

Es decir, nuestros usuarios podrán iniciar sesión en nuestra aplicación usando sus cuentas de redes sociales.

Para lograr esto, Socialite nos permite usar distintos proveedores en nuestra implementación.

Existe una variada lista de Socialite Providers, y los siguientes son algunos de ellos:

  • Facebook
  • Twitter
  • Google
  • Github
  • Bitbucket
  • Steam
  • LinkedIn

Estos proveedores exponen un método de autenticación basado en OAuth.

Y el paquete nos facilita el uso de este protocolo.

¿Qué haremos?

Hoy, a modo de ejemplo, vamos a implementar un inicio de sesión usando Facebook y Twitter.

Para esto vamos a seguir 5 pasos, que son descritos a continuación.

Paso 1

Lo primero que debemos hacer es registrar nuestra aplicación ante Facebook y Twitter.

  • Solicitar credenciales en la página de desarrolladores de Facebook: https://developers.facebook.com/

  • Solicitar credenciales en la página de desarrolladores de Twitter: https://apps.twitter.com/

Solicitar credenciales en Facebook

Crear nueva app en facebook

En el caso de Facebook, debemos hacer clic en "Agregar nueva aplicación" e ingresar un nombre para nuestra aplicación.

Nombre para la app en facebook

Una vez hecho ello, estaremos en un dashboard que nos permitirá gestionar nuestra app facebook. Debemos elegir la opción "Panel" en el menú. Allí encontraremos nuestras credenciales.

Credenciales de app facebook

Solicitar credenciales en Twitter

En Twitter es muy similar. Hacemos clic en "Crear nueva app".

Crear nueva app en twitter

E ingresamos los datos de nuestra app Twitter.

Datos para la app en twitter

Luego de crear nuestra app en Twitter, la pestaña "Keys and Access Tokens" nos permitirá acceder a nuestras credenciales.

Credenciales app twitter

Con esto ya estamos listos para ir al siguiente paso.

Aunque, debes tener en cuenta que:

Desde el panel de Facebook y Twitter también es posible subir el logo de nuestra aplicación, para que cuando nuestros usuarios vayan a iniciar sesión vean nuestro logo, y esto les inspire confianza.

Paso 2

Las credenciales que hemos obtenido las debemos añadir a nuestro archivo de configuración config/services.php, tal como se muestra a continuación.

return [
    // ...

    'facebook' => [
        'client_id' => env('FACEBOOK_KEY'),
        'client_secret' => env('FACEBOOK_SECRET'),
        'redirect' => Config('app.url') . '/login/facebook/callback'
    ],

    'twitter' => [
        'client_id' => env('TWITTER_KEY'),
        'client_secret' => env('TWITTER_SECRET'),
        'redirect' => Config('app.url') . '/login/twitter/callback'
    ]
];

Como se observa, las variables que están en este archivo config/services.php se obtienen a partir de nuestro archivo .env, por tratarse de datos sensibles.

Por lo tanto, en nuestro .env tendríamos algo como lo siguiente:

FACEBOOK_KEY=314269922316594
FACEBOOK_SECRET=e23d9bbd406571f2cf9b0ae0f86a6d89

TWITTER_KEY=bkLqGFN2f1CB2qOj57z4OnWtb
TWITTER_SECRET=mAhiTKtSsYxFpVNgDdDS82qxcBrAIiwgluv8B2wqK03UiLCAgS

Paso 3

Ahora que tenemos nuestras aplicaciones registradas en Facebook y Twitter, y hemos añadido las credenciales a nuestro proyecto, es hora de instalar el paquete Laravel Socialite, que es el que nos facilitará hacer uso del protocolo OAuth para el inicio de sesión.

Para instalar esta dependencia en nuestro proyecto, ejecutamos:

composer require laravel/socialite

Luego vamos a config/app.php y en el arreglo de providers añadimos:

Laravel\Socialite\SocialiteServiceProvider::class

Así mismo en el arreglo de aliases:

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

Paso 4

Una vez que hemos obtenido nuestras credenciales, lo siguiente es empezar a definir las rutas de autenticación en nuestro proyecto.

Puedes usar la ruta que mejor te parezca para implementar el inicio de sesión.

A modo de ejemplo, yo usaré las 2 siguientes rutas, para gestionar el inicio de sesión vía Facebook:

Route::get('login/facebook', 'Auth\LoginFacebookController@redirect');
Route::get('login/facebook/callback', 'Auth\LoginFacebookController@callback');

Estas 2 rutas permiten correspondientemente:

  • Redirigir al usuario hacia Facebook (donde el usuario aceptará continuar, proporcionando sus datos básicos)
  • Gestionar la respuesta de Facebook (si acepta, le creamos una cuenta en nuestra app, o bien le permitimos ingresar con su usuario ya existente)

Entonces, vamos a crear a tan dichoso controlador:

php artisan make:controller Auth/LoginFacebookController

En su interior debemos definir el método redirect de tal forma que el usuario sea redirigido a una página de Facebook.

¿Para qué o por qué?

  • Facebook solicitirá al usuario iniciar sesión si aún no lo ha hecho.
  • Al estar identificado le mostrará un cuadro de confirmación, indicando que nuestra app está solicitando sus datos.

Todo esto se resume a una línea de código gracias a Socialite:

public function redirect()
{
    return Socialite::driver('facebook')->redirect();
}

Paso 5

Una vez que el usuario ha aceptado iniciar sesión vía Facebook, ¿qué procede?

Nuestra aplicación ya puede obtener los datos del usuario.

¿Cómo se hace ello en el caso de Facebook, en el de Twitter o alguno de los otros proveedores?

Felizmente Socialite pone a nuestra disposición una interfaz en común para facilitar esta tarea.

Es decir, tenemos métodos que funcionan de igual forma para todos los proveedores.

$user = Socialite::driver('facebook')->user();

$user->getId();
$user->getNickname();
$user->getName();
$user->getEmail();
$user->getAvatar();

Vamos a empezar haciendo algo muy sencillo:

public function callback()
{
    $user = Socialite::driver('facebook')->user();
    dd($user);
}

Y empecemos a probar nuestro inicio de sesión, ingresando a la ruta que hemos definido antes.

  • Puedes ingresar a /login/facebook directamente desde el navegador,
  • o bien aprovechar y desde ya añadir un enlace "Iniciar sesión con Facebook" que tenga como href a dicha página.
Enlace con forma de botón que lleva al login vía Facebook

Ahora mismo he ingresado y obtuve el siguiente mensaje.

Error al ingresar vía Facebook

Esto se debe a que debemos registrar en Facebook el dominio desde el cuál vamos a implementar el inicio de sesión.

En este caso, estoy usando un Virtual Host localmente y accedo al proyecto desde tawa.dev.pe.

Por lo tanto, debo ir a la configuración básica de mi app facebook,

Configuración básica en Facebook Developers

hacer clic en "Agregar plataforma" (este botón se encuentra al final) y escoger la opción "Sitio web".

Agregar plataforma web

De tal forma que en la configuración,

  • tanto en la sección de Dominios,
  • como en el campo URL del sitio web,

se tenga el mismo valor (correspondiente a la variable APP_URL que tenemos definida en el archivo .env).

Facebook app dominio y url Variable APP_URL en el archivo .env

Por último, simplemente debemos registrar nuestra URL de callback como una URI de redireccionamiento válida:

Configuración del Inicio de sesión en Facebook URI de redireccionamiento

Y así es como al visitar nuevamente /login/facebook veremos lo siguiente:

Solicitud de permisos básicos en Facebook

El nombre y el logo de la aplicación se pueden cambiar desde la sección "Configuración básica". Por ejemplo, este es otro proyecto:

Ejemplo de solicitud de permisos

Luego de dar permisos, la información del usuario se muestra del siguiente modo:

Información del usuario vía Facebook

Preguntas frecuentes

¿Qué sucede si uso un puerto distinto al 80?

En ese caso, la URI de redireccionamiento se debe registrar considerando el puerto.

URI considerando un puerto distinto al 80

Y la variable APP_URL debe también incluir el puerto.

APP_URL=http://tawa.dev.pe:8080

¿Cómo hago para tener activo el inicio de sesión con Facebook tanto en producción como en local?

En esta guía hemos visto cómo registrar una app en Facebook, y hemos configurado esta app directamente, para no hacer muy extensa la guía.

Pero lo más adecuado es tener una app Facebook, más su correspondiente versión de prueba (es decir 2 aplicaciones cliente en Facebook). Así podemos tener 2 configuraciones distintas, según el entorno en que nos encontremos.

Para lograr ello simplemente debes hacer clic en el siguiente botón:

Versión de prueba de nuestra app Facebook

# laravel # oauth

Logo de Programación y más

Comparte este post si te fue de ayuda 🙂.

Regístrate

Accede a todos los cursos, y resuelve todas tus dudas.

Cursos Recomendados 🚀

Imagen para el curso Laravel y OAuth2

Laravel y OAuth2

Veamos cómo implementar un login mediante redes sociales! Aprende y aplica esto sobre cualquier proyecto Laravel.

Iniciar curso
Imagen para el curso Laravel y Android

Laravel y Android

Curso intensivo. Incluye el desarrollo de una API, su consumo, y autenticación vía JWT. También vemos Kotlin desde 0.

Iniciar curso
Imagen para el curso Aprende Vue 3

Aprende Vue 3

Nuevo curso! Aprende Vite, Pinia, Vuetify, Vue Router y TypeScript. Desarrolla un eCommerce desde cero.

Iniciar curso

Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: