Easy AngularJS -Authentifizierung mit auth0

Dieser Artikel wurde aktualisiert (11.05.2017), um die Änderungen an der ATR -API von Auth0 widerzuspiegeln. Die Sicherung von Einstellungsanwendungen (SPAs) kann eine Herausforderung sein. Spas bestehen oft aus einem separaten Front-End (z. B. AngularJs) und einer Back-End-Daten-API. Die herkömmliche Sitzungsbasis-Authentifizierung ist für diese Architektur nicht geeignet, da sie den Zustand der API einführt, die REST-Prinzipien verletzt und die Integration der mobilen App behindert.

Schlüsselvorteile dieses Ansatzes:

• Statuslose Authentifizierung: JSON -Web -Token (JWTS) ermöglichen eine sichere, staatenlose Authentifizierung, die nahtlos in mobile Backends integriert ist.
• vereinfachte Benutzerverwaltung: auth0 vereinfacht die Verwaltung der Benutzerauthentifizierung, einschließlich sozialer Logins und Multi-Profile-Unterstützung.
• Stropierte Integration: Auth0 -Bibliotheken und AngularJS -Module vereinfachen den Authentifizierungsprozess und automatisieren Sie die Token -Handhabung und -Sichtungsmanagement.
• Verbesserte Sicherheit: JWTS, die sicher im lokalen Speicher gespeichert sind, verbessern die Sicherheit beim Zugriff auf geschützte API -Endpunkte.
• Einfache Integration der sozialen Anmeldung: Aktivieren Sie beliebte soziale Anmeldungen mit einfachen Auth0 -Dashboard -Umschaltungen.
• sichere API -Endpunkte: Ein NodeJS -Server mit JWT -Validierung schützt die API -Endpunkte und stellt sicher, dass nur authentifizierte Benutzer auf sensible Daten zugreifen.

JSON Web Tokens (JWTS): Eine aufstandlose Lösung

JWTS überwinden die Einschränkungen der Sitzungsbasierten Authentifizierung. Dieser offene Standard authentifiziert Anfragen vom AngularJS Front-End bis zur Back-End-API. Entscheidend ist, dass JWTS eine JSON-Nutzlast mit benutzerdefinierten Ansprüchen enthält, die digital für die Manipulationsfestung signiert ist.

AngularJS -Authentifizierungsinimposition

JWTs sind ideal für die AngularJS -Authentifizierung. Gesicherte API -Endpunkte werden zugegriffen, indem der JWT des Benutzers im lokalen Speicher gespeichert und in den Autorisierungs -Header von HTTP -Anfragen aufgenommen wird. Ungültige oder fehlende JWTs führen zu einer Ablehnung des Zugriffs.

Über die grundlegende Authentifizierung hinaus erfordert eine robuste AngularJS -Implementierung:

• Bedingte Rendering: Elemente anzeigen/ausblenden (Login/Logout -Schaltflächen) basierend auf der JWT -Gültigkeit.
• Routenschutz: Verhindern Sie, dass nicht authentifizierte Benutzer auf bestimmte Routen zugreifen.
• UI -Updates: Aktualisieren Sie die Benutzeroberfläche, wenn sich der Benutzerzustand ändert (JWT -Ablauf, Abmelden).

Dieses Tutorial zeigt eine vollständige AngularJS -Authentifizierungsimplementierung, einschließlich eines NodeJS -Servers für geschützten Ressourcenzugriff. Anstatt eine Benutzerdatenbank und eine JWT -Ausgabe zu erstellen, nutzen wir die kostenlose Stufe von Auth0 (bis zu 7.000 aktive Benutzer). Die Integration der sozialen Anmeldung wird ebenfalls gezeigt.

(Bild: auth0 Dashboard)

auth0 setup

