{"id":26677,"date":"2021-04-27T14:06:00","date_gmt":"2021-04-27T11:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26677"},"modified":"2021-10-18T03:54:24","modified_gmt":"2021-10-18T00:54:24","slug":"system-logowania-spolecznosciowego-za-pomoca-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/system-logowania-spolecznosciowego-za-pomoca-laravel-socialite\/","title":{"rendered":"System logowania spo\u0142eczno\u015bciowego za pomoc\u0105 Laravel Socialite"},"content":{"rendered":"

\u0179r\u00f3d\u0142o<\/a>: Ten artyku\u0142 jest inspirowany tym postem Laravel Social Authentication with Socialite<\/a><\/p>\n

Czy chcesz wdro\u017cy\u0107 system logowania spo\u0142eczno\u015bciowego na swojej stronie Laravel? Zezwalaj\u0105c na logowanie spo\u0142eczno\u015bciowe, Twoi u\u017cytkownicy nie musz\u0105 rejestrowa\u0107 si\u0119 w Twojej witrynie. Oszcz\u0119dza nam to r\u00f3wnie\u017c wiele pracy, jak wys\u0142anie linku aktywacyjnego, weryfikacj\u0119 konta e-mail. W tym artykule dowiemy si\u0119, jak doda\u0107 system logowania spo\u0142eczno\u015bciowego za pomoc\u0105 spo\u0142eczno\u015bci Laravel.<\/p>\n

<\/a>Biblioteka Laravel Socialite<\/a> zapewnia uwierzytelnianie OAuth za pomoc\u0105 Facebooka, Twittera, Google, LinkedIn, GitHub i Bitbucket. To, co musimy zrobi\u0107, to zainstalowa\u0107 t\u0119 bibliotek\u0119 na naszej stronie Laravel, skonfigurowa\u0107 j\u0105, pobra\u0107 klucze API ze strony spo\u0142eczno\u015bciowej i gotowe.<\/p>\n

\"System<\/a><\/p>\n

Utw\u00f3rz tabel\u0119 u\u017cytkownik\u00f3w<\/h3>\n

Aby wdro\u017cy\u0107 system logowania spo\u0142eczno\u015bciowego, musimy stworzy\u0107 tabel\u0119 u\u017cytkownik\u00f3w, w kt\u00f3rej b\u0119d\u0105 przechowywane dane podane przez serwis spo\u0142eczno\u015bciowy.<\/p>\n

Je\u015bli masz now\u0105 instalacj\u0119 Laravela, otw\u00f3rz narz\u0119dzie wiersza polece\u0144 w katalogu g\u0142\u00f3wnym projektu i uruchom polecenie php artisan make:auth<\/code>. To polecenie utworzy kontrolery uwierzytelniania, takie jak LoginController, RegisterController itp., kt\u00f3re znajduj\u0105 si\u0119 w katalogu app\/Http\/Controllers\/Auth. Tworzy r\u00f3wnie\u017c widoki login.blade.php, register.blade.php w katalogu resources\/view\/auth.<\/p>\n

Nast\u0119pnie otw\u00f3rz tabel\u0119 migracji dla u\u017cytkownik\u00f3w. Zmodyfikujemy t\u0119 domy\u015bln\u0105 migracj\u0119 i dodamy dwie dodatkowe kolumny o nazwie provider i provider_id.<\/p>\n

public function up()\n{\n\u00a0\u00a0\u00a0\u00a0Schema::create('users', function (Blueprint $table) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->increments('id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('name');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('email')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('password')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider_id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->rememberToken();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->timestamps();\n\u00a0\u00a0\u00a0\u00a0});\n}<\/code><\/pre>\n
Jak wida\u0107, ustawili\u015bmy kolumny e-mail i has\u0142a na warto\u015b\u0107 zerow\u0105. Dlaczego? Kiedy u\u017cywamy uwierzytelniania logowania spo\u0142eczno\u015bciowego, nie ma gwarancji, \u017ce otrzymamy identyfikator e-mail u\u017cytkownika. W takim przypadku r\u00f3wnie\u017c has\u0142o nie jest potrzebne. Dlatego zachowujemy adres e-mail i has\u0142o do warto\u015bci nullable. Dostawca kolumny b\u0119dzie przechowywa\u0107 nazw\u0119 serwisu spo\u0142eczno\u015bciowego, tak\u0105 jak facebook, twitter itp. Kolumna provider_id b\u0119dzie przechowywa\u0107 identyfikator spo\u0142eczno\u015bciowy u\u017cytkownika odpowiedniego do serwisu spo\u0142eczno\u015bciowego.<\/p>\n
Po zmodyfikowaniu migracji u\u017cytkownika jak powy\u017cej uruchom polecenie php artisan migrate<\/code>. W Twojej bazie danych zostanie utworzona tabela o nazwie \u201eu\u017cytkownicy".<\/p>\n
Prawdopodobnie podczas uruchamiania polecenia migracji pojawi si\u0119 jaki\u015b dziwny b\u0142\u0105d zwi\u0105zany z d\u0142ugo\u015bci\u0105 znak\u00f3w. Je\u015bli tak, otw\u00f3rz plik AppServiceProvider.php z katalogu app\/Providers. W tym pliku musimy ustawi\u0107 domy\u015bln\u0105 d\u0142ugo\u015b\u0107 ci\u0105gu dla kolumn tabeli bazy danych.<\/p>\n
Plik AppServiceProvider.php<\/p>\n
<?php\n\u00a0\nnamespace AppProviders;\n\u00a0\nuse IlluminateSupportServiceProvider;\nuse IlluminateSupportFacadesSchema;\n\u00a0\nclass AppServiceProvider extends ServiceProvider\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Bootstrap any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function boot()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Schema::defaultStringLength(255);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Register any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function register()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Model u\u017cytkownika<\/h3>\n
Domy\u015blnie Laravel zawiera model AppUser Eloquent w katalogu aplikacji. Otw\u00f3rz User.php z folderu aplikacji. Dodaj jeszcze dwie kolumny provider, provider_id do zmiennej $fillable.<\/p>\n
protected $fillable = [\n\u00a0\u00a0\u00a0\u00a0'name', 'email', 'password', 'provider', 'provider_id',\n];<\/code><\/pre>\n
Zainstaluj i skonfiguruj Laravel Socialite<\/h3>\n
Aby zainstalowa\u0107 t\u0119 bibliotek\u0119, powiniene\u015b mie\u0107 zainstalowany program composer<\/a> w swoim systemie.<\/p>\n
W swoim narz\u0119dziu wiersza polece\u0144 uruchom poni\u017csze polecenie.<\/p>\n
composer require laravel\/socialite<\/code><\/p>\n
Po zainstalowaniu biblioteki zarejestruj LaravelSocialiteSocialiteServiceProvider w swoim pliku konfiguracyjnym config\/app.php.<\/p>\n
'providers' => [\n\u00a0\u00a0\u00a0\u00a0\/\/ Other service providers...\n\u00a0\n\u00a0\u00a0\u00a0\u00a0LaravelSocialiteSocialiteServiceProvider::class,\n],<\/code><\/pre>\n
W tym samym pliku config\/app.php, pod tablic\u0105 alias\u00f3w, dodaj fasad\u0119 Socialite.<\/p>\n
'Socialite' => LaravelSocialiteFacadesSocialite::class,<\/code><\/pre>\n
Teraz nadszed\u0142 czas, aby zarejestrowa\u0107 swoj\u0105 aplikacj\u0119 w serwisie spo\u0142eczno\u015bciowym. Na przyk\u0142ad zak\u0142adamy, \u017ce chcesz zaimplementowa\u0107 uwierzytelnianie logowania na Facebooku. Wi\u0119c \u015bmia\u0142o stw\u00f3rz aplikacj\u0119 na Facebooku<\/a>.<\/p>\n
Gdy b\u0119dziesz gotowy z identyfikatorem aplikacji, sekretem aplikacji na Facebooku, otw\u00f3rz plik config\/services.php i dodaj do niego poni\u017cszy kod.<\/p>\n
'facebook' => [\n\u00a0\u00a0\u00a0\u00a0'client_id' => env('FB_APP_ID'),\n\u00a0\u00a0\u00a0\u00a0'client_secret' => env('FB_APP_SECRET'),\n\u00a0\u00a0\u00a0\u00a0'redirect' => env('FB_CALLBACK_URL'),\n],<\/code><\/pre>\n
Jak pokazano w powy\u017cszym kodzie, musimy przechowywa\u0107 szczeg\u00f3\u0142y naszej aplikacji i adres URL wywo\u0142ania zwrotnego w pliku .env.<\/p>\n
FB_APP_ID=PASTE_APP_ID_HERE\nFB_APP_SECRET=PASTE_APP_SECRET_HERE\nFB_CALLBACK_URL=YOU_SITE_URL\/login\/facebook\/callback<\/code><\/pre>\n
Przekazali\u015bmy adres URL wywo\u0142ania zwrotnego jako YOU_SITE_URL\/login\/facebook\/callback. Teraz nadszed\u0142 czas, aby utworzy\u0107 dwie trasy, jedn\u0105 do przekierowania u\u017cytkownika do dostawcy OAuth (w naszym przypadku Facebook) i drug\u0105 do odbierania wywo\u0142ania zwrotnego od dostawcy po uwierzytelnieniu.<\/p>\n
Rzeczywisty kod do obs\u0142ugi OAuth<\/h3>\n
Na tym etapie zako\u0144czyli\u015bmy ca\u0142\u0105 konfiguracj\u0119 Laravel Socialite. Czas napisa\u0107 kod, kt\u00f3ry obs\u0142uguje przekierowanie OAuth i pobiera dane u\u017cytkownika.<\/p>\n
Otw\u00f3rz plik login.blade.php i umie\u015b\u0107 w nim poni\u017cszy kod prawdopodobnie po przycisku przesy\u0142ania.<\/p>\n
<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-6 col-md-offset-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Login with\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/facebook') }}\"><i class=\"fa fa-facebook-official\" aria-hidden=\"true\"><\/i> Facebook<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/twitter') }}\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i> Twitter<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/github') }}\"><i class=\"fa fa-github\" aria-hidden=\"true\"><\/i> Github<\/a>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Tutaj dodajemy link do Github i Twittera. Kroki dodawania OAuth dla tych serwis\u00f3w spo\u0142eczno\u015bciowych s\u0105 takie same jak na Facebooku. Wystarczy utworzy\u0107 aplikacj\u0119 odpowiednich serwis\u00f3w spo\u0142eczno\u015bciowych i przechowywa\u0107 te dane w taki sam spos\u00f3b, jak dodali\u015bmy na Facebooku.<\/p>\n
W pliku trasy zdefiniuj trasy jak poni\u017cej.<\/p>\n
Route::get('login\/{provider}', 'AuthLoginController@redirectToProvider');\nRoute::get('login\/{provider}\/callback', 'AuthLoginController@handleProviderCallback');<\/code><\/pre>\n
Nast\u0119pnie przejd\u017a do app\/Http\/Controllers\/Auth\/LoginController.php i zmodyfikuj plik. Powiniene\u015b doda\u0107 w nim poni\u017cszy kod.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllersAuth;\n\u00a0\nuse AppHttpControllersController;\nuse IlluminateFoundationAuthAuthenticatesUsers;\nuse Socialite;\nuse AppUser;\nuse Auth;\n\u00a0\nclass LoginController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Redirect the user to the GitHub 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)->scopes(['email'])->redirect();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Obtain the user information from GitHub.\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)->user();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = $this->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->redirectTo);\n\u00a0\u00a0\u00a0\u00a0}\n\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->id)->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 => $user->name,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email'\u00a0\u00a0\u00a0 => $user->email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider' => $provider,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider_id' => $user->id\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Metoda redirectToProvider przekierowuje u\u017cytkownika do strony logowania serwisu spo\u0142eczno\u015bciowego. Gdy u\u017cytkownik autoryzuje aplikacj\u0119, pobieramy informacje o u\u017cytkowniku w funkcji handleProviderCallback. Je\u017celi u\u017cytkownik nie istnieje w naszym systemie to dodajemy jego dane za pomoc\u0105 metody findOrCreateUser.<\/p>\n
Mamy nadziej\u0119, \u017ce pozna\u0142e\u015b system logowania spo\u0142eczno\u015bciowego przy u\u017cyciu Laravel Socialite. Je\u015bli masz jakie\u015b pytania lub sugestie, zostaw komentarz poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n