{"id":29299,"date":"2021-06-12T17:17:00","date_gmt":"2021-06-12T14:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29299"},"modified":"2021-10-17T16:19:35","modified_gmt":"2021-10-17T13:19:35","slug":"inicio-de-sesion-de-google-en-laravel-usando-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/inicio-de-sesion-de-google-en-laravel-usando-laravel-socialite\/","title":{"rendered":"Inicio de sesi\u00f3n de Google en Laravel usando Laravel Socialite"},"content":{"rendered":"<p>Recientemente publiqu\u00e9 un art\u00edculo <a href=\"https:\/\/themewp.inform.click\/es\/iniciar-sesion-con-linkedin-en-laravel-usando-laravel-socialite\/\" title=\"Iniciar sesi\u00f3n con LinkedIn usando Laravel Socialite\" >Iniciar sesi\u00f3n con LinkedIn usando Laravel Socialite<\/a> y uno de nuestros lectores pregunt\u00f3 acerca de la integraci\u00f3n del inicio de sesi\u00f3n de Google en Laravel. El inicio de sesi\u00f3n de Google es tambi\u00e9n una de las plataformas populares que se utilizan para el inicio de sesi\u00f3n social en el sitio web.<\/p>\n<p>Cuando permite que los usuarios inicien sesi\u00f3n con su perfil social en su sitio web, omite el proceso de validaci\u00f3n de su correo electr\u00f3nico. Sus usuarios no necesitan seguir un proceso de activaci\u00f3n por correo electr\u00f3nico. Podemos confiar en los sitios sociales, ya que ya validaron a los usuarios en su plataforma. Brinda una mejor experiencia de usuario para sus usuarios, ya que no necesitan recordar sus credenciales de inicio de sesi\u00f3n para su sitio web y tambi\u00e9n le evita agregar los c\u00f3digos para el flujo de verificaci\u00f3n. Es una situaci\u00f3n en la que todos ganan.<\/p>\n<p>En este art\u00edculo, estudiamos la gu\u00eda paso a paso sobre c\u00f3mo agregar Google Login en Laravel usando Laravel Socialite. Laravel socialite maneja el flujo de OAuth para el inicio de sesi\u00f3n social detr\u00e1s de escena. Este paquete acelera el proceso de integraci\u00f3n del inicio de sesi\u00f3n social en Laravel.<\/p>\n<p>Para este tutorial, usar\u00e9 una nueva instalaci\u00f3n de Laravel, as\u00ed que ejecute el siguiente comando que instalar\u00e1 Laravel por usted:<\/p>\n<pre><code>composer create-project --prefer-dist laravel\/laravel googlelogin<\/code><\/pre>\n<p>Tras la instalaci\u00f3n de Laravel, cree una base de datos y agregue sus credenciales de base de datos en el <code>.env<\/code>archivo. A medida que agreguemos el inicio de sesi\u00f3n social en la aplicaci\u00f3n, agregar\u00e9 2 columnas m\u00e1s al archivo de migraci\u00f3n de usuario predeterminado y modificar\u00e9 un poco su c\u00f3digo.<\/p>\n<p>Abra el archivo de migraci\u00f3n de su usuario y agregue el siguiente c\u00f3digo al <code>up<\/code>m\u00e9todo.<\/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;bigIncrements('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>En el c\u00f3digo anterior he agregado 2 columnas <code>provider<\/code>y <code>provider_id<\/code>que contendr\u00e1n los valores &#8216;google&#8217; y la identificaci\u00f3n del perfil de Google del usuario respectivamente. Cree la tabla de &#8216;usuarios&#8217; ejecutando el comando migrate.<\/p>\n<pre><code>php artisan migrate<\/code><\/pre>\n<p>Tambi\u00e9n debe agregar estas 2 columnas 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>Cree una aplicaci\u00f3n de Google y obtenga sus credenciales<\/h3>\n<p>A continuaci\u00f3n, necesitamos crear un proyecto en la consola de API de Google. Requeriremos la identificaci\u00f3n del cliente y el secreto del cliente de la aplicaci\u00f3n para completar el proceso de OAuth para los usuarios.<\/p>\n<p>Siga los pasos a continuaci\u00f3n para crear un proyecto de Google y obtener las credenciales. Por el bien del tutorial, estoy usando la URL del servidor local. Puede ajustar esta URL seg\u00fan sus necesidades.<\/p>\n<ul>\n<li>Vaya a la <a href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Consola para desarrolladores de Google<\/a>.<\/li>\n<li>Haga clic en el men\u00fa desplegable y cree un nuevo proyecto haciendo clic en el signo (+). Alternativamente, tambi\u00e9n puede seleccionar el proyecto existente.<\/li>\n<li>En el panel del proyecto, seleccione Credenciales en la barra lateral.<\/li>\n<li>En la pesta\u00f1a Credenciales, haga clic en el men\u00fa desplegable Crear credenciales y seleccione ID de cliente OAuth.<\/li>\n<li>Seleccione la aplicaci\u00f3n web del tipo de aplicaci\u00f3n. En las URL de redireccionamiento autorizadas, ingrese la URL <code>http:\/\/localhost:8000\/google\/callback<\/code>.<\/li>\n<\/ul>\n<p>Una vez que lo guarde, aparecer\u00e1 la ventana emergente junto con su ID de cliente y el secreto del cliente. Copie estas claves que necesitaremos en unos momentos.<\/p>\n<h3>Crear rutas y controlador<\/h3>\n<p>Ya est\u00e1 listo con sus claves API. Ahora, para continuar, tenemos que crear rutas, archivo blade y controlador. Crea un <code>LoginController<\/code>usando el comando:<\/p>\n<pre><code>php artisan make:controller LoginController<\/code><\/pre>\n<p>Despu\u00e9s de esto, cree un archivo blade llamado <code>login.blade.php<\/code>y agregue el siguiente HTML.<\/p>\n<pre><code>&lt;a href=\"{{ url('\/login\/google') }}\"&gt;\n\u00a0\u00a0\u00a0\u00a0{{ __('Login with Google') }}\n&lt;\/a&gt;<\/code><\/pre>\n<p>Llame a esta vista desde el <code>index<\/code>m\u00e9todo de <code>LoginController<\/code>.<\/p>\n<pre><code>public function index()\n{\n\u00a0\u00a0\u00a0\u00a0return view('login');\n}<\/code><\/pre>\n<p>Para llamar a esta vista, debe agregarle una ruta. Agreguemos tambi\u00e9n 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>Observe que agregu\u00e9 una <code>home<\/code>ruta. Cuando un usuario inicie sesi\u00f3n con Google, lo redireccionar\u00e9 a la <code>home<\/code>ruta. Solo lo guardo para fines de demostraci\u00f3n. Deber\u00edas cambiar esta ruta por otra.<\/p>\n<h3>Inicio de sesi\u00f3n de Google en Laravel usando Laravel Socialite<\/h3>\n<p>Hasta ahora hemos terminado con la configuraci\u00f3n b\u00e1sica requerida para el inicio de sesi\u00f3n social. Ahora. es hora de instalar la biblioteca <a href=\"https:\/\/laravel.com\/docs\/master\/socialite\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Laravel Socialite<\/a>. Inst\u00e1lelo ejecutando el siguiente comando en la terminal.<\/p>\n<pre><code>composer require laravel\/socialite<\/code><\/pre>\n<p>Tras la instalaci\u00f3n de la biblioteca, abra <code>config\/services.php<\/code>y agregue la configuraci\u00f3n de Google de la siguiente manera:<\/p>\n<pre><code>'google' =&gt; [\n\u00a0\u00a0\u00a0\u00a0'client_id'\u00a0\u00a0\u00a0\u00a0 =&gt; env('GOOGLE_CLIENT_ID'),\n\u00a0\u00a0\u00a0\u00a0'client_secret' =&gt; env('GOOGLE_CLIENT_SECRET'),\n\u00a0\u00a0\u00a0\u00a0'redirect'\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; env('GOOGLE_REDIRECT_URL'),\n],<\/code><\/pre>\n<p>Como usamos el <code>env<\/code>m\u00e9todo para obtener las credenciales, necesitamos agregar estas credenciales en el <code>.env<\/code>archivo.<\/p>\n<pre><code>GOOGLE_CLIENT_ID=YOUR_CLIENT_ID\nGOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET\nGOOGLE_REDIRECT_URL=http:\/\/localhost:8000\/google\/callback<\/code><\/pre>\n<p>Aseg\u00farese de reemplazar los marcadores de posici\u00f3n con valores reales. Finalmente, necesitamos agregar c\u00f3digo en el <code>LoginController.php<\/code>archivo que redirige al usuario a la p\u00e1gina de inicio de sesi\u00f3n de Google y, a cambio, maneja la respuesta. En este archivo, estamos escribiendo una funci\u00f3n que redirige a un usuario a la p\u00e1gina de inicio de sesi\u00f3n de Google y, en caso de autorizaci\u00f3n exitosa, insertar\u00e1 los detalles del usuario en la base de datos e iniciar\u00e1 la sesi\u00f3n del usuario.<\/p>\n<p><strong>LoginController.php<\/strong><\/p>\n<pre><code>&lt;?php\n\u00a0\u00a0\nnamespace AppHttpControllers;\n\u00a0\u00a0\nuse IlluminateHttpRequest;\nuse Socialite;\nuse AppModelsUser;\nuse Auth;\n\u00a0\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 Google 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 Google.\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>En nuestro archivo de controlador, estamos verificando si el usuario con <code>provider_id<\/code>ya existe o no. Si existe, devuelva la instancia de usuario actual; de lo contrario, ins\u00e9rtela en la tabla de usuarios e inicie sesi\u00f3n con el usuario.<\/p>\n<p>Espero que conozcas el inicio de sesi\u00f3n de Google en Laravel usando el paquete Socialite. Me gustar\u00eda escuchar sus pensamientos y 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\/iniciar-sesion-con-twitter-en-laravel-usando-laravel-socialite\/\" title=\"Iniciar sesi\u00f3n con Twitter en Laravel usando Laravel Socialite\">Iniciar sesi\u00f3n con Twitter en Laravel usando Laravel Socialite<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-el-inicio-de-sesion-de-google-oauth-en-un-sitio-web-con-php\/\" title=\"C\u00f3mo agregar el inicio de sesi\u00f3n de Google OAuth en un sitio web con PHP\">C\u00f3mo agregar el inicio de sesi\u00f3n de Google OAuth en un sitio web con PHP<\/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 art\u00edculo, estudiamos el inicio de sesi\u00f3n de Google en Laravel usando Laravel Socialite. El uso de inicio de sesi\u00f3n social brinda una mejor experiencia de usuario al usuario final<\/p>\n","protected":false},"author":1,"featured_media":20248,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[495],"tags":[849],"class_list":["post-29299","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\/29299","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=29299"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/20248"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=29299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=29299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=29299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}