{"id":25703,"date":"2021-06-12T16:42:00","date_gmt":"2021-06-12T13:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25703"},"modified":"2021-10-17T20:18:57","modified_gmt":"2021-10-17T17:18:57","slug":"google-kirjautuminen-laravelissa-laravel-socialiten-avulla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/google-kirjautuminen-laravelissa-laravel-socialiten-avulla\/","title":{"rendered":"Google-kirjautuminen Laravelissa Laravel Socialiten avulla"},"content":{"rendered":"<p>\u00c4skett\u00e4in olen julkaissut artikkelin <a href=\"https:\/\/themewp.inform.click\/fi\/kirjaudu-sisaan-linkedinilla-laravelissa-laravel-socialiten-avulla\/\" title=\"Sis\u00e4\u00e4nkirjautuminen LinkedInill\u00e4 Laravel Socialiten avulla\" >Sis\u00e4\u00e4nkirjautuminen LinkedInill\u00e4 Laravel Socialiten avulla<\/a> ja yksi lukijoistamme kysyi Google Loginin integroimisesta Laraveliin. Google-sis\u00e4\u00e4nkirjautuminen on my\u00f6s yksi suosituimmista alustoista, joita k\u00e4ytet\u00e4\u00e4n sosiaaliseen sis\u00e4\u00e4nkirjautumiseen verkkosivustolla.<\/p>\n<p>Kun annat k\u00e4ytt\u00e4jien kirjautua sosiaalisen profiilinsa avulla verkkosivustollesi, ohitat heid\u00e4n s\u00e4hk\u00f6postinsa vahvistamisen. K\u00e4ytt\u00e4jiesi ei tarvitse seurata s\u00e4hk\u00f6postin aktivointiprosessia. Voimme luottaa sosiaalisiin sivustoihin, koska ne ovat jo vahvistaneet k\u00e4ytt\u00e4j\u00e4t alustallaan. Se antaa k\u00e4ytt\u00e4jillesi paremman k\u00e4ytt\u00f6kokemuksen, koska heid\u00e4n ei tarvitse muistaa kirjautumistietojaan verkkosivustollesi ja s\u00e4\u00e4st\u00e4\u00e4 sinua my\u00f6s lis\u00e4\u00e4m\u00e4st\u00e4 koodeja vahvistusvirtaan. Se on win-win-tilanne.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa tutkitaan askel askeleelta opasta Google-kirjautumisen lis\u00e4\u00e4misest\u00e4 Laraveliin Laravel Socialiten avulla. Laravel socialite hoitaa OAuth-virran sosiaalisen sis\u00e4\u00e4nkirjautumisen kulissien takana. T\u00e4m\u00e4 paketti nopeuttaa sosiaalisen kirjautumisen integrointia Laraveliin.<\/p>\n<p>T\u00e4ss\u00e4 opetusohjelmassa k\u00e4yt\u00e4n uutta Laravel-asennusta, joten suorita alla oleva komento, joka asentaa Laravelin sinulle:<\/p>\n<pre><code>composer create-project --prefer-dist laravel\/laravel googlelogin<\/code><\/pre>\n<p>Laravel-asennuksen j\u00e4lkeen luo tietokanta ja lis\u00e4\u00e4 tietokannan kirjautumistiedot <code>.env<\/code>tiedostoon. Kun lis\u00e4\u00e4mme sosiaalista sis\u00e4\u00e4nkirjautumista sovellukseen, lis\u00e4t\u00e4\u00e4n 2 saraketta k\u00e4ytt\u00e4j\u00e4n oletussiirtotiedostoon ja muokkaan sen koodia v\u00e4h\u00e4n.<\/p>\n<p>Avaa k\u00e4ytt\u00e4j\u00e4n siirtotiedosto ja lis\u00e4\u00e4 alla oleva koodi <code>up<\/code>menetelm\u00e4\u00e4n.<\/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>Yll\u00e4 olevaan koodiin olen lis\u00e4nnyt 2 saraketta <code>provider<\/code>ja <code>provider_id<\/code>jotka pit\u00e4v\u00e4t vastaavasti arvoja &#8217;google&#8217; ja k\u00e4ytt\u00e4j\u00e4n Google-profiilin id. Luo k\u00e4ytt\u00e4jien taulukko suorittamalla siirto-komento.<\/p>\n<pre><code>php artisan migrate<\/code><\/pre>\n<p>Sinun on my\u00f6s lis\u00e4tt\u00e4v\u00e4 n\u00e4m\u00e4 2 saraketta k\u00e4ytt\u00e4j\u00e4malliin.<\/p>\n<p><strong>app \/ 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>Luo Google-sovellus ja hanki kirjautumistietosi<\/h3>\n<p>Seuraavaksi meid\u00e4n on luotava projekti Google APIs -konsoliin. Tarvitsemme sovelluksen asiakastunnuksen ja asiakassalaisuuden OAuth-prosessin suorittamiseksi k\u00e4ytt\u00e4jille.<\/p>\n<p>Seuraa alla olevia ohjeita Google-projektin luomiseksi ja hanki kirjautumistiedot. Opetuksen vuoksi k\u00e4yt\u00e4n paikallisen palvelimen URL-osoitetta. Voit s\u00e4\u00e4t\u00e4\u00e4 t\u00e4t\u00e4 URL-osoitetta vaatimuksesi mukaan.<\/p>\n<ul>\n<li>Siirry <a href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google Developer Consoleen<\/a>.<\/li>\n<li>Napsauta avattavaa valikkoa ja luo uusi projekti napsauttamalla (+) -merkki\u00e4. Vaihtoehtoisesti voit my\u00f6s valita olemassa olevan projektin.<\/li>\n<li>Valitse projektin hallintapaneelista Sivutiedot sivupalkista.<\/li>\n<li>Napsauta Tunnistetiedot-v\u00e4lilehden avattavaa Luo tunnistetiedot -valikkoa ja valitse OAuth-asiakastunnus.<\/li>\n<li>Valitse verkkosovellus sovellustyypist\u00e4. Kirjoita URL-osoite Valtuutetut uudelleenohjaus-URL-osoitteet -kohtaan <code>http:\/\/localhost:8000\/google\/callback<\/code>.<\/li>\n<\/ul>\n<p>Kun olet tallentanut sen, saat ponnahdusikkunan yhdess\u00e4 asiakastunnuksesi ja asiakassalaisuutesi kanssa. Kopioi n\u00e4m\u00e4 avaimet, joita tarvitsemme hetkess\u00e4.<\/p>\n<h3>Luo reitit ja ohjain<\/h3>\n<p>Olet valmis API-avaimiesi kanssa. Nyt eteenp\u00e4in on luotava reitit, korttitiedosto ja ohjain. Luo a <code>LoginController<\/code>k\u00e4ytt\u00e4m\u00e4ll\u00e4 komentoa:<\/p>\n<pre><code>php artisan make:controller LoginController<\/code><\/pre>\n<p>T\u00e4m\u00e4n j\u00e4lkeen luo korttitiedosto nimelt\u00e4 <code>login.blade.php<\/code>ja lis\u00e4\u00e4 siihen alla oleva 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>Kutsu t\u00e4t\u00e4 n\u00e4kym\u00e4\u00e4 <code>index<\/code>metodista <code>LoginController<\/code>.<\/p>\n<pre><code>public function index()\n{\n\u00a0\u00a0\u00a0\u00a0return view('login');\n}<\/code><\/pre>\n<p>T\u00e4t\u00e4 n\u00e4kym\u00e4\u00e4 kutsutaan lis\u00e4\u00e4m\u00e4ll\u00e4 siihen reitti. Lis\u00e4t\u00e4\u00e4n viel\u00e4 muutama reitti, joka edellytt\u00e4\u00e4 opetusohjelman seuraavaa osaa.<\/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>Huomaa, ett\u00e4 lis\u00e4sin <code>home<\/code>reitin. Kun k\u00e4ytt\u00e4j\u00e4 kirjautuu Googleen, ohjaan h\u00e4net <code>home<\/code>reitille. Pid\u00e4n sit\u00e4 vain demotarkoituksiin. Sinun pit\u00e4isi vaihtaa t\u00e4m\u00e4 reitti joksikin muuksi.<\/p>\n<h3>Google-kirjautuminen Laravelissa Laravel Socialiten avulla<\/h3>\n<p>Toistaiseksi olemme suorittaneet sosiaalisen kirjautumisen edellytt\u00e4m\u00e4t perusasetukset. Nyt. on aika asentaa <a href=\"https:\/\/laravel.com\/docs\/master\/socialite\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Laravel Socialite<\/a> -kirjasto. Asenna se suorittamalla alla oleva komento terminaalissa.<\/p>\n<pre><code>composer require laravel\/socialite<\/code><\/pre>\n<p>Kun kirjasto on asennettu, avaa <code>config\/services.php<\/code>ja lis\u00e4\u00e4 Google-kokoonpano seuraavasti:<\/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>Kun k\u00e4ytimme <code>env<\/code>tapaa saada tunnistetiedot, meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 n\u00e4m\u00e4 tunnistetiedot <code>.env<\/code>tiedostoon.<\/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>Muista korvata paikkamerkit todellisilla arvoilla. Lopuksi meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 <code>LoginController.php<\/code>tiedostoon koodi, joka ohjaa k\u00e4ytt\u00e4j\u00e4n Google-kirjautumissivulle ja vastineeksi k\u00e4sittelee vastauksen. T\u00e4ss\u00e4 tiedostossa kirjoitamme toiminnon, joka ohjaa k\u00e4ytt\u00e4j\u00e4n Google-kirjautumissivulle ja onnistuneen valtuutuksen yhteydess\u00e4 se lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4n tiedot tietokantaan ja kirjaa k\u00e4ytt\u00e4j\u00e4n sis\u00e4\u00e4n.<\/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>Ohjaintiedostossamme tarkistamme, onko k\u00e4ytt\u00e4j\u00e4 <code>provider_id<\/code>jo olemassa vai ei. Jos se on olemassa, palauta nykyinen k\u00e4ytt\u00e4j\u00e4esiintym\u00e4 muuten lis\u00e4\u00e4 se k\u00e4ytt\u00e4j\u00e4taulukoon ja kirjaa k\u00e4ytt\u00e4j\u00e4 sis\u00e4\u00e4n.<\/p>\n<p>Toivon, ett\u00e4 sait tiet\u00e4\u00e4 Google Loginista Laravelissa Socialite-paketin avulla. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kirjaudu-sisaan-linkedinilla-laravelissa-laravel-socialiten-avulla\/\" title=\"Kirjaudu sis\u00e4\u00e4n LinkedInill\u00e4 Laravelissa Laravel Socialiten avulla\">Kirjaudu sis\u00e4\u00e4n LinkedInill\u00e4 Laravelissa Laravel Socialiten avulla<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kirjaudu-twitteriin-laravelissa-laravel-socialiten-avulla\/\" title=\"Kirjaudu Twitteriin Laravelissa Laravel Socialiten avulla\">Kirjaudu Twitteriin Laravelissa Laravel Socialiten avulla<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-google-oauth-kirjautuminen-verkkosivustoon-php-n-avulla\/\" title=\"Kuinka lis\u00e4t\u00e4 Google OAuth -kirjautuminen verkkosivustoon PHP: n avulla\">Kuinka lis\u00e4t\u00e4 Google OAuth -kirjautuminen verkkosivustoon PHP: n avulla<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 artikkelissa tutkitaan Google Loginia Laravelissa Laravel Socialiten avulla. Sosiaalisen kirjautumisen k\u00e4ytt\u00f6 antaa k\u00e4ytt\u00e4j\u00e4lle paremman k\u00e4ytt\u00f6kokemuksen<\/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":[499],"tags":[843],"class_list":["post-25703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=25703"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25703\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/20248"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=25703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=25703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=25703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}