Authentifizierung mit Laravel 4

Eine Authentifizierung ist für praktisch jede Art von Webanwendung erforderlich. In diesem Tutorial möchte ich Ihnen zeigen, wie Sie mit Laravel 4 eine kleine Authentifizierung-App erstellen können, ein Hauptlayout erstellen, Benutzer registrieren, an- und abmelden und Routen durch Filter schützen. Wir müssen viel Code abdecken, also fangen wir an!

Installation

Beginnen wir dieses Tutorial, indem wir alles einrichten, was wir zum Erstellen unserer Authentifizierung-App benötigen. Wir müssen zuerst Laravel und alle seine Abhängigkeiten herunterladen und installieren. Wir werden auch den beliebten Twitter Bootstrap verwenden, um unsere App hübsch aussehen zu lassen. Dann nehmen wir ein bisschen Konfiguration vor, verbinden uns mit unserer Datenbank und erstellen die erforderliche Tabelle und starten schließlich unseren Server, um sicherzustellen, dass alles wie erwartet funktioniert.

Herunterladen

Lassen Sie uns Composer verwenden, um eine neue Laravel-Anwendung zu erstellen. Ich werde zuerst die Verzeichnisse in meinen Sites-Ordner ändern, da ich dort alle meine Apps am liebsten speichere:

1

cd Sites

Führen Sie dann den folgenden Befehl aus, um Laravel (ich habe meine App laravel-auth genannt) und alle ihre Abhängigkeiten herunterzuladen und zu installieren:

1

composer create-project laravel/laravel laravel-auth

Twitter Bootstrap hinzufügen

Um zu verhindern, dass unsere App das schreckliche und hässliche Schicksal erleidet, wirklich von Ihnen gestylt zu werden, werden wir den Twitter-Bootstrap in unsere composer.json-Datei aufnehmen:

1

{

2

	"name": "laravel/laravel",

3

	"description": "The Laravel Framework.",

4

	"keywords": ["framework", "laravel"],

5

	"require": {

6

		"laravel/framework": "4.0.*",

7

		"twitter/bootstrap": "*"

8

	},

9

10

	// The rest of your composer.json file below ....

... und dann können wir es installieren:

1

composer update

Wenn Sie nun Ihre App in Ihrem Texteditor öffnen, verwende ich Sublime, und wenn Sie im vendor-Ordner nachsehen, sehen Sie, dass wir hier den Twitter Bootstrap haben.

Jetzt besteht unser Twitter Bootstrap standardmäßig aus .less-Dateien und bevor wir sie in .CSS-Dateien kompilieren können, müssen wir alle Bootstrap-Abhängigkeiten installieren. Dadurch können wir auch das im Twitter-Bootstrap enthaltene Makefile für die Arbeit mit dem Framework (z. B. das Kompilieren von Dateien und das Ausführen von Tests) verwenden.

Ändern wir in Ihrem Terminal die Verzeichnisse in vendor/twitter/bootstrap und führen Sie npm install aus:

1

cd ~/Sites/laravel-auth/vendor/twitter/bootstrap

2

npm install

Wenn alles bereit ist, können wir jetzt das Makefile verwenden, um die .less-Dateien in CSS zu kompilieren. Lassen Sie uns den folgenden Befehl ausführen:

1

make bootstrap-css

Sie sollten jetzt feststellen, dass wir zwei neue Ordner in unserem vendor/twitter/bootstrap-Verzeichnis namens bootstrap/css haben, die unsere Bootstrap-CSS-Dateien enthalten.

Jetzt können wir die Bootstrap-CSS-Dateien später in unserem Layout verwenden, um unsere App zu stylen.

Aber wir haben ein Problem! Diese CSS-Dateien müssen öffentlich zugänglich sein, derzeit befinden sie sich in unserem vendor-Ordner. Aber das ist eine einfache Lösung! Wir können artisan verwenden, um sie in unseren public/packages-Ordner zu publish (zu verschieben), auf diese Weise können wir die erforderlichen CSS-Dateien in unser Hauptlayout-Template einbinden, das wir später erstellen werden.

Zuerst wechseln wir zurück in das Stammverzeichnis unserer Laravel-Anwendung und führen dann artisan aus, um die Dateien zu verschieben:

1

cd ~/Sites/laravel-auth

2

php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/css" bootstrap/css

Der artisan-Befehl asset:publish ermöglicht es uns, eine --path-Option bereitzustellen, für welche Dateien wir in unser public/packages-Verzeichnis verschieben möchten. In diesem Fall weisen wir es an, alle zuvor kompilierten CSS-Dateien zu veröffentlichen und sie in zwei neuen Ordnern namens bootstrap/css zu platzieren. Ihr public-Verzeichnis sollte jetzt wie im Screenshot unten aussehen, wobei unsere Twitter Bootstrap CSS-Dateien jetzt öffentlich zugänglich sind:

Berechtigungen festlegen

Als nächstes müssen wir sicherstellen, dass unser Webserver über die entsprechenden Berechtigungen zum Schreiben in unser Anwendungs-app/storage-Verzeichnis verfügt. Führen Sie in Ihrer App den folgenden Befehl aus:

1

chmod -R 755 app/storage

Verbinden Sie sich mit unserer Datenbank

Als Nächstes benötigen wir eine Datenbank, in der unsere Authentifizierungs-App unsere Benutzer speichern kann. Starten Sie also die Datenbank, mit der Sie sich wohler fühlen, persönlich bevorzuge ich MySQL zusammen mit PHPMyAdmin. Ich habe eine neue, leere Datenbank namens laravel-auth erstellt.

Verbinden wir nun diese Datenbank mit unserer Anwendung. Öffnen Sie unter app/config die database.php. Geben Sie Ihre entsprechenden Datenbankanmeldeinformationen ein, meine sind wie folgt:

1

// Default Database Connection Name

2

3

'default' => 'mysql',

4

5

// Database Connections

6

7

	'connections' => array(

8

9

		'mysql' => array(

10

			'driver'    => 'mysql',

11

			'host'      => '127.0.0.1',

12

			'database'  => 'laravel-auth',

13

			'username'  => 'root',

14

			'password'  => '',

15

			'charset'   => 'utf8',

16

			'collation' => 'utf8_unicode_ci',

17

			'prefix'    => '',

18

		),

19

20

		// the rest of your database.php file's code ...

Erstellen Sie die Benutzertabelle

Wenn unsere Datenbank erstellt ist, wird sie nicht sehr nützlich sein, es sei denn, wir haben eine Tabelle zum Speichern unserer Benutzer. Lassen Sie uns mit artisan eine neue Migrationsdatei mit dem Namen erstellen: create-users-table:

1

php artisan migrate:make create-users-table

Bearbeiten wir nun unsere neu erstellte Migrationsdatei, um unsere users-Tabelle mit dem Schema Builder zu erstellen. Wir beginnen mit der up()-Methode:

1

public function up()

2

{

3

	$table->increments('id');

4

	$table->string('firstname', 20);

5

	$table->string('lastname', 20);

6

	$table->string('email', 100)->unique();

7

	$table->string('password', 64);

8

	$table->timestamps();

9

}

Dadurch wird eine Tabelle mit dem Namen users erstellt, die ein id-Feld als Primärschlüssel, firstname- und  lastname-Felder, ein email-Feld, das erfordert, dass die E-Mail eindeutig ist, und schließlich ein Feld für das password (muss mindestens 64 Zeichen lang sein) Länge) sowie einige timestamps.

Jetzt müssen wir die Methode down() ausfüllen, falls wir unsere Migration rückgängig machen müssen, um die users-Tabelle zu löschen:

1

public function down()

2

{

3

	Schema::drop('users');

4

}

Und jetzt können wir die Migration ausführen, um unsere users-Tabelle zu erstellen:

1

php artisan migrate

Server starten und testen

Okay, unsere Authentifizierungsanwendung kommt gut voran. Wir haben einiges vorbereitet, starten wir unseren Server und sehen wir uns unsere App im Browser an:

1

php artisan serve

Super, der Server startet und wir sehen unsere Homepage:

Die App hübsch aussehen lassen

Bevor wir weitermachen, ist es an der Zeit, eine Hauptlayoutdatei zu erstellen, die den Twitter Bootstrap verwendet, um unserer Authentifizierungsanwendung ein wenig Stil zu verleihen!

Erstellen einer Hauptlayoutdatei

Erstellen Sie unter app/views/ einen neuen Ordner namens layouts und erstellen Sie darin eine neue Datei namens main.blade.php und platzieren wir sie in der folgenden grundlegenden HTML-Struktur:

1

<!DOCTYPE html>

2

<html lang="en">

3

  <head>

4

    <meta charset="utf-8">

5

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

6

7

    <title>Authentication App With Laravel 4</title>

8

  </head>

9

10

  <body>

11

12

  </body>

13

</html>

Einbinden der CSS-Dateien

Als nächstes müssen wir unsere Bootstrap-CSS-Datei sowie unsere eigene main-CSS-Datei in unserem head-Tag direkt unter unserem title verlinken:

1

	<head>

2

    	<meta charset="utf-8">

3

    	<meta name="viewport" content="width=device-width, initial-scale=1.0">

4

5

    	<title>Authentication App With Laravel 4</title>

6

    	{{ HTML::style('packages/bootstrap/css/bootstrap.min.css') }}

7

    	{{ HTML::style('css/main.css')}}

8

  	</head>

Jetzt müssen wir nur noch diese main.css-Datei erstellen, in der wir unser eigenes benutzerdefiniertes Styling für unsere App hinzufügen können. Erstellen Sie unter dem public Verzeichnis einen neuen Ordner namens css und erstellen Sie darin eine neue Datei namens main.css.

Fertigstellen des Hauptlayouts

Lassen Sie uns innerhalb unseres body-Tags ein kleines Navigationsmenü mit einigen Links zum Registrieren und Anmelden bei unserer Anwendung erstellen:

1

<body>

2

3

  	<div class="navbar navbar-fixed-top">

4

	  	<div class="navbar-inner">

5

	    	<div class="container">

6

				<ul class="nav">  

7

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

8

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

9

				</ul>  

10

	    	</div>

11

	  	</div>

12

	</div> 

13

14

</body>

Beachten Sie die Verwendung mehrerer Bootstrap-Klassen, um die Navigationsleiste entsprechend zu gestalten. Hier verwenden wir nur ein paar DIVs, um eine ungeordnete Liste von Navigationslinks zu umschließen, ziemlich einfach.

Für unsere Anwendung möchten wir unseren Benutzern einfache Flash-Meldungen geben, z. B. eine Erfolgsmeldung, wenn sich der Benutzer registriert. Wir setzen diese Flash-Nachricht von unserem Controller aus, aber wir werden den Wert der Nachricht hier in unserem Layout wiedergeben. Lassen Sie uns also ein weiteres div mit einer Klasse von .container erstellen und alle verfügbaren Flash-Nachrichten direkt nach unserer Navigationsleiste anzeigen:

1

<body>

2

3

  	<div class="navbar navbar-fixed-top">

4

	  	<div class="navbar-inner">

5

	    	<div class="container">

6

				<ul class="nav">  

7

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

8

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

9

				</ul>  

10

	    	</div>

11

	  	</div>

12

	</div> 

13

14

15

    <div class="container">

16

    	@if(Session::has('message'))

17

			<p class="alert">{{ Session::get('message') }}</p>

18

		@endif

19

    </div>

20

21

	</body>

Um die Flash-Nachricht anzuzeigen, habe ich zuerst eine Blade if-Anweisung verwendet, um zu überprüfen, ob wir eine Flash-Nachricht anzeigen müssen. Unsere Flash-Nachricht wird in der Session unter message verfügbar sein. Wir können also die Methode Session::has() verwenden, um nach dieser Nachricht zu suchen. Wenn dies als wahr ausgewertet wird, erstellen wir einen Absatz mit der Twitter-Bootstrap-Klasse alert und rufen die Session::get()-Methode auf, um den Wert der Nachricht anzuzeigen.

Lassen Sie uns nun, zumindest für unsere Layout-Datei, eine $content-Variable direkt nach unserer Flash-Nachricht ausgeben. Dadurch können wir unserem Controller mitteilen, dass er diese Layoutdatei verwenden soll, und unsere Ansichten werden anstelle dieser $content-Variablen direkt hier im Layout angezeigt:

1

<body>

2

3

  	<div class="navbar navbar-fixed-top">

4

	  	<div class="navbar-inner">

5

	    	<div class="container">

6

				<ul class="nav">  

7

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

8

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

9

				</ul>  

10

	    	</div>

11

	  	</div>

12

	</div> 

13

14

15

    <div class="container">

16

    	@if(Session::has('message'))

17

			<p class="alert">{{ Session::get('message') }}</p>

18

		@endif

19

20

		{{ $content }}

21

    </div>

22

23

	</body>

Benutzerdefiniertes Styling

Jetzt, da wir unser Layout fertig haben, müssen wir unserer main.css-Datei nur noch ein paar kleine benutzerdefinierte CSS-Regeln hinzufügen, um unser Layout ein wenig mehr anzupassen. Fahren Sie fort und fügen Sie das folgende CSS hinzu, es ist ziemlich selbsterklärend:

1

body {

2

	padding-top: 40px;

3

}

4

5

.form-signup, .form-signin {

6

	width: 400px;

7

	margin: 0 auto;

8

}

Ich habe nur eine kleine Menge Polsterung am oberen Rand des body-Tags hinzugefügt, um zu verhindern, dass unsere Navigationsleiste unseren Hauptinhalt überlappt. Dann ziele ich auf die Bootstrap-Klassen .form-signup und .form-signin ab, die wir auf unsere Registrierungs- und Anmeldeformulare anwenden, um deren Breite festzulegen und auf der Seite zu zentrieren.

Erstellen der Registrierungsseite

Es ist jetzt an der Zeit, den ersten Teil unserer Authentifizierungsanwendung zu erstellen, und das ist unsere Registrierungsseite.

Der Benutzer-Controller

Wir beginnen damit, einen neuen UsersController in unserem app/controllers-Ordner zu erstellen und darin unsere UsersController-Klasse zu definieren:

1

<?php

2

3

class UsersController extends BaseController {

4

5

}

6

?>

Als Nächstes teilen wir diesem Controller mit, dass er unser main.blade.php-Layout verwenden soll. Legen Sie oben in unserem Controller die Eigenschaft $layout fest:

1

<?php

2

3

class UsersController extends BaseController {

4

	protected $layout = "layouts.main";

5

}

6

?>

Nun benötigen wir in unserem UsersController eine Aktion für unsere Registrierungsseite. Ich habe meine Aktion getRegister genannt:

1

public function getRegister() {

2

	$this->layout->content = View::make('users.register');

3

}

Hier setzen wir einfach die content-Layout-Eigenschaft (das ist die $content-Variable, die wir in unserer Layout-Datei ausgegeben haben), um eine users.register-Ansichtsdatei anzuzeigen.

Die Benutzer-Controller-Routen

Wenn unser Controller als nächstes erstellt wird, müssen wir die Routen für alle Aktionen einrichten, die wir in unserem Controller erstellen können. In unserer app/routes.php-Datei entfernen wir zuerst die Standardeinstellung / route und fügen dann den folgenden Code hinzu, um unsere UsersController-Routen zu erstellen:

1

Route::controller('users', 'UsersController');

Jedes Mal, wenn wir eine neue Aktion erstellen, ist sie jetzt mit einem URI im folgenden Format verfügbar: /users/actionName. Zum Beispiel haben wir eine getRegister-Aktion, auf die wir mit dem folgenden URI zugreifen können: /users/register.

Erstellen der Registeransicht

Erstellen Sie innerhalb von app/views einen neuen Ordner namens users. Dies wird alle Ansichtsdateien unseres UsersController enthalten. Erstellen Sie im users-Ordner eine neue Datei namens register.blade.php und fügen Sie den folgenden Code darin ein:

1

{{ Form::open(array('url'=>'users/create', 'class'=>'form-signup')) }}

2

	<h2 class="form-signup-heading">Please Register</h2>

3

4

	<ul>

5

		@foreach($errors->all() as $error)

6

			<li>{{ $error }}</li>

7

		@endforeach

8

	</ul>

9

10

	{{ Form::text('firstname', null, array('class'=>'input-block-level', 'placeholder'=>'First Name')) }}

11

	{{ Form::text('lastname', null, array('class'=>'input-block-level', 'placeholder'=>'Last Name')) }}

12

	{{ Form::text('email', null, array('class'=>'input-block-level', 'placeholder'=>'Email Address')) }}

13

	{{ Form::password('password', array('class'=>'input-block-level', 'placeholder'=>'Password')) }}

14

	{{ Form::password('password_confirmation', array('class'=>'input-block-level', 'placeholder'=>'Confirm Password')) }}

15

16

	{{ Form::submit('Register', array('class'=>'btn btn-large btn-primary btn-block'))}}

17

{{ Form::close() }}

Hier verwenden wir die Form-Klasse, um unser Registrierungsformular zu erstellen. Zuerst rufen wir die Methode open() auf und übergeben ein Array von Optionen. Wir weisen das Formular an, an eine URI von users/create zu senden, indem wir den url-Schlüssel festlegen. Diese URI wird verwendet, um die Registrierung des Benutzers zu verarbeiten. Wir kümmern uns als nächstes darum. Nachdem wir die url gesetzt haben, geben wir dem Formular eine Klasse von form-signup.

Nach dem Öffnen des Formulars haben wir nur eine h2-Überschrift mit der Klasse .form-signup-heading.

Als Nächstes verwenden wir eine @foreach-Schleife, die alle Fehlermeldungen bei der Formularvalidierung durchläuft und jeden $error in der ungeordneten Liste anzeigt.

Nach den Fehlermeldungen bei der Formularvalidierung erstellen wir mehrere Formulareingabefelder, jedes mit einer Klasse von input-block-level und einem Platzhalterwert. Wir haben Eingaben für die Felder Vorname, Nachname, E-Mail, Passwort und Passwortbestätigung. Das zweite Argument der text()-Methode ist auf null gesetzt, da wir einen placeholder verwenden, müssen wir das value-Attribut der Eingabefelder nicht setzen, also setze ich es in diesem Fall einfach auf null.

Nach den Eingabefeldern erstellen wir dann unseren Senden-Button und wenden mehrere verschiedene Klassen darauf an, damit der Twitter-Bootstrap das Styling für uns übernimmt.

Zuletzt schließen wir das Formular einfach mit der Methode close().

Stellen Sie sicher, dass Sie Ihren Server starten, zu Ihrem bevorzugten Browser wechseln, und wenn wir zu http://localhost:8000/users/register navigieren, sollten Sie Ihre Registrierungsseite sehen:

Verarbeitung der Registrierungsformular-Übermittlung

Wenn Sie nun versucht haben, die Felder des Registrierungsformulars auszufüllen und auf die Schaltfläche Registrieren zu klicken, wurden Sie mit einer NotFoundHttpException begrüßt, und dies liegt daran, dass wir keine Route haben, die users/create URI erstellen, da wir keine Aktion haben, um die zu verarbeiten Formulareinreichung. Das ist also unser nächster Schritt!

Erstellen einer postCreate-Aktion

Lassen Sie uns in Ihrem UsersController eine weitere Aktion namens postCreate erstellen:

1

public function postCreate() {

2

3

}

Jetzt muss diese Aktion die Verarbeitung der Formularübermittlung verarbeiten, indem die Daten validiert und entweder Validierungsfehlermeldungen angezeigt werden, oder sie sollte den neuen Benutzer erstellen, das Kennwort des Benutzers hashen und den Benutzer in der Datenbank speichern.

Formularvalidierung

Beginnen wir mit der Validierung der Daten der Formularübermittlung. Wir müssen zuerst unsere Validierungsregeln erstellen, mit denen wir die Formulardaten validieren. Ich ziehe es vor, meine Validierungsregeln in meinem Modell zu speichern, da dies die Konvention ist, die ich von der Arbeit mit anderen Frameworks gewohnt bin. Standardmäßig wird Laravel mit einem bereits für Sie erstellten User.php-Modell ausgeliefert.

Öffnen Sie unter app/models die Datei User.php und fügen Sie oben den folgenden Code ein:

1

public static $rules = array(

2

	'firstname'=>'required|alpha|min:2',

3

	'lastname'=>'required|alpha|min:2',

4

	'email'=>'required|email|unique:users',

5

	'password'=>'required|alpha_num|between:6,12|confirmed',

6

	'password_confirmation'=>'required|alpha_num|between:6,12'

7

	);

Hier überprüfe ich die Felder firstname und lastname, um sicherzustellen, dass sie vorhanden sind, nur Alphazeichen enthalten und mindestens zwei Zeichen lang sind. Als Nächstes validiere ich das email-Feld, um sicherzustellen, dass es vorhanden ist, dass es eine gültige E-Mail-Adresse ist und dass es für die Benutzertabelle eindeutig ist, da wir keine doppelten E-Mail-Adressen für unsere Benutzer haben möchten. Zuletzt validiere ich die Felder password und password_confirmation. Ich stelle sicher, dass beide vorhanden sind, nur alphanumerische Zeichen enthalten und zwischen sechs und zwölf Zeichen lang sind. Beachten Sie außerdem die confirmed-Validierungsregel, die sicherstellt, dass das password-Feld genau mit dem übereinstimmenden Feld password_confirmation übereinstimmt, um sicherzustellen, dass die Benutzer das richtige Kennwort eingegeben haben.

Da wir nun unsere Validierungsregeln haben, können wir diese in unserem UsersController verwenden, um die Formularübermittlung zu validieren. Lassen Sie uns in der postCreate-Aktion Ihres UsersController zunächst prüfen, ob die Daten die Validierung bestehen, und fügen Sie den folgenden Code hinzu:

1

public function postCreate() {

2

	$validator = Validator::make(Input::all(), User::$rules);

3

4

	if ($validator->passes()) {

5

		// validation has passed, save user in DB

6

	} else {

7

		// validation has failed, display error messages	

8

	}

9

}

10

}

Wir beginnen damit, ein Validator-Objekt namens $validator zu erstellen, indem wir die Methode User::validate() aufrufen. Dies akzeptiert die beiden Argumente, die übermittelte Formulareingabe, die validiert werden soll, und die Validierungsregeln, gegen die die Daten validiert werden sollen. Wir können die übermittelten Formulardaten abrufen, indem wir die Methode Input::all() aufrufen und diese als erstes Argument übergeben. Wir können unsere Validierungsregeln, die wir in unserem User-Modell erstellt haben, abrufen, indem wir auf die statische Eigenschaft User::$rules zugreifen und diese als zweites Argument übergeben.

Nachdem wir unser Validator-Objekt erstellt haben, rufen wir seine Methode passes() auf. Dies gibt entweder true oder false zurück und wir verwenden dies in einer if-Anweisung, um zu überprüfen, ob unsere Daten die Validierung bestanden haben.

Fügen Sie in unserer if-Anweisung den folgenden Code hinzu, wenn die Validierung erfolgreich war:

1

if ($validator->passes()) {

2

	$user = new User;

3

	$user->firstname = Input::get('firstname');

4

	$user->lastname = Input::get('lastname');

5

	$user->email = Input::get('email');

6

	$user->password = Hash::make(Input::get('password'));

7

	$user->save();

8

9

	return Redirect::to('users/login')->with('message', 'Thanks for registering!');

10

} else {

11

	// validation has failed, display error messages	

12

}

