Motivation
Angular ist ein leistungsstarkes Frontend-Framework zur Erstellung anspruchsvoller Single Page Applications (SPA). Mit Flask können SPAs sehr einfach geladen werden, wie hier erklärt wird. Die Integration gebräuchlicher Sicherheitsmaßnahmen, die in SPAs verwendet werden, erfordert jedoch eine extra Aufwand, weshalb zusätzliche Erweiterungen erforderlich sind. Eine sehr verbreitete Erweiterung ist flask-security, welche eine Menge Funktionalität für die Handhabung von Authentifizierung, Autorisierung, CSRF-Schutz und vieles mehr bietet.
Die Nutzung von flask-security zur Handhabung von SPAs ist jedoch etwas heikel, da sich flask-security mehr auf Formulare konzentriert und eine Vielzahl von Anpassungen enthält, die während der Initialisierung vorgenommen werden müssen. Deshalb möchte ich zeigen, welche Anpassungen vorgenommen werden müssen, um eine sichere und moderne SPA mit Flask und Angular zu erzeugen.
Beispielapplikation
Wir haben eine einfache Demo-Anwendung implementiert, mit deren Hilfe Blogger Nachrichtenartikel schreiben und anzuzeigen können. Benutzer können sich registrieren, in ihr Konto einloggen und wieder ausloggen. Ähnlich wie bei GitHub wollen wir das Einloggen entweder per Benutzername oder Passwort erlauben.
Die Frontend- und Backend-Logik sind sauber getrennt. Der Frontend-Code besteht aus HTML- und JavaScript-Code, der unabhängig vom Backend-Code geladen werden könnte (z.B. durch Nginx). Das Backend ist eine Flask REST API, die lediglich als Datenschnittstelle zur Datenbank dient.
Die Angular Loginform schaut folgendermaßen aus: