Iniciar sesión con Twitter en Laravel usando Laravel Socialite

Last updated Oct 17, 2021

Contenido

Empezando

Comencemos con la nueva instalación de Laravel. No es obligatorio usar una nueva instalación de Laravel, también puede usar su proyecto existente.

Para instalar la última versión de Laravel, ejecute el siguiente comando:

composer create-project --prefer-dist laravel/laravel twitterlogin

Tras la instalación, cree la base de datos y agregue las credenciales en el .envarchivo. Estamos construyendo un sistema de inicio de sesión, por lo que deberíamos almacenar los detalles del usuario en la base de datos.

Este tutorial se basa en Iniciar sesión con Twitter, por lo que obtendremos la identificación de Twitter del usuario después de una autenticación exitosa. Para almacenar esta identificación social, estamos agregando columnas providery provider_ida la tabla de ‘usuarios’. La columna provideralmacenará el valor como ‘twitter’ y una columna provider_ides para la identificación de Twitter del usuario.

Cuando usamos el inicio de sesión social, no necesitamos almacenar contraseñas, por lo que la columna de contraseña debe aceptar el valor ‘NULL’ como predeterminado. No hay garantía de recibir el correo electrónico del usuario después del inicio de sesión social, por lo que, por curiosidad, debemos establecer columnas de correo electrónico también para aceptar el valor ‘NULL’.

Abra el archivo de migración de la tabla ‘usuarios’ y agregue el código a continuación.

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

Después de esto, ejecute el comando de migración que creará tablas en su base de datos.

php artisan migrate

También debe agregar las columnas providery provider_idal modelo de usuario.

aplicación / User.php

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id'
];

Obtener credenciales de Twitter

Como vamos a integrar el inicio de sesión de Twitter en Laravel, primero debe obtener sus credenciales de Twitter. Siga los pasos a continuación para crear una aplicación de Twitter y obtener sus credenciales.

Inicie sesión en la cuenta de desarrollador de Twitter y cree una nueva aplicación.
Complete todos los campos obligatorios, como el nombre y la descripción de la aplicación.
Agregue el dominio de su sitio web en el campo Sitio web.
Establezca la URL de devolución de llamada como http://localhost:8000/twitter/callback. Ajuste la URL según sus requisitos.
Una vez que se haya registrado, copie y pegue las credenciales de la aplicación creada (Clave de consumidor y Secreto) que requiera en algún tiempo.

Con estas credenciales copiadas, su aplicación Laravel completará el flujo de OAuth cuando los usuarios inicien sesión con su cuenta de Twitter.

Crear rutas y controlador

Para incluir la funcionalidad de iniciar sesión con Twitter, necesitamos agregar un código en nuestro proyecto Laravel. Creemos un LoginControllerusando el comando:

php artisan make:controller LoginController

Necesitamos agregar un enlace de inicio de sesión en el archivo Blade. Cree un login.blade.phpy agréguele el siguiente HTML.

<a href="{{ url('/login/twitter') }}" class="btn btn-success">
    {{ __('Login with Twitter') }}
</a>

Puede llamar a esta vista desde el indexmétodo de LoginController.

/**
 * Call the view
 */
public function index()
{
    return view('login');
}

A continuación, agregue la ruta para ello. También estoy agregando algunas rutas más que serán necesarias para la siguiente parte del tutorial.

Route::get('login', 'LoginController@index');
Route::get('login/{provider}', 'LoginController@redirectToProvider');
Route::get('{provider}/callback', 'LoginController@handleProviderCallback');
Route::get('/home', function() {
    return 'User is logged in';
});

Después de que el usuario inicie sesión con Twitter, lo redireccionaré a la homeruta. Es solo para fines de demostración. Deberías cambiar esta ruta por otra.

Iniciar sesión con Twitter en Laravel

Es hora de usar el paquete Socialite ahora. Con el siguiente comando, puede instalar el paquete Socialite en su proyecto Laravel.

composer require laravel/socialite

Después de instalar Socialite, necesitamos configurarlo. Abra config/services.phpy agregue la configuración de Twitter a este archivo de la siguiente manera:

'twitter' => [
    'client_id' => env('TWITTER_API_KEY'),
    'client_secret' => env('TWITTER_API_SECRET_KEY'),
    'redirect' => env('TWITTER_CALLBACK_URL'),
],

Puede notar que utilicé el envmétodo para obtener los valores especificados. Significa que necesitamos definir estas constantes en el .envarchivo.

TWITTER_API_KEY=PASTE_TWITTER_API_KEY
TWITTER_API_SECRET_KEY=PASTE_TWITTER_API_SECRET_KEY
TWITTER_CALLBACK_URL=http://localhost:8000/twitter/callback

Asegúrese de reemplazar los marcadores de posición con sus claves API reales. A continuación LoginController, estamos escribiendo una función que redirige a un usuario a la página de inicio de sesión de Twitter y, con la autorización correcta, iniciará la sesión del usuario.

LoginController.php

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Socialite;
use AppModelsUser;
use Auth;
 
class LoginController extends Controller
{
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';
  
    /**
     * Call the view
     */
    public function index()
    {
        return view('login');
    }
  
    /**
     * Redirect the user to the Twitter authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Twitter.
     *
     * @return Response
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $authUser = $this->findOrCreateUser($user, $provider);
        Auth::login($authUser, true);
        return redirect($this->redirectTo);
    }
    
    /**
     * If a user has registered before using social auth, return the user
     * else, create a new user object.
     * @param  $user Socialite user object
     * @param $provider Social auth provider
     * @return  User
     */
    public function findOrCreateUser($user, $provider)
    {
        $authUser = User::where('provider_id', $user->id)->first();
        if ($authUser) {
            return $authUser;
        }
        return User::create([
            'name'     => $user->name,
            'email'    => $user->email,
            'provider' => $provider,
            'provider_id' => $user->id
        ]);
    }
}

Dirígete a la página de inicio de sesión y haz clic en el enlace "Iniciar sesión con Twitter". Complete el proceso y debe iniciar sesión en el sistema usando Twitter. También puede encontrar entradas de usuarios en la userstabla.

Espero que pueda aprender sobre el inicio de sesión con Twitter en Laravel usando el paquete Socialite. Me gustaría escuchar sus pensamientos o sugerencias en la sección de comentarios a continuación.

Iniciar sesión con Twitter en Laravel usando Laravel Socialite

Empezando

Obtener credenciales de Twitter

Crear rutas y controlador

Iniciar sesión con Twitter en Laravel

Artículos relacionados