1. Erstellen Sie ein Auth0 -Konto: Melden Sie sich für ein Auth0 -Konto an und wählen Sie einen Domänennamen (z. B. yourcompany.auth0.com). Dies kann später nicht geändert werden.
2. Konfigurieren Sie die Standard -App: im Auth0 -Dashboard, navigieren Sie zum Abschnitt clients und greifen Sie auf die Standard -App zu. Konfigurieren Sie zulässige Ursprünge und zulässige Rückruf -URLs (z. B. für dieses Tutorial). http://localhost:8080
3. Erstellen Sie eine API: Unter dem Abschnitt apis erstellen die Anwendung). Aktivieren Sie Social Identity -Anbieter (optional): Soziale Anmeldungen (z. B. Google, Facebook) Aktivieren, indem Optionen in den Verbindungen
& gt umgeschaltet werden;
4. sozial Abschnitt. Installation und Konfiguration

Installieren Sie die erforderlichen Pakete (mit

, wenn Sie das GitHub -Repo gegabelt haben):

Starten Sie den Server mit

. Konfigurieren Sie bower install und

, um auth0 zu integrieren. Ersetzen Sie Platzhalterwerte durch Ihre Auth0 -Anmeldeinformationen:

npm install -g http-server

http-server Die Datei app.js verarbeitet das Parsen des Hashs nach der Authentifizierung: index.html

// app.js (snippet)
angularAuth0Provider.init({
  clientID: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  responseType: 'token id_token',
  redirectUri: AUTH0_CALLBACK_URL,
  audience: AUTH0_API_AUDIENCE,
});

(Bild: AngularJS -Anmeldeseite) app.run.js

// app.run.js (snippet)
authService.handleParseHash();

(Bild: AngularJs Anmeldete Zustand)

(Bild: AngularJS -Abmeldezustand)

Homepage -Erstellung

Die Datei

bietet eine einfache Benutzeroberfläche mit Anmeldung/Anmeldeschaltflächen und API -Aufrufschaltflächen. Die Datei verarbeitet API -Aufrufe mit :

home.html home.controller.js Authentifizierungsdienst ($http)

// home.controller.js (snippet)
vm.getSecretMessage = function() {
  $http.get('http://localhost:3001/api/private', {
    headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') }
  })
  .then(...)
  .catch(...);
};

Dieser Dienst übernimmt Login-, Abmelden- und Authentifizierungsstatusverwaltung: auth.service.js

nodeJS Servererstellung

// auth.service.js (snippet)
function authService($state, angularAuth0, authManager) {
  // ... login, handleParseHash, logout, isAuthenticated functions ...
}

Erstellen Sie einen NodeJS -Server mit Express,

, und :

express-jwt Starten Sie den Server mit jwks-rsa. Die AngularJS -App kann jetzt Anfragen an den geschützten API -Endpunkt stellen. cors

// server/server.js (snippet)
var authCheck = jwt({
  secret: jwks.expressJwtSecret({
    jwksUri: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/.well-known/jwks.json"
  }),
  audience: '{YOUR-AUTH0-API-AUDIENCE}',
  issuer: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/",
  algorithms: ['RS256']
});

app.get('/api/private', authCheck, function(req, res) { ... });

Weitere Überlegungen und FAQs

node server.js

Der Artikel endet mit einem Abschnitt zu zusätzlichen Auth0 -Funktionen (SSO, passwortlosem Login, MFA) und anderen unterstützten Backends und mobilen SDKs. Ein umfassender FAQ-Abschnitt befasst sich mit häufigen Fragen zum sozialen Anmeldung, zum Sitzungsmanagement, zum Routensicherheit, zum Token-Aktualisierung, zum Fehlerbehebung, zur Anpassung, zur Multifaktorauthentifizierung, zur Haken, zum Testen und zum Debuggen. Denken Sie daran, Platzhalter wie {YOUR-AUTH0-DOMAIN} und {YOUR-AUTH0-API-AUDIENCE} durch Ihre tatsächlichen Auth0 -Werte zu ersetzen.

Das obige ist der detaillierte Inhalt vonEasy AngularJS -Authentifizierung mit auth0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!