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

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

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.

Solicitar credenciales en Twitter

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

E ingresamos los datos de nuestra app Twitter.

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

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.

Ahora mismo he ingresado y obtuve el siguiente mensaje.

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,

hacer clic en "Agregar plataforma" (este botón se encuentra al final) y escoger la opción "Sitio 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).

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

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

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:

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

Preguntas frecuentes

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

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

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:

# laravel # oauth