BlitzTypes

BlitzTypes

Authentifizierung

Für Blitztypes wollte ich eine umfassende, sichere und professionelle Authentifizierung erstellen, hauptsächlich zu Lernzwecken. Dafür habe ich JWT (JSON Web Token) Authentifizierung implementiert, die als Goldstandard in der Webentwicklung gilt. ASP.NET Identity vereinfachte diesen Prozess mit einem vorgefertigten JWT-Validator, automatischem Passwort-Hashing usw.

So funktioniert es:

Dieser Token, welcher als Access-Token bezeichnet wird, ist nach dem Einloggen 15 Minuten lang gültig.

Was passiert nach diesen 15 Minuten? Und warum 15 Minuten? Aus Sicherheitsgründen wird ein kurzlebiger Access-Token dringend empfohlen. Nach den ersten 15 Minuten läuft der Token ab, und der Benutzer ist offiziell nicht mehr eingeloggt. Aber wenn das Abrufen der nächsten Benutzerdaten fehlschlägt, prüft der Server, ob der Benutzer einen gültigen sogenannten refreshToken in seinen Cookies hat, das ebenfalls beim Einloggen erstellt wurde. Wenn der gehashte refreshToken gültig ist, erstellt der Server einen weiteren 15 Minuten gültigen Access-Token. Warum ein refreshToken? Da Sie nicht möchten, dass sich Ihre Benutzer alle 15 Minuten erneut einloggen müssen, gibt es diesen länger gültigen refreshToken, das für einige Tage bis Wochen gültig ist. Der Kompromiss dabei ist, dass dieser refreshToken sehr sicher gespeichert werden muss.

Frontend

Das Einrichten des Frontends war relativ unkompliziert. Da ich mich für ein einfaches und modernes Design entschieden habe, habe ich hauptsächlich die Shadcn-UI-Bibliothek verwendet, die mir einige einzelne Komponenten wie Karten, Schaltflächen, Dropdowns usw. anbot, die ich anpassen konnte, zusammen mit Tailwind CSS und anderen Bibliotheken wie recharts.js. Dies ermöglichte es mir, schnell ein Frontend einzurichten und meine Zeit auf andere Funktionen zu richten, mit denen ich weniger Erfahrung hatte.

Wenn Sie die Blitztypes Website besuchen, werden Sie feststellen, dass der Text, den Sie eingeben, nicht in ein Texteingabefeld eingegeben wird, sondern der Text, den Sie selbst sehen, aktualisiert wird. Dies ermöglicht es Ihnen, Ihren Tippfortschritt/Fehler direkt zu sehen, ohne Ihre Augen zu belasten. Es ist ein cleverer Trick, bei dem ich das Texteingabefeld ausblende und den Eingabefokus umleite, wenn der Benutzer an einer bestimmten Stelle klickt. Die Aktualisierung des Textes funktioniert, weil jeder einzelne Buchstabe ein unabhängiges Objekt ist, das verschiedene Informationen wie isCorrect, Farbe, timeStamp usw. verfolgt.