✅ 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

55

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