Solange die vom Benutzer übermittelten Daten die Validierung bestanden haben, erstellen wir eine neue Instanz unseres Benutzermodells: new User; speichern in einer $user-Variablen. Wir können dann das $user-Objekt verwenden und jede der Eigenschaften des Benutzers mithilfe der übermittelten Formulardaten festlegen. Wir können die übermittelten Daten einzeln mit der Methode Input::get('fieldName') abrufen. Dabei ist fieldName der Wert des Felds, das Sie abrufen möchten. Hier haben wir die Felder Vorname, Nachname und E-Mail erfasst, um sie für unseren neuen Benutzer zu verwenden. Wir haben auch den Wert des Passwort-Felds übernommen, aber wir wollen das Passwort nicht nur als Klartext in der Datenbank speichern, also verwenden wir die Hash::make()-Methode, um das übermittelte Passwort für uns zu hashen, bevor wir es speichern. Zuletzt speichern wir den Benutzer in der Datenbank, indem wir die save()-Methode des $user-Objekts aufrufen.

Nachdem wir den neuen Benutzer erstellt haben, leiten wir den Benutzer mit der Methode Redirect::to() auf die Anmeldeseite um (wir erstellen die Anmeldeseite in wenigen Augenblicken). Dies nimmt nur den URI auf, zu dem Sie umleiten möchten. Wir verketten auch den Methodenaufruf with(), um dem Benutzer eine Flash-Nachricht zu geben, die ihn darüber informiert, dass seine Registrierung erfolgreich war.

