Vorwort
Da Angular eine einseitige Anwendung ist, werden die meisten Ressourcen von Anfang an in den Browser geladen, sodass Sie dem Zeitpunkt der Überprüfung mehr Aufmerksamkeit schenken und sicherstellen müssen, dass nur Benutzer, die die Überprüfung bestanden haben, die entsprechende Schnittstelle sehen können.
Die Authentifizierung in diesem Artikel bezieht sich darauf, zu bestimmen, ob sich der Benutzer angemeldet hat, und sicherzustellen, dass die Überprüfungsanforderungen des Servers in jeder Kommunikation mit dem Server erfüllt werden können. Beachten Sie, dass es nicht das Urteil darüber enthält, ob es eine bestimmte Behörde gibt.
Für die Anmeldung akzeptieren Sie hauptsächlich den Benutzernamen und die Kennworteingabe des Benutzers , senden Sie ihn zur Überprüfung an den Server , verarbeiten Sie die Überprüfungsantwort und erstellen Sie Authentifizierungsdaten auf der Browser -Seite .
Zwei Möglichkeiten zur Implementierung der Identitätsauthentifizierung
Gegenwärtig gibt es zwei Hauptkategorien von Methoden zur Implementierung der Identitätsauthentifizierung:
Kekse
Herkömmliche Browser -Webseiten verwenden Cookies, um die Identität zu überprüfen. Tatsächlich besteht in der Anwendungsschicht des Browsers im Grunde keine Notwendigkeit, sich um die Identitätsüberprüfung zu sorgen. Die Einstellungen von Cookies werden vom Server abgeschlossen. Bei der Übermittlung der Anfrage fügt der Browser die entsprechenden Cookie -Informationen automatisch bei. Daher müssen im JavaScript -Code keinen speziellen Code schreiben. Aber jedes Mal, wenn ich bitte, werde ich alle Cookies -Daten mitbringen.
Mit der Anwendung von CDN und dem allmählichen Anstieg mobiler Geräte können Cookies den komplexen Multi-Domänen-Authentifizierungsanforderungen zunehmend nicht erfüllen.
Schlüssel
Tatsächlich ist die wichtigste Authentifizierung nicht nur in letzter Zeit aufgetaucht, sondern noch länger als die Geschichte von Cookies. Wenn der Browser den Server anfordert, wird der Schlüssel zur Anforderung auf eine bestimmte Weise angeschlossen, z. B. in den Header der Anfrage. Dazu muss ein spezieller Client -Code für die Verwaltung geschrieben werden.
Der kürzlich aufstrebende JSON-basierte Web Key （JSON Web Token） ist eine typische Authentifizierung mit einem Schlüssel.
Wenn Sie in Webanwendungen APIs erstellen, sollten Sie die Verwendung der Schlüsselmethode Priorität geben.
Prozessanmeldung
Login ist der erste Schritt bei der Identitätsüberprüfung. Nur durch Anmelden in können die entsprechenden Daten zur Identitätsüberprüfung organisiert werden.
Müssen Sie eine separate Anmeldeseite verwenden?
Es gibt zwei Möglichkeiten, mit Anmeldeseiten umzugehen:
Eine separate Anmeldeseite springt nach Abschluss der Anmeldung zur einseitigen Anwendung. Dies ermöglicht die Zugriffskontrolle der Ressourcen der einseitigen Anwendung, um nicht-loginische Benutzer zugreifen zu können, und eignet sich für Anwendungsszenarien von Hintergrund- oder Verwaltungswerkzeugen. Es reduziert jedoch tatsächlich die Benutzererfahrung von einseitigen Anwendungen
Führen Sie die Anmeldung in einer einzelnen Seitenanwendung aus , die eher dem Designkonzept einer einzigen Seitenanwendung übereinstimmt und für beliebte Produktszenarien besser geeignet ist, da böswillige Personen immer den Front-End-Code Ihrer einzelnen Seitenanwendung erhalten können.
Eine separate Anmeldeseite
Im Allgemeinen besteht der Zweck der Verwendung einer separaten Anmeldeseite darin, die Seiten zu schützen, die nach dem Anmeldung von anonymen Benutzern zugegriffen werden. Daher wird auf der Anmeldeseite ein Formular konstruiert und die traditionelle Vermittlungsmethode (Nicht-AJAX) direkt verwendet. Nachdem das Backend den Benutzernamen und das Kennwort erfolgreich bestätigt hat, wird die HTML der einseitigen Anwendungsseite nach der Anmeldung ausgegeben.
In diesem Fall können Sie die Authentifizierungsinformationen direkt in die HTML -Ausgabe einstellen. Sie können beispielsweise JADE verwenden, um eine solche Seite zu erstellen:
<!-Dashboard.jade-> docType htmlhtmlhtml Head Link (rel = "Stylesheet", href = "/assets/app.e1c2c6ea9350869264da10de799dced1.css") Body Script. window.token =! {json.stringify (token)}; Div.MD-Padding (UI-View) -Skript (SRC = "/assets/app.84b1e53df1b4b23171da.js"))Nachdem die Bestätigung des Benutzernamens und des Kennworts erfolgreich ist, kann das Backend die folgende Methode verwenden, um HTML zu rendern und auszugeben:
return res.render ('Dashboard', {Token: token});Sobald die Winkelanwendung gestartet wurde, kann sie mit der Authentifizierung kommunizieren. Es stellt auch sicher, dass nur Benutzer, die erfolgreich angemeldet sind, diese Seite eingeben können.
Organisationen, die sich bei einer einzelnen Seiten -App anmelden
Für Multi-View-Winkelanwendungen wird im Allgemeinen Routing verwendet. Auf der Seite befindet sich im Allgemeinen ein festes Sidebar -Menü oder ein oberes Navigationsmenü, und der Textbereich wird vom Routing -Modul gesteuert.
Der folgende Beispielcode verwendet Winkelmaterial, um die Seite zu organisieren, und das Routing-Modul verwendet UI-Router. Wenn die Anwendung geöffnet wird, gibt es eine spezielle Ladeanimation. Nach Abschluss des Ladens wird die angezeigte Seite vom AppController -Controller verwendet. Für Benutzer, die nicht angemeldet sind, wird ein Anmeldeformular angezeigt. Nach Abschluss der Anmeldung ist die Seite in drei Teile unterteilt: Einer ist die obere Breadcrumb -Navigation , das zweite ist das Seitenleistenmenü und der andere ist der Hauptteil der Routenregelung .
Der Code ist wie folgt:
<body ng-App = "App" layout = "row"> <div id = "laden"> <!-Seite Ladeaufforderung-> </div> <div flex layout = "row" ng-cloak ng-controller = "AppController" ng-init = "lader ()"> <divoler = isSererauth "," isusseraTh ", ng-controller =", "! <!-loginForm-> </div> <div ng-if = "isuserAuth" flex layout = "row"> <md-sidenav flex = "15" MD-is-Locked-Open = "True"> <! </md-toolbar> <md-content> <!-Routing-> <div Ui-view> </div> </md-content> </md-content> </div> </div> </body>
Für das Laden von Animationen befinden sie sich außerhalb AppController und können im AppController -Code versteckt werden. Dadurch wird der Zweck des Verschwindens erreicht, nachdem alle CSS/JavaScript geladen wurden.
Im AppController befindet sich eine Variable isUserAuth Es ist false wenn es initialisiert wird. Wenn die lokal gespeicherten Sitzungsinformationen gültig sind oder nach Abschluss des Anmeldes auf ture festgelegt wird. Aufgrund der Steuerung von ng-if kann der Zweck des Ausblendens des Anmeldesformulars und des Anzeigens des Anwendungsinhalts erreicht werden. Es ist zu beachten, dass nur durch Verwendung von ng-if anstelle von ng-show/ng-hide hier die ersteren DOM-Elemente wirklich löscht und hinzufügen, während letztere nur die CSS-Attribute eines DOM-Elements ändern wird. Das ist sehr wichtig. Nur auf diese Weise können wir sicherstellen, dass der Inhalt in der einseitigen Anwendung nach dem Anmelden geladen wird, um zu verhindern, dass der Controller-Code in der aktuellen Route direkt vor dem Anmelden ausgeführt wird.
Warum verschlüsseln Clients auch Passwörter?
Ein idealer Anmeldungsprozess basierend auf Benutzername und Passwort ist wie folgt:
1. Die Browser -Seite erhält das vom Benutzer eingegebene Kennwort, verwendet einen Hashing -Algorithmus wie MD5, um ein neues Kennwort mit fester Länge wie md5(username + md5(md5(password))) zu generieren und dann den Kennwort -Hash -Wert und den Benutzernamen am Backend zu übergeben
2. Das Backend erhält das entsprechende Salz basierend auf dem Benutzernamen, verwendet den Wert des Benutzernamens und des Kennworthash -Werts, berechnet einen Ciphertext und sucht die Datenbank basierend auf dem Benutzernamen und dem Kennwort
3. Wenn die Abfrage erfolgreich ist, generieren Sie den Schlüssel, geben Sie ihn an den Browser zurück und führen Sie Schritt 4 durch
V. Aktualisieren Sie Salz und Chiffretext in der Datenbank
Vielleicht können 80% der Menschen nicht verstehen, warum ein Login so kompliziert ist. Dies kann einen speziellen Artikel erfordern, um klar zu erklären. Hier werde ich zuerst erklären, warum der Browser das Passwort und die Gründe wie folgt sind:
1. Schützen Sie das Passwort des Benutzers vor der Quelle, um sicherzustellen, dass Sie nur durch Schlüsseldatensätze das ursprüngliche Passwort des Benutzers erhalten können
2. Auch wenn das Netzwerk abgelangt ist und HTTPS nicht verwendet wird, ist das gestohlene Kennwort erst nach dem Hashing, was die Daten des Benutzers auf diesem Server höchstens beeinflussen kann und andere Websites, die das gleiche Kennwort verwenden, nicht beeinflusst.
3. Auch der Eigentümer des Servers kann das ursprüngliche Kennwort des Benutzers nicht erhalten.
Dieser Ansatz ist das größte Risiko für Benutzer, und die Daten in der aktuellen Anwendung werden gestohlen. Der Verlustbereich wird nicht erweitert und es wird niemals Probleme mit CSDN oder anderen Strömen geben.
Erfolgreiche Benachrichtigung anmelden
Bei einigen Anwendungen müssen nicht alle Seiten sich anmelden. Sie müssen sich möglicherweise nur bei der Ausführung bestimmter Vorgänge anmelden. In diesem Fall muss nach Anmeldung die gesamte Anwendung benachrichtigt werden. Auf diese Weise können Sie die Broadcast -Funktion verwenden.
Der einfache Code lautet wie folgt:
Angular .module ('App') .Controller ('logincontroller', ['$ rootscope', logincontroller]; Funktion logincontroller ($ rootScope) {// Funktion nannte AfterLoginuccess () {$ rootscope. }}In anderen Controllern können Sie diese Übertragung anhören und die Vorgänge ausführen, die nach erfolgreichem Anmeldung ausgeführt werden müssen, z. B. eine Liste oder Details:
$ scope.
Identitätsauthentifizierungsinformationen
Nach erfolgreicher Anmeldung gibt der Server den Schlüssel zurück, und die nachfolgenden API -Anfragen müssen den Schlüssel bringen, und die von der Anfrage zurückgegebene Antwort muss auch überprüft werden, ob es sich um einen Fehler über die Ungültigkeit der Identitätsinformationen handelt. Diese Reihe von Arbeiten ist ziemlich umständlich und sollte automatisch abgeschlossen sein.
speichern
Es gibt ungefähr folgende Möglichkeiten, um den Schlüssel zu speichern:
1. Kookies: Wie bereits erwähnt, wird dies nicht empfohlen. Gleichzeitig hat es auch eine maximale Grenze von 4K
2.SessionStorage: Die Registerkarte ist gültig. Sobald geschlossen wurde oder eine neue Registerkarte geöffnet ist, kann SessionStorage nicht freigegeben werden.
3.Localstorage: Eine ideale Speichermethode. Sofern die Browserdaten nicht gereinigt werden, gibt es immer die Daten, die in LocalStorage gespeichert sind.
4. Angular Singleton Service: Wenn in der Anwendung gespeichert, gehen die Daten nach dem Auffrischen verloren und können natürlich nicht zwischen TAB -Seiten geteilt werden.
Ein besserer Ansatz ist, dass die Authentifizierungsinformationen in LocalStorage gespeichert werden, sie jedoch zu Beginn der Anwendung in den Singleton -Service von Angular initialisiert werden.
Fügen Sie der Anfrage Authentifizierungsinformationen hinzu
Der Zweck der Identitätsauthentifizierungsinformationen besteht darin, die Identität mit dem Server anzugeben und Daten zu erhalten. Daher sind in der Anfrage zusätzliche Authentifizierungsinformationen erforderlich.
In allgemeinen Anwendungen werden Authentifizierungsinformationen in die Header der Anfrage platziert. Wenn Sie die Header nacheinander auf jede Anfrage einstellen, ist dies zu zeitaufwändig und mühsam. $httpProvider in Angular liefert einen Interceptor interceptors , durch den eine einheitliche Verarbeitung jeder Anfrage und Antwort erreicht werden kann.
Der Weg zum Hinzufügen eines Interceptors ist wie folgt:
Angular .module ('App') .Config (['$ httpprovider', Funktion ($ httpprovider) {$ httpprovider.Interceptors.push (httpinterceptor);}]); Die Definition von HttpInterceptor lautet wie folgt:
Angular .module ('App') .Factory ('httpinterceptor', ['$ q', httpinterceptor); Funktion httpinterceptor ($ q) {return {// Bevor die Anfrage ausgestellt wird, kann es verwendet werden, um verschiedene Autoreninformationsanforderungen hinzuzufügen. } return config; }, // Es ist ein Fehler beim Anfordern von RequestError: Funktion (err) {return $ q.Reject (err); }, // Antwort Antwort: Funktion (res) {return Res; }, // Der zurückgegebene Antwortfehler, einschließlich der Rückgabe des Backends die Antwort, wird der HTTP-Statuscode von Nicht-200 festgelegt: Funktion (err) {return $ q.Reject (err); }};}Interceptors bieten die vollständige Lebenszyklusverarbeitung von der Anfrage zur Rückgabeantwort, die im Allgemeinen für Folgendes verwendet werden kann:
1. Fügen Sie Daten zu den einheitlichen Anforderungen hinzu, z. B. Hinzufügen von Authentifizierungsinformationen
2. Einheitlicher Fehlerbehandlung, einschließlich Fehlern, wenn die Anforderung ausgestellt wird (z.
3.. Einheitliche Antwortverarbeitung, wie z. B. ein paar Daten cache usw.
4. Zeigen Sie die Anfrage -Fortschrittsleiste an
Wenn der obige Beispielcode localStorage den Wert token enthält, wird am Kopf jeder Anforderung ein token -Wert hinzugefügt.
Versagen und Handling
Im Allgemeinen sollte das Backend den HTTP -Statuscode der Antwort auf 401 festlegen, wenn token -Überprüfung fehlschlägt, damit er im Interceptor responseError einheitlich behandelt werden kann:
AntwortError: Funktion (err) {if (-1 === Err.status) {// Der Remote-Server reagiert nicht} else if (401 === Err.Status) {// Der 401-Fehler wird allgemein für den Authentifizierungsfehler verwendet. Es hängt von dem von der Backend geworfenen Fehler ab, wenn die Authentifizierung fehlschlägt.Zusammenfassen
Solange der vom Server zurückgegebene Statuscode nicht 200 ist, wird responseError aufgerufen. Hier kann der Fehler einheitlich behandelt und angezeigt werden.
Der obige Inhalt bezieht sich auf die Anmeldungs- und Identitätsüberprüfung in Winkelentwicklungsanwendungen. Ich hoffe, es wird für alle hilfreich sein, Angular zu lernen.