AngularJS-Authentifizierung, der einfache Weg

AngularJS ist eines der weltweit beliebtesten JavaScript-Frameworks zur Erstellung von Einzelseitenanwendungen (SPA). Angular wurde von Google entwickelt und bietet eine Vielzahl von Instrumenten, mit denen Sie die verschiedenen Komponenten, die für eine SPA erforderlich sind, auf einfache Weise miteinander verbinden können. Dinge wie Zwei-Wege-Datenbindung, HTTP-Anfragen, Vorlagenerstellung und Routing werden durch die AngularJS-Kernbibliothek und Bibliotheken von Drittanbietern, die von der Community zur Verfügung gestellt werden, vereinfacht.

Wie bei anderen SPA-Rahmenwerken kümmert sich Angular nur um das Frontend und ist gegenüber der Serverseite neutral. Diese Entkopplung zusammen mit der clientseitigen Architektur von Angular ermöglicht letztlich eine größere Flexibilität bei wachsenden Anwendungen.

Eine AngularJS-Authentifizierung von Grund auf zu erstellen, kann mühsam sein, muss es aber nicht. Lesen Sie weiter unten, um zu erfahren, wie Sie mit Auth0 ganz einfach AngularJS-Authentifizierung hinzufügen können.

AngularJS-Anwendungen funktionieren anders als herkömmliche Roundtrip-Anwendungen. Wie andere Single Page App (SPA) Rahmenwerke stützen sich AngularJS-Anwendungen in der Regel auf Daten-APIs, auf die durch das Senden von XHR-Anfragen vom Client an den Server zugegriffen wird.

Das Hinzufügen von Benutzerauthentifizierung zu AngularJS-Anwendungen läuft ebenfalls anders ab. Herkömmliche Anwendungen verwenden eine sitzungsbasierte Authentifizierung, bei der der Authentifizierungsstatus des Benutzers im Speicher des Servers gespeichert wird, aber das funktioniert nicht so gut für SPAs.

Token bieten eine bessere Möglichkeit, die AngularJS-Authentifizierung zu erreichen. Es gibt verschiedene Arten von Authentifizierungs-Token, aber JSON-Web-Token sind die beste Lösung.

JSON-Web-Token (JWT) ist ein offener Standard (RFC 7519), der eine kompakte und in sich geschlossene Methode zur sicheren Übertragung von Informationen zwischen Parteien als JSON-Objekt definiert. Es gibt viele Gründe dafür, die JWT-Authentifizierung vorzuziehen:

Kompakt und in sich geschlossen: Alle für die Authentifizierung benötigten Daten sind im Token enthalten. Es kann aufgrund seiner geringen Größe schnell übertragen werden.

Digital signiert: Token werden anhand eines geheimen Schlüssels auf dem Server überprüft. Sie sind sicher, weil der Inhalt des JWT nicht manipuliert werden kann, solange der geheime Schlüssel nicht bekannt ist.

Einfach: JWTs sind konzeptionell einfach und haben geringe Gemeinkosten. Da sie ein zustandsloses Mittel zur Authentifizierung bieten, können sie über mehrere Server und Domänen hinweg verwendet werden, ohne dass es zu CORS-Problemen kommt.

Mit Auth0 muss Ihre AngularJS-Anwendung nur mit unserer API kommunizieren, wenn sich der Benutzer anmeldet. Alle anderen API-Aufrufe gehen wie üblich direkt an Ihren Server.

Über unser Lock Widget oder Ihren eigenen Anmeldebildschirm senden Ihre Benutzer ihre Anmeldedaten an unsere API, um sich zu authentifizieren. Bei Erfolg wird ein JWT zurückgegeben und im lokalen Speicher des Browsers gespeichert.

auth.signin({}, function(profile, token) {
    // Success callback
    store.set('profile', profile);
    store.set('token', token);
    $location.path('/');
});

API-Endpunkte, die Sie absichern möchten, sind mit einer Middleware geschützt, die die Übermittlung eines gültigen JWT in HTTP-Anfragen erfordert. Das JWT des Benutzers wird als Autorisierungs-Header gesendet und anhand Ihres geheimen Schlüssels überprüft. Ein jwtInterceptor ist so konfiguriert, dass er das JWT des Benutzers bei allen Anfragen sendet.

jwtInterceptorProvider.tokenGetter = ['store', function(store) {
    // Return the saved token
    return store.get('token');
}]; 

$httpProvider.interceptors.push('jwtInterceptor');

Unser Lock Widget ist eine wunderschön gestaltete, einbettbare Anmeldebox für Ihre AngularJS-Anwendungen. Es bietet Ihnen die Möglichkeit, sich anzumelden, ein Passwort zurückzusetzen sowie andere Funktionen, die sofort einsatzbereit sind. Der Stil des Widgets lässt sich leicht an Ihre Marke anpassen, und Sie können dazu eines unserer vorgefertigten Designs verwenden.

Angular 2 ist noch nicht offiziell freigegeben und wird nicht für die Produktion empfohlen, aber Sie können Auth0 trotzdem in Ihren Angular 2-Anwendungen verwenden. Unsere Hilfsbibliothek angular2-jwt macht es einfach, authentifizierte HTTP-Anfragen an Ihren Server zu senden und das Routing basierend auf dem Authentifizierungsstatus des Benutzers zu handhaben.