Wenn die Validierung nicht bestanden wird, müssen wir die Registrierungsseite zusammen mit einigen Validierungsfehlermeldungen mit der alten Eingabe erneut anzeigen, damit der Benutzer seine Fehler korrigieren kann. Fügen Sie in Ihrer else-Anweisung den folgenden Code ein:

1

if ($validator->passes()) {

2

	$user = new User;

3

	$user->firstname = Input::get('firstname');

4

	$user->lastname = Input::get('lastname');

5

	$user->email = Input::get('email');

6

	$user->password = Hash::make(Input::get('password'));

7

	$user->save();

8

9

	return Redirect::to('users/login')->with('message', 'Thanks for registering!');

10

} else {

11

	return Redirect::to('users/register')->with('message', 'The following errors occurred')->withErrors($validator)->withInput();

12

}

Hier leiten wir den Benutzer einfach zurück zur Registrierungsseite mit einer Flash-Nachricht, die ihn über aufgetretene Fehler informiert. Wir stellen sicher, dass die Validierungsfehlermeldungen angezeigt werden, indem wir die Methode withErrors($validator) aufrufen und ihr unser $validator-Objekt übergeben. Schließlich rufen wir die Methode withInput() auf, damit sich das Formular merkt, was der Benutzer ursprünglich eingegeben hat, und es dem Benutzer leicht macht, die Fehler zu korrigieren.

Hinzufügen des CSRF vor dem Filter

Jetzt müssen wir sicherstellen, dass unsere POST-Aktionen vor CSRF-Angriffen geschützt sind, indem wir den CSRF-Vorfilter in der Konstruktormethode unseres UsersController festlegen. Fügen Sie oben in Ihrem UsersController den folgenden Code ein:

1

public function __construct() {

2

	$this->beforeFilter('csrf', array('on'=>'post'));

3

}

In unserem Konstruktor rufen wir die Methode beforeFilter() auf und übergeben den String csrf als erstes Argument. csrf ist der Filter, den wir auf unsere Aktionen anwenden möchten. Dann übergeben wir ein Array als zweites Argument und weisen es an, diesen Filter nur auf POST-Anfragen anzuwenden. Auf diese Weise übergeben unsere Formulare bei jeder Übermittlung einen CSRF-Token. Dieser CSRF-Vorfilter stellt sicher, dass alle POST-Anfragen an unsere App dieses Token enthalten, und gibt uns die Gewissheit, dass keine POST-Anfragen von anderen externen Quellen an unsere Anwendung gesendet werden.

Erstellen der Anmeldeseite

Bevor Sie loslaufen und Ihre Registrierungsseite ausprobieren, müssen wir zuerst die Login-Seite erstellen, damit wir bei erfolgreicher Übermittlung unseres Registrierungsformulars keine Fehlermeldung erhalten. Denken Sie daran, dass wir den Benutzer speichern, wenn die Formularvalidierung erfolgreich ist, und ihn auf die Anmeldeseite umleiten. Derzeit haben wir diese Login-Seite jedoch nicht, also erstellen wir sie!

Erstellen Sie noch in Ihrem UsersController eine neue Aktion namens getLogin und fügen Sie den folgenden Code ein:

1

public function getLogin() {

2

	$this->layout->content = View::make('users.login');

3

}

Dadurch wird eine users.login-Ansichtsdatei angezeigt. Wir müssen nun diese Ansichtsdatei erstellen. Erstellen Sie unter app/views/users eine neue Datei namens login.blade.php und fügen Sie den folgenden Code hinzu:

1

{{ Form::open(array('url'=>'users/signin', 'class'=>'form-signin')) }}

2

	<h2 class="form-signin-heading">Please Login</h2>

3

4

	{{ Form::text('email', null, array('class'=>'input-block-level', 'placeholder'=>'Email Address')) }}

5

	{{ Form::password('password', array('class'=>'input-block-level', 'placeholder'=>'Password')) }}

6

7

	{{ Form::submit('Login', array('class'=>'btn btn-large btn-primary btn-block'))}}

8

{{ Form::close() }}

Dieser Code ist dem Code, den wir in unserer register-Ansicht verwendet haben, sehr ähnlich, daher werde ich die Erklärung dieses Mal auf die Unterschiede vereinfachen. Für dieses Formular haben wir es an einen users/signin-URI senden und die Klasse des Formulars in .form-signin geändert. Der h2 wurde geändert, um "Bitte einloggen" zu sagen und seine Klasse wurde auch in .form-signin-heading geändert. Als nächstes haben wir zwei Formularfelder, in die der Benutzer seine E-Mail-Adresse und sein Passwort eingeben kann, und schließlich unseren Senden-Button, der nur "Anmelden" sagt.

Lassen Sie uns einen neuen Benutzer registrieren!

