{"id":23336,"date":"2021-04-27T13:25:00","date_gmt":"2021-04-27T10:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23336"},"modified":"2021-10-18T02:50:53","modified_gmt":"2021-10-17T23:50:53","slug":"social-login-system-mit-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/social-login-system-mit-laravel-socialite\/","title":{"rendered":"Social Login-System mit Laravel Socialite"},"content":{"rendered":"

Credit: Dieser Artikel wurde von diesem Beitrag inspiriert Laravel Social Authentication with Socialite<\/a><\/p>\n

M\u00f6chten Sie ein Social-Login-System in Ihre Laravel-Website implementieren? Durch das Zulassen von Social Login m\u00fcssen sich Ihre Benutzer nicht auf Ihrer Website registrieren. Es erspart uns auch viel Arbeit wie das Senden eines Aktivierungslinks, die \u00dcberpr\u00fcfung des E-Mail-Kontos. In diesem Artikel untersuchen wir, wie Sie mit Laravel socialite ein Social-Login-System hinzuf\u00fcgen.<\/p>\n

Die Laravel Socialite-<\/a> Bibliothek bietet OAuth-Authentifizierung mit Facebook, Twitter, Google, LinkedIn, GitHub und Bitbucket. Was wir tun m\u00fcssen, ist diese Bibliothek auf unserer Laravel-Website zu installieren, sie zu konfigurieren, API-Schl\u00fcssel von einer sozialen Website zu erhalten und wir k\u00f6nnen loslegen.<\/p>\n

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

Benutzertabelle erstellen<\/h3>\n

Um ein Social Login-System zu implementieren, m\u00fcssen wir eine Benutzertabelle erstellen, in der die von der Social Site bereitgestellten Details gespeichert werden.<\/p>\n

Wenn Sie eine Neuinstallation von Laravel haben, \u00f6ffnen Sie das Befehlszeilentool im Stammverzeichnis eines Projekts und f\u00fchren Sie den Befehl aus php artisan make:auth<\/code>. Dieser Befehl erstellt Authentifizierungscontroller wie LoginController, RegisterController usw., die sich im Verzeichnis app\/Http\/Controllers\/Auth befinden. Es erstellt auch eine Ansicht login.blade.php, register.blade.php im Verzeichnis resources\/view\/auth.<\/p>\n

\u00d6ffnen Sie als N\u00e4chstes die Tabelle Migration f\u00fcr Benutzer. Wir werden diese Standardmigration \u00e4ndern und zwei weitere Spalten namens provider und provider_id hinzuf\u00fcgen.<\/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
Wie Sie sehen, setzen wir die Spalten f\u00fcr E-Mail und Passwort auf nullable. Warum? Wenn wir Social Login-Authentifizierung verwenden, gibt es keine Garantie, eine E-Mail-ID eines Benutzers zu erhalten. Und das Passwort ist in diesem Fall auch nicht erforderlich. Also halten wir E-Mail und Passwort auf nullable. Der Spaltenanbieter speichert den Namen der sozialen Website wie Facebook, Twitter usw. Die Spalte provider_id speichert die soziale ID eines Benutzers in Bezug auf die soziale Website.<\/p>\n
Nachdem Sie Ihre Benutzermigration wie oben beschrieben ge\u00e4ndert haben, f\u00fchren Sie den Befehl aus php artisan migrate<\/code>. Es wird eine Tabelle namens ‚users‘ in Ihrer Datenbank erstellen.<\/p>\n
Wahrscheinlich werden Sie beim Ausf\u00fchren des Migrationsbefehls einen seltsamen Fehler im Zusammenhang mit der Zeichenl\u00e4nge erhalten. \u00d6ffnen Sie in diesem Fall die Datei AppServiceProvider.php aus dem Verzeichnis app\/Providers. In dieser Datei m\u00fcssen wir die Standardzeichenfolgenl\u00e4nge f\u00fcr die Spalten einer Datenbanktabelle festlegen.<\/p>\n
Datei 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
Benutzermodell<\/h3>\n
Standardm\u00e4\u00dfig enth\u00e4lt Laravel ein AppUser Eloquent-Modell in Ihrem App-Verzeichnis. \u00d6ffnen Sie die User.php aus dem App-Ordner. F\u00fcgen Sie der Variablen $fillable zwei weitere Spalten provider, provider_id, hinzu.<\/p>\n
protected $fillable = [\n\u00a0\u00a0\u00a0\u00a0'name', 'email', 'password', 'provider', 'provider_id',\n];<\/code><\/pre>\n
Laravel Socialite installieren und konfigurieren<\/h3>\n
Um diese Bibliothek zu installieren, sollte Composer<\/a> auf Ihrem System installiert sein.<\/p>\n
F\u00fchren Sie in Ihrem Befehlszeilentool den folgenden Befehl aus.<\/p>\n
composer require laravel\/socialite<\/code><\/p>\n
Registrieren Sie nach der Installation der Bibliothek LaravelSocialiteSocialiteServiceProvider in Ihrer Konfigurationsdatei 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
F\u00fcgen Sie in derselben Datei config\/app.php unter dem aliases-Array die Socialite-Fassade hinzu.<\/p>\n
'Socialite' => LaravelSocialiteFacadesSocialite::class,<\/code><\/pre>\n
Jetzt ist es an der Zeit, Ihre Anwendung auf einer sozialen Website zu registrieren. Wir gehen beispielsweise davon aus, dass Sie die Facebook-Login-Authentifizierung implementieren m\u00f6chten. Also mach weiter und erstelle eine Anwendung auf Facebook<\/a>.<\/p>\n
Sobald Sie mit der App-ID und dem App-Geheimnis Ihrer Facebook-Anwendung fertig sind, \u00f6ffnen Sie die Datei config\/services.php und f\u00fcgen Sie den folgenden Code hinzu.<\/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
Wie im obigen Code gezeigt, m\u00fcssen wir unsere Bewerbungsdetails und die R\u00fcckruf-URL in der .env-Datei speichern.<\/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
Wir haben die R\u00fcckruf-URL als YOU_SITE_URL\/login\/facebook\/callback \u00fcbergeben. Jetzt ist es an der Zeit, zwei Routen zu erstellen, eine zum Umleiten des Benutzers zum OAuth-Anbieter (in unserem Fall Facebook) und eine andere zum Empfangen des R\u00fcckrufs vom Anbieter nach der Authentifizierung.<\/p>\n
Tats\u00e4chlicher Code f\u00fcr den Umgang mit OAuth<\/h3>\n
Zu diesem Zeitpunkt sind wir mit allen Einstellungen f\u00fcr Laravel Socialite abgeschlossen. Es ist an der Zeit, Code zu schreiben, der die Umleitung von OAuth verarbeitet und Benutzerdetails abruft.<\/p>\n
\u00d6ffnen Sie Ihre Datei login.blade.php und f\u00fcgen Sie den folgenden Code wahrscheinlich nach dem Absenden-Button ein.<\/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
Hier f\u00fcgen wir einen Link f\u00fcr Github und Twitter hinzu. Die Schritte zum Hinzuf\u00fcgen von OAuth f\u00fcr diese sozialen Websites sind auch dieselben wie bei Facebook. Sie m\u00fcssen nur eine Anwendung der entsprechenden sozialen Websites erstellen und diese Details auf die gleiche Weise speichern, wie wir sie f\u00fcr Facebook hinzugef\u00fcgt haben.<\/p>\n
Definieren Sie in Ihrer Routendatei die Routen wie unten beschrieben.<\/p>\n
Route::get('login\/{provider}', 'AuthLoginController@redirectToProvider');\nRoute::get('login\/{provider}\/callback', 'AuthLoginController@handleProviderCallback');<\/code><\/pre>\n
Navigieren Sie als N\u00e4chstes zu app\/Http\/Controllers\/Auth\/LoginController.php und \u00e4ndern Sie die Datei. Sie sollten den folgenden Code hinzuf\u00fcgen.<\/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
Die Methode redirectToProvider leitet den Benutzer auf die Anmeldeseite einer sozialen Website um. Sobald der Benutzer die Anwendung autorisiert, holen wir die Benutzerinformationen in der Funktion handleProviderCallback ab. Wenn der Benutzer in unserem System nicht existiert, f\u00fcgen wir seine Daten mit der Methode findOrCreateUser hinzu.<\/p>\n
Wir hoffen, dass Sie das Social Login-System mit Laravel Socialite kennengelernt haben. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte unten einen Kommentar.<\/p>\n
Zum Thema passende Artikel<\/h4>\n