{"id":29291,"date":"2021-06-12T18:24:00","date_gmt":"2021-06-12T15:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29291"},"modified":"2021-10-17T16:19:27","modified_gmt":"2021-10-17T13:19:27","slug":"iniciar-sesion-con-twitter-en-laravel-usando-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/iniciar-sesion-con-twitter-en-laravel-usando-laravel-socialite\/","title":{"rendered":"Iniciar sesi\u00f3n con Twitter en Laravel usando Laravel Socialite"},"content":{"rendered":"<p>Recientemente publiqu\u00e9 un art\u00edculo sobre <a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-un-inicio-de-sesion-de-twitter-oauth-en-un-sitio-web-con-php\/\" title=\"Iniciar sesi\u00f3n con Twitter en PHP\" >Iniciar sesi\u00f3n con Twitter en PHP<\/a>. Uno de nuestros lectores pidi\u00f3 escribir un art\u00edculo sobre el inicio de sesi\u00f3n con Twitter en Laravel. Aunque Laravel se basa en el lenguaje de programaci\u00f3n PHP y escrib\u00ed sobre el inicio de sesi\u00f3n de Twitter en PHP, s\u00e9 que el tutorial anterior no es adecuado para el marco de Laravel. Laravel tiene su propia estructura de carpetas, flujo de desarrollo. Un desarrollador debe seguir los est\u00e1ndares de Laravel mientras crea aplicaciones web en \u00e9l.<\/p>\n<p>Laravel tiene sus paquetes oficiales que ayudan a los desarrolladores a lograr cierta funcionalidad. Uno de los paquetes es <a href=\"https:\/\/laravel.com\/docs\/master\/socialite\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Socialite<\/a>. Usando Socialite, puede integrar el inicio de sesi\u00f3n social con diferentes proveedores como Facebook, Twitter, LinkedIn, Google, etc.<\/p>\n<p>En este art\u00edculo, estudiamos <strong>Iniciar sesi\u00f3n con Twitter en Laravel<\/strong> usando Laravel Socialite.<\/p>\n<h3>Empezando<\/h3>\n<p>Comencemos con la nueva instalaci\u00f3n de Laravel. No es obligatorio usar una nueva instalaci\u00f3n de Laravel, tambi\u00e9n puede usar su proyecto existente.<\/p>\n<p>Para instalar la \u00faltima versi\u00f3n de Laravel, ejecute el siguiente comando:<\/p>\n<pre><code>composer create-project --prefer-dist laravel\/laravel twitterlogin<\/code><\/pre>\n<p>Tras la instalaci\u00f3n, cree la base de datos y agregue las credenciales en el <code>.env<\/code>archivo. Estamos construyendo un sistema de inicio de sesi\u00f3n, por lo que deber\u00edamos almacenar los detalles del usuario en la base de datos.<\/p>\n<p>Este tutorial se basa en Iniciar sesi\u00f3n con Twitter, por lo que obtendremos la identificaci\u00f3n de Twitter del usuario despu\u00e9s de una autenticaci\u00f3n exitosa. Para almacenar esta identificaci\u00f3n social, estamos agregando columnas <code>provider<\/code>y <code>provider_id<\/code>a la tabla de &#8216;usuarios&#8217;. La columna <code>provider<\/code>almacenar\u00e1 el valor como &#8216;twitter&#8217; y una columna <code>provider_id<\/code>es para la identificaci\u00f3n de Twitter del usuario.<\/p>\n<p>Cuando usamos el inicio de sesi\u00f3n social, no necesitamos almacenar contrase\u00f1as, por lo que la columna de contrase\u00f1a debe aceptar el valor &#8216;NULL&#8217; como predeterminado. No hay garant\u00eda de recibir el correo electr\u00f3nico del usuario despu\u00e9s del inicio de sesi\u00f3n social, por lo que, por curiosidad, debemos establecer columnas de correo electr\u00f3nico tambi\u00e9n para aceptar el valor &#8216;NULL&#8217;.<\/p>\n<p>Abra el archivo de migraci\u00f3n de la tabla &#8216;usuarios&#8217; y agregue el c\u00f3digo a continuaci\u00f3n.<\/p>\n<pre><code>\/**\n\u00a0* Run the migrations.\n\u00a0*\n\u00a0* @return void\n\u00a0*\/\npublic function up()\n{\n\u00a0\u00a0\u00a0\u00a0Schema::create('users', function (Blueprint $table) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;increments('id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;string('name');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;string('email')-&gt;nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;timestamp('email_verified_at')-&gt;nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;string('password')-&gt;nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;string('provider');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;string('provider_id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;rememberToken();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table-&gt;timestamps();\n\u00a0\u00a0\u00a0\u00a0});\n}<\/code><\/pre>\n<p>Despu\u00e9s de esto, ejecute el comando de migraci\u00f3n que crear\u00e1 tablas en su base de datos.<\/p>\n<pre><code>php artisan migrate<\/code><\/pre>\n<p>Tambi\u00e9n debe agregar las columnas <code>provider<\/code>y <code>provider_id<\/code>al modelo de usuario.<\/p>\n<p><strong>aplicaci\u00f3n \/ User.php<\/strong><\/p>\n<pre><code>\/**\n\u00a0* The attributes that are mass assignable.\n\u00a0*\n\u00a0* @var array\n\u00a0*\/\nprotected $fillable = [\n\u00a0\u00a0\u00a0\u00a0'name', 'email', 'password', 'provider', 'provider_id'\n];<\/code><\/pre>\n<h3>Obtener credenciales de Twitter<\/h3>\n<p>Como vamos a integrar el inicio de sesi\u00f3n de Twitter en Laravel, primero debe obtener sus credenciales de Twitter. Siga los pasos a continuaci\u00f3n para crear una aplicaci\u00f3n de Twitter y obtener sus credenciales.<\/p>\n<ul>\n<li>Inicie sesi\u00f3n en la <a href=\"https:\/\/dev.twitter.com\/apps\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cuenta de desarrollador de Twitter<\/a> y cree una nueva aplicaci\u00f3n.<\/li>\n<li>Complete todos los campos obligatorios, como el nombre y la descripci\u00f3n de la aplicaci\u00f3n.<\/li>\n<li>Agregue el dominio de su sitio web en el campo Sitio web.<\/li>\n<li>Establezca la URL de devoluci\u00f3n de llamada como <code>http:\/\/localhost:8000\/twitter\/callback<\/code>. Ajuste la URL seg\u00fan sus requisitos.<\/li>\n<li>Una vez que se haya registrado, copie y pegue las credenciales de la aplicaci\u00f3n creada (Clave de consumidor y Secreto) que requiera en alg\u00fan tiempo.<\/li>\n<\/ul>\n<p>Con estas credenciales copiadas, su aplicaci\u00f3n Laravel completar\u00e1 el flujo de OAuth cuando los usuarios inicien sesi\u00f3n con su cuenta de Twitter.<\/p>\n<h3>Crear rutas y controlador<\/h3>\n<p>Para incluir la funcionalidad de iniciar sesi\u00f3n con Twitter, necesitamos agregar un c\u00f3digo en nuestro proyecto Laravel. Creemos un <code>LoginController<\/code>usando el comando:<\/p>\n<pre><code>php artisan make:controller LoginController<\/code><\/pre>\n<p>Necesitamos agregar un enlace de inicio de sesi\u00f3n en el archivo Blade. Cree un <code>login.blade.php<\/code>y agr\u00e9guele el siguiente HTML.<\/p>\n<pre><code>&lt;a href=\"{{ url('\/login\/twitter') }}\" class=\"btn btn-success\"&gt;\n\u00a0\u00a0\u00a0\u00a0{{ __('Login with Twitter') }}\n&lt;\/a&gt;<\/code><\/pre>\n<p>Puede llamar a esta vista desde el <code>index<\/code>m\u00e9todo de <code>LoginController<\/code>.<\/p>\n<pre><code>\/**\n\u00a0* Call the view\n\u00a0*\/\npublic function index()\n{\n\u00a0\u00a0\u00a0\u00a0return view('login');\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, agregue la ruta para ello. Tambi\u00e9n estoy agregando algunas rutas m\u00e1s que ser\u00e1n necesarias para la siguiente parte del tutorial.<\/p>\n<pre><code>Route::get('login', 'LoginController@index');\nRoute::get('login\/{provider}', 'LoginController@redirectToProvider');\nRoute::get('{provider}\/callback', 'LoginController@handleProviderCallback');\nRoute::get('\/home', function() {\n\u00a0\u00a0\u00a0\u00a0return 'User is logged in';\n});<\/code><\/pre>\n<p>Despu\u00e9s de que el usuario inicie sesi\u00f3n con Twitter, lo redireccionar\u00e9 a la <code>home<\/code>ruta. Es solo para fines de demostraci\u00f3n. Deber\u00edas cambiar esta ruta por otra.<\/p>\n<h3>Iniciar sesi\u00f3n con Twitter en Laravel<\/h3>\n<p>Es hora de usar el paquete Socialite ahora. Con el siguiente comando, puede instalar el paquete Socialite en su proyecto Laravel.<\/p>\n<pre><code>composer require laravel\/socialite<\/code><\/pre>\n<p>Despu\u00e9s de instalar Socialite, necesitamos configurarlo. Abra <code>config\/services.php<\/code>y agregue la configuraci\u00f3n de Twitter a este archivo de la siguiente manera:<\/p>\n<pre><code>'twitter' =&gt; [\n\u00a0\u00a0\u00a0\u00a0'client_id' =&gt; env('TWITTER_API_KEY'),\n\u00a0\u00a0\u00a0\u00a0'client_secret' =&gt; env('TWITTER_API_SECRET_KEY'),\n\u00a0\u00a0\u00a0\u00a0'redirect' =&gt; env('TWITTER_CALLBACK_URL'),\n],<\/code><\/pre>\n<p>Puede notar que utilic\u00e9 el <code>env<\/code>m\u00e9todo para obtener los valores especificados. Significa que necesitamos definir estas constantes en el <code>.env<\/code>archivo.<\/p>\n<pre><code>TWITTER_API_KEY=PASTE_TWITTER_API_KEY\nTWITTER_API_SECRET_KEY=PASTE_TWITTER_API_SECRET_KEY\nTWITTER_CALLBACK_URL=http:\/\/localhost:8000\/twitter\/callback<\/code><\/pre>\n<p>Aseg\u00farese de reemplazar los marcadores de posici\u00f3n con sus claves API reales. A continuaci\u00f3n <code>LoginController<\/code>, estamos escribiendo una funci\u00f3n que redirige a un usuario a la p\u00e1gina de inicio de sesi\u00f3n de Twitter y, con la autorizaci\u00f3n correcta, iniciar\u00e1 la sesi\u00f3n del usuario.<\/p>\n<p><strong>LoginController.php<\/strong><\/p>\n<pre><code>&lt;?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Socialite;\nuse AppModelsUser;\nuse Auth;\n\u00a0\nclass LoginController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Where to redirect users after login.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @var string\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0protected $redirectTo = '\/home';\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Call the view\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function index()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return view('login');\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Redirect the user to the Twitter 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)-&gt;redirect();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Obtain the user information from Twitter.\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)-&gt;user();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = $this-&gt;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-&gt;redirectTo);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\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-&gt;id)-&gt;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 =&gt; $user-&gt;name,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email'\u00a0\u00a0\u00a0 =&gt; $user-&gt;email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider' =&gt; $provider,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider_id' =&gt; $user-&gt;id\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n<p>Dir\u00edgete a la p\u00e1gina de inicio de sesi\u00f3n y haz clic en el enlace &quot;Iniciar sesi\u00f3n con Twitter&quot;. Complete el proceso y debe iniciar sesi\u00f3n en el sistema usando Twitter. Tambi\u00e9n puede encontrar entradas de usuarios en la <code>users<\/code>tabla.<\/p>\n<p>Espero que pueda aprender sobre el inicio de sesi\u00f3n con Twitter en Laravel usando el paquete Socialite. Me gustar\u00eda escuchar sus pensamientos o sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/iniciar-sesion-con-linkedin-en-laravel-usando-laravel-socialite\/\" title=\"Iniciar sesi\u00f3n con LinkedIn en Laravel usando Laravel Socialite\">Iniciar sesi\u00f3n con LinkedIn en Laravel usando Laravel Socialite<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/inicio-de-sesion-de-google-en-laravel-usando-laravel-socialite\/\" title=\"Inicio de sesi\u00f3n de Google en Laravel usando Laravel Socialite\">Inicio de sesi\u00f3n de Google en Laravel usando Laravel Socialite<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este tutorial, estudiamos Iniciar sesi\u00f3n con Twitter en Laravel usando el paquete Laravel Socialite. El inicio de sesi\u00f3n social le ayuda a omitir todo<\/p>\n","protected":false},"author":1,"featured_media":20252,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[495],"tags":[849],"class_list":["post-29291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=29291"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/20252"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=29291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=29291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=29291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}