Wir sind endlich an einem Punkt, an dem wir unser Anmeldeformular ausprobieren können. Natürlich funktioniert die Login-Funktionalität noch nicht, aber dazu kommen wir noch. Wir brauchten nur die Login-Seite, damit unsere Registrierungsseite richtig funktioniert. Stellen Sie sicher, dass Ihr Server noch läuft, wechseln Sie in Ihren Browser und besuchen Sie http://localhost:8000/users/register. Versuchen Sie, einige ungültige Benutzerdaten einzugeben, um die Fehlermeldungen bei der Formularvalidierung zu testen. So sieht meine Seite mit einem ungültigen Benutzer aus:

Versuchen Sie nun, sich mit gültigen Benutzerdaten zu registrieren. Diesmal werden wir zusammen mit unserer Erfolgsmeldung auf unsere Login-Seite weitergeleitet, ausgezeichnet!

Einloggen

Wir haben also erfolgreich einen neuen Benutzer registriert und haben eine Login-Seite, aber wir können uns immer noch nicht einloggen. Wir müssen nun die postSignin-Aktion für unsere users/signin-URI erstellen, an die unser Anmeldeformular übermittelt wird. Gehen wir zurück zu unserem UsersController und erstellen eine neue Aktion namens postSignin:

1

public function postSignin() {

2

3

}

Lassen Sie uns nun den Benutzer mit den übermittelten Daten aus dem Login-Formular einloggen. Fügen Sie Ihrer postSignin()-Aktion den folgenden Code hinzu:

1

if (Auth::attempt(array('email'=>Input::get('email'), 'password'=>Input::get('password')))) {

2

	return Redirect::to('users/dashboard')->with('message', 'You are now logged in!');

3

} else {

4

	return Redirect::to('users/login')

5

		->with('message', 'Your username/password combination was incorrect')

6

		->withInput();

7

}

Hier versuchen wir, den Benutzer mit der Methode Auth::attempt() anzumelden. Wir übergeben einfach ein Array, das die E-Mail-Adresse und das Passwort des Benutzers enthält, die er über das Anmeldeformular übermittelt hat. Diese Methode gibt entweder true oder false zurück, wenn die Anmeldeinformationen des Benutzers validiert werden. Wir können diese Methode attempt() also innerhalb einer if-Anweisung verwenden. Wenn der Benutzer angemeldet war, leiten wir ihn einfach auf eine dashboard-Ansichtsseite um und geben ihm eine Erfolgsmeldung. Andernfalls wurden die Anmeldeinformationen des Benutzers nicht validiert und in diesem Fall leiten wir ihn mit einer Fehlermeldung zurück zur Anmeldeseite und zeigen die alte Eingabe an, damit der Benutzer es erneut versuchen kann.

Erstellen des Dashboards

Bevor Sie nun versuchen, sich mit Ihrem neu registrierten Benutzer anzumelden, müssen wir diese Dashboard-Seite erstellen und sie vor nicht autorisierten, nicht angemeldeten Benutzern schützen. Die Dashboard-Seite sollte nur für diejenigen Benutzer zugänglich sein, die sich bei unserer Anwendung registriert und angemeldet haben. Andernfalls, wenn ein nicht autorisierter Benutzer versucht, das Dashboard zu besuchen, leiten wir ihn um und bitten ihn, sich zuerst anzumelden.

Während wir uns noch in Ihrem UsersController befinden, erstellen wir eine neue Aktion namens getDashboard:

1

public function getDashboard() {

2

3

}

Und innerhalb dieser Aktion zeigen wir einfach eine users.dashboard-Ansichtsdatei an:

1

public function getDashboard() {

2

	$this->layout->content = View::make('users.dashboard');

3

}

Als nächstes müssen wir es vor nicht autorisierten Benutzern schützen, indem wir den auth-Vor-Filter verwenden. Fügen Sie im Konstruktor unseres UsersController den folgenden Code ein:

1

public function __construct() {

2

	$this->beforeFilter('csrf', array('on'=>'post'));

3

	$this->beforeFilter('auth', array('only'=>array('getDashboard')));

4

}

Dies verwendet den auth-Filter, der überprüft, ob der aktuelle Benutzer angemeldet ist. Wenn der Benutzer nicht angemeldet ist, wird er auf die Anmeldeseite umgeleitet, wodurch der Benutzerzugriff im Wesentlichen verweigert wird. Beachten Sie, dass ich auch ein Array als zweites Argument übergebe. Durch Festlegen des only-Schlüssels kann ich diesem vor dem Filter mitteilen, dass er nur auf die bereitgestellten Aktionen angewendet wird. In diesem Fall möchte ich nur die getDashboard-Aktion schützen.

Anpassen von Filtern

Standardmäßig leitet der auth-Filter Benutzer zu einem /login-URI um, dies funktioniert jedoch nicht für unsere Anwendung. Wir müssen diesen Filter so ändern, dass er stattdessen zu einem users/login-URI umleitet, andernfalls erhalten Sie einen Fehler. Öffnen Sie app/filters.php und ändern Sie im Abschnitt Authentifizierungsfilter den auth-Filter, um auf users/login umzuleiten, wie folgt:

1

/*

2

|--------------------------------------------------------------------------

3

| Authentication Filters

4

|--------------------------------------------------------------------------

5

|

6

| The following filters are used to verify that the user of the current

7

| session is logged into this application. The "basic" filter easily

8

| integrates HTTP Basic authentication for quick, simple checking.

9

|

10

*/

11

12

Route::filter('auth', function()

13

{

14

	if (Auth::guest()) return Redirect::guest('users/login');

15

});

Erstellen der Dashboard-Ansicht

Bevor wir Benutzer bei unserer Anwendung anmelden können, müssen wir diese dashboard-Ansichtsdatei erstellen. Erstellen Sie unter app/views/users eine neue Datei namens dashboard.blade.php und fügen Sie den folgenden Code-Schnipsel ein:

1

<h1>Dashboard</h1>

2

3

<p>Welcome to your Dashboard. You rock!</p>

Hier zeige ich einen sehr einfachen Absatz an, um dem Benutzer mitzuteilen, dass er sich jetzt in seinem Dashboard befindet.

Lassen Sie uns einloggen!

Jetzt sollten wir uns einloggen können. Navigieren Sie zu http://localhost:8000/users/login, geben Sie die Anmeldeinformationen Ihres Benutzers ein und probieren Sie es aus.

Erfolg!

Anzeigen der entsprechenden Navigationslinks

Ok, wir können uns jetzt registrieren und in unsere Anwendung einloggen, sehr cool! Aber wir haben hier eine kleine Macke, wenn Sie sich unser Navigationsmenü ansehen, obwohl wir eingeloggt sind, können Sie sehen, dass die Schaltflächen zum Registrieren und Anmelden noch sichtbar sind. Idealerweise sollen diese nur angezeigt werden, wenn der Benutzer nicht angemeldet ist. Sobald sich der Benutzer jedoch anmeldet, möchten wir einen Abmeldelink anzeigen. Um diese Änderung vorzunehmen, öffnen wir unsere Datei main.blade.php erneut. So sieht unser Navbar-Code derzeit aus:

1

<div class="navbar navbar-fixed-top">

2

  	<div class="navbar-inner">

3

    	<div class="container">

4

			<ul class="nav">  

5

				<li>{{ HTML::link('users/register', 'Register') }}</li>   

6

				<li>{{ HTML::link('users/login', 'Login') }}</li>   

7

			</ul>  

8

    	</div>

9

  	</div>

10

</div>

Lassen Sie uns dies leicht ändern und unseren ursprünglichen Navbar-Code durch Folgendes ersetzen:

1

<div class="navbar navbar-fixed-top">

2

  	<div class="navbar-inner">

3

    	<div class="container">

4

			<ul class="nav">  

5

				@if(!Auth::check())

6

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

7

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

8

				@else

9

					<li>{{ HTML::link('users/logout', 'logout') }}</li>

10

				@endif

11

			</ul>  

12

    	</div>

13

  	</div>

14

</div>

Alles, was ich getan habe, ist, unsere li-Tags für unsere Navbar in eine if-Anweisung einzuschließen, um mit der Methode !Auth::check() zu überprüfen, ob der Benutzer nicht eingeloggt ist. Diese Methode gibt true zurück, wenn der Benutzer angemeldet ist, andernfalls false. Wenn der Benutzer also nicht eingeloggt ist, zeigen wir die Registrierungs- und Login-Links an, andernfalls ist der Benutzer eingeloggt und wir zeigen stattdessen einen Logout-Link an.

Ausloggen

Da unsere Navigationsleiste nun die entsprechenden Links anzeigt, basierend auf dem angemeldeten Status des Benutzers, schließen wir diese Anwendung ab, indem wir die getLogout-Aktion erstellen, um den Benutzer tatsächlich abzumelden. Erstellen Sie in Ihrem UsersController eine neue Aktion namens getLogout:

1

public function getLogout() {

2

3

}

Fügen Sie nun den folgenden Codeausschnitt hinzu, um den Benutzer abzumelden:

1

public function getLogout() {

2

	Auth::logout();

3

	return Redirect::to('users/login')->with('message', 'Your are now logged out!');

4

}

Hier rufen wir die Methode Auth::logout() auf, die das Abmelden des Benutzers für uns übernimmt. Anschließend leiten wir den Benutzer zurück auf die Login-Seite und geben ihm eine Flash-Nachricht, die ihn darüber informiert, dass er abgemeldet wurde.

Abschluss

Und damit ist dieses Tutorial zur Laravel 4-Authentifizierung abgeschlossen. Ich hoffe, Sie fanden dies hilfreich beim Einrichten der Authentifizierung für Ihre Laravel-Apps. Wenn Sie irgendwelche Probleme oder Fragen haben, können Sie diese gerne in den Kommentaren stellen und ich werde mein Bestes geben, um Ihnen zu helfen. Sie können sich den vollständigen Quellcode für die kleine Demo-App ansehen, die wir in diesem Tutorial auf Github erstellt haben. Danke fürs Lesen.