✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Zaloguj się przez Google w Laravel za pomocą Laravel Socialite

66

Niedawno opublikowałem artykuł Logowanie z LinkedIn przy użyciu Laravel Socialite i jeden z naszych czytelników zapytał o zintegrowanie logowania Google w Laravel. Logowanie przez Google jest również jedną z popularnych platform wykorzystywanych do logowania społecznościowego na stronie.

Gdy zezwalasz użytkownikom na logowanie się za pomocą ich profilu społecznościowego w Twojej witrynie, pomijasz proces weryfikacji ich adresu e-mail. Twoi użytkownicy nie muszą przechodzić procesu aktywacji przez e-mail. Możemy polegać na serwisach społecznościowych, które już zweryfikowały użytkowników na swojej platformie. Zapewnia to lepsze wrażenia użytkowników, ponieważ nie muszą oni zapamiętywać swoich danych logowania do Twojej witryny, a także oszczędza przed dodawaniem kodów w celu weryfikacji.. To sytuacja korzystna dla obu stron.

W tym artykule zapoznamy się krok po kroku z dodawaniem Google Login w Laravel za pomocą Laravel Socialite. Laravel socialite obsługuje przepływ OAuth dla logowania społecznościowego za kulisami. Ten pakiet przyspiesza proces integracji logowania społecznościowego na Laravelu.

W tym samouczku użyję świeżej instalacji Laravela, więc uruchom poniższe polecenie, które zainstaluje Laravela dla Ciebie:

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

Po zainstalowaniu Laravela utwórz bazę danych i dodaj swoje dane uwierzytelniające do bazy danych w .envpliku. Ponieważ dodajemy social login w aplikacji, dodam 2 dodatkowe kolumny do domyślnego pliku migracji użytkowników i trochę zmodyfikuję jego kod.

Otwórz plik migracji użytkownika i dodaj poniższy kod do upmetody.

/**  * Run the migrations.  *  * @return void  */ public function up() {     Schema::create('users', function (Blueprint $table) {         $table->bigIncrements('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();     }); }

W powyższym kodzie Dodałem 2 kolumny provideri provider_idktóra będzie posiadać wartości „google" i profilu Google identyfikator użytkownika odpowiednio. Utwórz tabelę „użytkownicy”, uruchamiając polecenie migracji.

php artisan migrate

Musisz również dodać te 2 kolumny do modelu użytkownika.

aplikacja/Użytkownik.php

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

Utwórz aplikację Google i zdobądź swoje poświadczenia

Następnie musimy stworzyć projekt w konsoli Google APIs. Aby ukończyć proces OAuth dla użytkowników, będziemy wymagać identyfikatora klienta i klucza klienta aplikacji.

Wykonaj poniższe czynności, aby utworzyć projekt Google i uzyskać poświadczenia. Ze względu na samouczek używam adresu URL serwera lokalnego. Możesz dostosować ten adres URL zgodnie z wymaganiami.

  • Przejdź do Konsoli programisty Google.
  • Kliknij na rozwijane menu i utwórz nowy projekt, klikając znak (+). Alternatywnie możesz również wybrać istniejący projekt.
  • Na pulpicie projektu wybierz Poświadczenia z paska bocznego.
  • Na karcie Poświadczenia kliknij menu rozwijane Utwórz poświadczenia i wybierz Identyfikator klienta OAuth.
  • Wybierz aplikację internetową z Typ aplikacji. W Autoryzowane adresy URL przekierowania wpisz adres URL http://localhost:8000/google/callback.

Po zapisaniu otrzymasz wyskakujące okienko wraz z identyfikatorem klienta i kluczem tajnym klienta. Skopiuj te klucze, których będziemy potrzebować za kilka chwil.

Twórz trasy i kontroler

Jesteś gotowy z kluczami API. Aby przejść dalej, musimy utworzyć trasy, plik ostrza i kontroler. Utwórz za LoginControllerpomocą polecenia:

php artisan make:controller LoginController

Następnie utwórz plik blade o nazwie login.blade.phpi dodaj do niego poniższy kod HTML.

<a href="{{ url('/login/google') }}">     {{ __('Login with Google') }} </a>

Nazwij ten widok z indexmetody LoginController.

public function index() {     return view('login'); }

Aby wywołać ten widok, musisz dodać do niego trasę. Dodajmy jeszcze kilka tras, które będą potrzebne w następnej części samouczka.

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'; });

Zauważ, że dodałem hometrasę. Gdy użytkownik zaloguje się w Google, przekieruję go na hometrasę. Zachowuję go tylko do celów demonstracyjnych. Powinieneś zmienić tę trasę na coś innego.

Zaloguj się przez Google w Laravel za pomocą Laravel Socialite

Jak dotąd skończyliśmy z podstawową konfiguracją wymaganą do logowania społecznościowego. Teraz. czas zainstalować bibliotekę Laravel Socialite. Zainstaluj go, uruchamiając poniższe polecenie w terminalu.

composer require laravel/socialite

Po zainstalowaniu biblioteki otwórz config/services.phpi dodaj konfigurację Google w następujący sposób:

'google' => [     'client_id'     => env('GOOGLE_CLIENT_ID'),     'client_secret' => env('GOOGLE_CLIENT_SECRET'),     'redirect'      => env('GOOGLE_REDIRECT_URL'), ],

Ponieważ użyliśmy envmetody, aby uzyskać poświadczenia, musimy dodać te poświadczenia w .envpliku.

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET GOOGLE_REDIRECT_URL=http://localhost:8000/google/callback

Pamiętaj, aby zastąpić symbole zastępcze rzeczywistymi wartościami. Na koniec musimy dodać w LoginController.phppliku kod, który przekierowuje użytkownika na stronę logowania Google iw zamian obsługuje odpowiedź. W tym pliku piszemy funkcję, która przekierowuje użytkownika na stronę logowania Google i po udanej autoryzacji wstawi dane użytkownika do bazy danych i zaloguje użytkownika.

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 Google authentication page.      *      * @return Response      */     public function redirectToProvider($provider)     {         return Socialite::driver($provider)->redirect();     }          /**      * Obtain the user information from Google.      *      * @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         ]);     } }

W naszym pliku kontrolera sprawdzamy, czy użytkownik z provider_idjuż istnieje, czy nie. Jeśli istnieje, zwróć bieżącą instancję użytkownika, w przeciwnym razie wstaw ją do tabeli użytkowników i zaloguj się.

Mam nadzieję, że dowiedziałeś się o Google Login w Laravel za pomocą pakietu Socialite. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów