{"id":26690,"date":"2021-04-27T13:32:00","date_gmt":"2021-04-27T10:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26690"},"modified":"2021-10-17T17:55:45","modified_gmt":"2021-10-17T14:55:45","slug":"sistema-de-inicio-de-sesion-social-usando-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/sistema-de-inicio-de-sesion-social-usando-laravel-socialite\/","title":{"rendered":"Sistema de inicio de sesi\u00f3n social usando Laravel Socialite"},"content":{"rendered":"

Cr\u00e9dito: Este art\u00edculo est\u00e1 inspirado en esta publicaci\u00f3n Laravel Social Authentication with Socialite<\/a><\/p>\n

\u00bfEst\u00e1 buscando implementar un sistema de inicio de sesi\u00f3n social en su sitio web de Laravel? Al permitir el inicio de sesi\u00f3n social, sus usuarios no necesitan registrarse en su sitio web. Tambi\u00e9n nos ahorra mucho trabajo como enviar un enlace de activaci\u00f3n, verifica la cuenta de correo electr\u00f3nico. En este art\u00edculo, estudiamos c\u00f3mo agregar un sistema de inicio de sesi\u00f3n social utilizando Laravel socialite.<\/p>\n

La<\/a> biblioteca Laravel Socialite<\/a> proporciona autenticaci\u00f3n OAuth con Facebook, Twitter, Google, LinkedIn, GitHub y Bitbucket. Lo que tenemos que hacer es instalar esta biblioteca en nuestro sitio web de Laravel, configurarla, obtener claves API de un sitio social y estamos listos para comenzar.<\/p>\n

\"Sistema<\/a><\/p>\n

Crear tabla de usuarios<\/h3>\n

Para implementar el sistema de inicio de sesi\u00f3n social, necesitamos crear una tabla de usuarios que almacenar\u00e1 los detalles proporcionados por el sitio social.<\/p>\n

Si tiene una instalaci\u00f3n nueva de Laravel, abra la herramienta de l\u00ednea de comandos en el directorio ra\u00edz de un proyecto y ejecute el comando php artisan make:auth<\/code>. Este comando crear\u00e1 controladores de autenticaci\u00f3n como LoginController, RegisterController, etc.que se encuentran en el directorio app \/ Http \/ Controllers \/ Auth. Tambi\u00e9n crea una vista login.blade.php, register.blade.php en el directorio resources \/ view \/ auth.<\/p>\n

A continuaci\u00f3n, abra la tabla de migraci\u00f3n para usuarios. Modificaremos esta migraci\u00f3n predeterminada y agregaremos dos columnas m\u00e1s llamadas provider y provider_id.<\/p>\n

public function up()\n{\n\u00a0\u00a0\u00a0\u00a0Schema::create('users', function (Blueprint $table) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->increments('id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('name');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('email')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('password')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider_id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->rememberToken();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->timestamps();\n\u00a0\u00a0\u00a0\u00a0});\n}<\/code><\/pre>\n
Como puede ver, configuramos las columnas de correo electr\u00f3nico y contrase\u00f1a como anulables. \u00bfPor qu\u00e9? Cuando utilizamos la autenticaci\u00f3n de inicio de sesi\u00f3n social, no hay garant\u00eda de obtener una identificaci\u00f3n de correo electr\u00f3nico de un usuario. Y la contrase\u00f1a tampoco es necesaria en tal caso. As\u00ed que mantenemos el correo electr\u00f3nico y la contrase\u00f1a anulables. El proveedor de la columna almacenar\u00e1 el nombre del sitio social como Facebook, Twitter, etc. El ID de proveedor de la columna almacenar\u00e1 la identificaci\u00f3n social de un usuario respectivo al sitio social.<\/p>\n
Una vez que modific\u00f3 la migraci\u00f3n de su usuario como arriba, ejecute el comando php artisan migrate<\/code>. Crear\u00e1 una tabla llamada ‘usuarios’ en su base de datos.<\/p>\n
Probablemente, mientras ejecuta el comando de migraci\u00f3n obtendr\u00e1 alg\u00fan error extra\u00f1o relacionado con la longitud de los caracteres. Si es as\u00ed, abra el archivo AppServiceProvider.php del directorio app \/ Providers. En este archivo, necesitamos establecer la longitud de cadena predeterminada para las columnas de una tabla de base de datos.<\/p>\n
Archivo AppServiceProvider.php<\/p>\n
<?php\n\u00a0\nnamespace AppProviders;\n\u00a0\nuse IlluminateSupportServiceProvider;\nuse IlluminateSupportFacadesSchema;\n\u00a0\nclass AppServiceProvider extends ServiceProvider\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Bootstrap any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function boot()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Schema::defaultStringLength(255);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Register any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function register()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Modelo de usuario<\/h3>\n
De forma predeterminada, Laravel incluye un modelo AppUser Eloquent en el directorio de su aplicaci\u00f3n. Abra User.php desde la carpeta de la aplicaci\u00f3n. Agregue dos columnas m\u00e1s provider, provider_id a la variable $ fillable.<\/p>\n
protected $fillable = [\n\u00a0\u00a0\u00a0\u00a0'name', 'email', 'password', 'provider', 'provider_id',\n];<\/code><\/pre>\n
Instalar y configurar Laravel Socialite<\/h3>\n
Para instalar esta biblioteca, debe tener Composer<\/a> instalado en su sistema.<\/p>\n
En su herramienta de l\u00ednea de comandos, ejecute el siguiente comando.<\/p>\n
composer require laravel\/socialite<\/code><\/p>\n
Despu\u00e9s de instalar la biblioteca, registre LaravelSocialiteSocialiteServiceProvider en su archivo de configuraci\u00f3n config \/ app.php.<\/p>\n
'providers' => [\n\u00a0\u00a0\u00a0\u00a0\/\/ Other service providers...\n\u00a0\n\u00a0\u00a0\u00a0\u00a0LaravelSocialiteSocialiteServiceProvider::class,\n],<\/code><\/pre>\n
En el mismo archivo config \/ app.php, debajo de la matriz de alias, agregue la fachada Socialite.<\/p>\n
'Socialite' => LaravelSocialiteFacadesSocialite::class,<\/code><\/pre>\n
Ahora es el momento de registrar su aplicaci\u00f3n en el sitio social. Por ejemplo, asumimos que desea implementar la autenticaci\u00f3n de inicio de sesi\u00f3n de Facebook. As\u00ed que adelante, crea una aplicaci\u00f3n en Facebook<\/a>.<\/p>\n
Una vez que est\u00e9 listo con la identificaci\u00f3n de la aplicaci\u00f3n, el secreto de la aplicaci\u00f3n de su aplicaci\u00f3n de Facebook, abra el archivo config \/ services.php y agregue el siguiente c\u00f3digo.<\/p>\n
'facebook' => [\n\u00a0\u00a0\u00a0\u00a0'client_id' => env('FB_APP_ID'),\n\u00a0\u00a0\u00a0\u00a0'client_secret' => env('FB_APP_SECRET'),\n\u00a0\u00a0\u00a0\u00a0'redirect' => env('FB_CALLBACK_URL'),\n],<\/code><\/pre>\n
Como se muestra en el c\u00f3digo anterior, tenemos que almacenar los detalles de nuestra aplicaci\u00f3n y la URL de devoluci\u00f3n de llamada en el archivo .env.<\/p>\n
FB_APP_ID=PASTE_APP_ID_HERE\nFB_APP_SECRET=PASTE_APP_SECRET_HERE\nFB_CALLBACK_URL=YOU_SITE_URL\/login\/facebook\/callback<\/code><\/pre>\n
Hemos pasado la URL de devoluci\u00f3n de llamada como YOU_SITE_URL \/ login \/ facebook \/ callback. Ahora es el momento de crear dos rutas, una para redirigir al usuario al proveedor OAuth (en nuestro caso, Facebook) y otra para recibir la devoluci\u00f3n de llamada del proveedor despu\u00e9s de la autenticaci\u00f3n.<\/p>\n
C\u00f3digo real para manejar OAuth<\/h3>\n
En esta etapa, hemos completado toda la configuraci\u00f3n de Laravel Socialite. Es hora de escribir un c\u00f3digo que maneje la redirecci\u00f3n OAuth y obtenga los detalles del usuario.<\/p>\n
Abra su archivo login.blade.php y coloque el siguiente c\u00f3digo probablemente despu\u00e9s del bot\u00f3n de enviar.<\/p>\n
<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-6 col-md-offset-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Login with\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/facebook') }}\"><i class=\"fa fa-facebook-official\" aria-hidden=\"true\"><\/i> Facebook<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/twitter') }}\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i> Twitter<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/github') }}\"><i class=\"fa fa-github\" aria-hidden=\"true\"><\/i> Github<\/a>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Aqu\u00ed, agregamos un enlace para Github y Twitter. Los pasos para agregar OAuth para estos sitios sociales tambi\u00e9n son los mismos que los de Facebook. Solo necesita crear una aplicaci\u00f3n de los respectivos sitios sociales y almacenar esos detalles de la misma manera que agregamos para Facebook.<\/p>\n
En su archivo de ruta, defina las rutas como se muestra a continuaci\u00f3n.<\/p>\n
Route::get('login\/{provider}', 'AuthLoginController@redirectToProvider');\nRoute::get('login\/{provider}\/callback', 'AuthLoginController@handleProviderCallback');<\/code><\/pre>\n
A continuaci\u00f3n, vaya a app \/ Http \/ Controllers \/ Auth \/ LoginController.php y modifique el archivo. Debe agregar el siguiente c\u00f3digo en \u00e9l.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllersAuth;\n\u00a0\nuse AppHttpControllersController;\nuse IlluminateFoundationAuthAuthenticatesUsers;\nuse Socialite;\nuse AppUser;\nuse Auth;\n\u00a0\nclass LoginController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Redirect the user to the GitHub authentication page.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return Response\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function redirectToProvider($provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Socialite::driver($provider)->scopes(['email'])->redirect();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Obtain the user information from GitHub.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return Response\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function handleProviderCallback($provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$user = Socialite::driver($provider)->user();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = $this->findOrCreateUser($user, $provider);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Auth::login($authUser, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect($this->redirectTo);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* If a user has registered before using social auth, return the user\n\u00a0\u00a0\u00a0\u00a0\u00a0* else, create a new user object.\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param\u00a0 $user Socialite user object\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param $provider Social auth provider\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return\u00a0 User\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function findOrCreateUser($user, $provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = User::where('provider_id', $user->id)->first();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($authUser) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $authUser;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return User::create([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'name'\u00a0\u00a0\u00a0\u00a0 => $user->name,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email'\u00a0\u00a0\u00a0 => $user->email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider' => $provider,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider_id' => $user->id\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
El m\u00e9todo redirectToProvider redirige al usuario a la p\u00e1gina de inicio de sesi\u00f3n de un sitio social. Una vez que el usuario autoriza la aplicaci\u00f3n, obtenemos la informaci\u00f3n del usuario en la funci\u00f3n handleProviderCallback. Si el usuario no existe con nuestro sistema, agregamos sus detalles usando el m\u00e9todo findOrCreateUser.<\/p>\n
Esperamos que conozca el sistema de inicio de sesi\u00f3n social utilizando Laravel Socialite. Si tiene alguna pregunta o sugerencia, deje un comentario a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n