Angular Single Sign-On SSO
Einmaliges Anmelden (SSO) für Angular JWT Die Lösung von miniOrange bietet sicheren Single Sign-On-Zugriff auf Angular-Anwendungen mit einem einzigen Satz Anmeldeinformationen. Dies geschieht mithilfe von JSON Web Token (JWT)-Tokens und kann problemlos in Angular integriert werden, das in jedem Framework oder jeder Sprache erstellt wurde. Sie können Ihren Benutzern die soziale Anmeldung ermöglichen, um sicheren Zugriff auf Anwendungen über einen ihrer vorhandenen sozialen Anbieter wie Facebook, Twitter, Google oder LinkedIn zu erhalten.
Mit miniOrange Angular SSO erhalten Sie:
- Nahtlose Benutzeranmeldung.
- Endlose Anpassungen Ihrer Anmeldeformulare und -seiten.
- Vereinfachtes Onboarding von Kunden oder Benutzern.
Befolgen Sie die unten stehende Schritt-für-Schritt-Anleitung für Angular Single Sign-On (SSO):
1. Konfigurieren Sie Angular in miniOrange:
- Melden Sie sich bei der miniOrange-Admin-Konsole an.
- Zurück Nach Apps und klicken Sie auf Anwendung hinzufügen .
- In Wählen Sie Anwendung, wählen JWT aus der Dropdown-Liste „Anwendungstyp“.
- Suchen Sie im nächsten Schritt nach Angular Anwendung aus der Liste. Wenn Ihre Anwendung nicht gefunden wird, suchen Sie nach JWT-App und Sie können Ihre Anwendung einrichten.
-
Sie können die folgenden Details in der Anwendung konfigurieren:
| Display Name |
Geben Sie die Display Name (d. h. der Name dieser Anwendung) |
| URL umleiten |
Geben Sie die URL umleiten (d. h. der Endpunkt, an den Sie Ihr JWT-Token senden/posten möchten). Sie können mehrere Weiterleitungs-URLs hinzufügen, indem Sie sie mit einem ';' trennen. Z. B. abc.com;xyz.com
|
| Kunden-ID |
Das Kunden-ID wird im Feld unten angezeigt. Klicken Sie auf das Zwischenablagesymbol, um es zu kopieren. |
| Kundengeheimnis |
Kundengeheimnis ist standardmäßig ausgeblendet. Klicken Sie auf das Augensymbol, um es einzublenden, und kopieren Sie es über das Zwischenablagesymbol. Dies wird im HS256-Signaturalgorithmus zur Generierung der Signatur verwendet.
|
| Beschreibung (optional) |
Fügen Sie bei Bedarf eine Beschreibung hinzu.
|
- Klicken Sie auf Gespeichert.
- Sie werden zum. Weitergeleitet Richtlinien .
- Klicken Sie auf Gruppe zuweisen Taste. Ein neuer Gruppenzuordnung konfigurieren Das Modal-Fenster wird sich öffnen.
- Gruppe zuweisen: Wählen Sie die Gruppen aus, die Sie mit der Anwendung verknüpfen möchten. Sie können bis zu 20 Gruppen gleichzeitig auswählen.
- Falls Sie eine neue Gruppe erstellen möchten, klicken Sie auf Neue Gruppe hinzufügen .
- Geben Sie den Gruppennamen ein und klicken Sie auf Gruppe erstellen.
- Klicken Sie auf Weiter.
- Richtlinien zuweisen: Fügen Sie den ausgewählten Gruppen die erforderlichen Richtlinien hinzu. Geben Sie folgende Details ein:
- Erster Faktor: Wählen Sie die Anmeldemethode aus dem Dropdown-Menü aus.
- Wenn Sie auswählen Passwort Als Anmeldemethode können Sie aktivieren 2-Faktor-Authentifizierung (MFA) , Adaptive Authentifizierung, wenn benötigt.
- Wenn Sie auswählen Passwortlos Als Anmeldemethode können Sie aktivieren 2-Faktor-Authentifizierung (MFA) wenn benötigt.
- Wenn Sie auswählen Magische Verbindung Als Anmeldemethode stehen folgende Optionen zur Verfügung:
- Anmeldung von anderen IP-Adressen aktivieren: Wenn diese Option aktiviert ist, können Benutzer den Magic Link von einer anderen IP-Adresse aus öffnen als derjenigen, von der er angefordert wurde.
- Anmeldung von anderen Geräten aktivieren: Wenn diese Option aktiviert ist, können Benutzer den Magic Link auf einem anderen Gerät öffnen als dem, mit dem er angefordert wurde.
- Klicken Sie auf GespeichertFür alle ausgewählten Gruppen werden Richtlinien erstellt.
- Sobald die Richtlinie erfolgreich hinzugefügt wurde, wird sie in der Liste angezeigt.
- Klicken Sie auf Erweitert Tab.
- Geben Sie bei Bedarf die folgenden Details ein:
| Zugangstoken |
Geben Sie das Zugriffstoken ein, das nach der Anmeldung eines Benutzers an Ihre Umleitungs-URL gesendet wird. Anhand dieses Tokens erkennt Ihre App, dass der Benutzer auf bestimmte Funktionen zugreifen darf. |
| Ablauf des ID-Tokens (in Min.) |
Legen Sie fest, wie lange (in Minuten) das ID-Token gültig sein soll. Nach Ablauf dieser Zeit muss sich der Benutzer erneut anmelden, um ein neues Token zu erhalten. |
| Betreff |
Wählen Sie aus, welche Informationen (z. B. die E-Mail-Adresse des Benutzers) zur Identifizierung im Token verwendet werden sollen. So erkennt Ihre App, welcher Benutzer angemeldet ist. |
| Signaturalgorithmus |
Wählen Sie Ihren Signaturalgorithmus aus der Dropdown-Liste aus. |
| Die Abmelde-URL Ihrer Anwendung |
Geben Sie die Webadresse ein, an die Benutzer nach der Abmeldung weitergeleitet werden sollen. |
| Gemeinsame Identität aktivieren |
Mit dieser Funktion können Sie steuern, ob eine bestimmte Anwendung von einem gemeinsam genutzten Benutzer aufgerufen werden kann oder nicht. |
- Signaturalgorithmen für JWT
RSA-SHA256
- Asymmetrisch, verwendet einen Satz privater und öffentlicher Schlüssel zum Generieren und Validieren der Signatur, die im JWT-Token enthalten ist.
- Der private Schlüssel wird zum Generieren der Signatur auf der IDP-Seite verwendet.
- Der öffentliche Schlüssel wird verwendet, um die Signatur auf der SP-Seite zu überprüfen.
- Den öffentlichen Schlüssel hierzu stellen wir zur Verfügung.
HS256
- Symmetrisch, verwendet den gleichen geheimen Schlüssel zum Generieren und Validieren der Signatur
- Der geheime Schlüssel kann in diesem Fall auf der App-Konfigurationsseite konfiguriert werden.
-
Wechseln Sie zu Anmeldeoptionen Tab.
| Primärer Identitätsanbieter |
Wählen Sie die Standard-ID-Quelle aus der Dropdown-Liste für die Anwendung. Andernfalls wird den Benutzern der Standard-Anmeldebildschirm angezeigt und sie können ihren eigenen IDP auswählen. [Wählen Sie in diesem Fall miniOrange.]
|
| Authentifizierung erzwingen |
Wenn Sie diese Option aktivieren, müssen sich Benutzer jedes Mal anmelden, auch wenn ihre Sitzung bereits besteht. |
| Benutzerzuordnung aktivieren |
Aktivieren Sie diese Option, wenn die App bei der Antwort anzeigen soll, welcher Benutzer angemeldet ist. |
| Auf Endbenutzer-Dashboard anzeigen |
Aktivieren Sie diese Option, wenn Sie diese App im Endbenutzer-Dashboard anzeigen möchten. |
- Navigieren Endpunkte und kopieren Sie die folgenden Details:
-
Single Sign-On-URL:
- Diese URL wird verwendet, um die Benutzerauthentifizierung zum Abrufen des JWT-Tokens zu initiieren.
- Nehmen Sie redirect_uri als einen der Abfrageparameter.
- Nach erfolgreicher Authentifizierung auf der IDP-Seite wird im IDP eine aktive Benutzersitzung erstellt und der Benutzer mit dem JWT-Token zum Redirect_uri weitergeleitet.
-
-
Single-Logout-URL:
- Diese URL wird verwendet, um den Benutzer vom IDP abzumelden, indem die aktive Benutzersitzung entfernt wird.
- Nehmen Sie redirect_uri als einen der Abfrageparameter.
- Nach dem Entfernen der aktiven Benutzersitzung leitet der IDP den Benutzer zum Redirect_uri weiter.
-
Antwort-URL für vom IdP initiierte Abmeldung:
- Diese URL wird verwendet, um die Abmeldung einzuleiten, falls die JWT-Benutzeranmeldung über IDP initiiert wurde [Benutzer hat sich beim Dashboard angemeldet
und dann vom Dashboard aus den Login für die App initiiert.]
- Nachdem sich der Benutzer vom IDP abgemeldet hat, wird er zur Anmeldeseite des IDP-Dashboards weitergeleitet.
2. SSO in Angular konfigurieren
- Wählen Sie eine Komponente aus, die für die Überprüfung des JWT-Tokens verantwortlich ist, am besten die Anmeldekomponente.
- Importieren Sie die JWTBuilder Klasse vom JWT-Connector. Aus dem Pfad, in den sie in Schritt 1 der Voraussetzungen verschoben wurde.
import { JWTBuilder } from './path/to/jwt-connector';
- Sie können auf Ihrem Anmeldebildschirm eine Schaltfläche hinzufügen, die zur SSO-URL weiterleitet. Sie erhalten diese SSO-URL in Schritt 1 von „Konfigurieren Sie Ihre Anwendung in miniOrange“.
<button> onClick={sso}>Single Sign On</button>
function sso() {
window.location.href = window.location.href = ‘
’; //
example:https://login.xecurify.com/moas/broker/login/jwt/277898?client_id=AbIVW8A
MNTBzg2o7&redirect_uri=http://localhost:3000/login;
}
- Beim Klicken auf das SSO-Schaltfläche Der Benutzer wird zur Authentifizierung zum miniOrange-Portal weitergeleitet.
- Anschließend wird das JWT-Token an Ihre Anwendung an die Umleitungs-URL zurückgegeben, die Sie beim Hinzufügen Ihrer Anwendung in miniOrange festgelegt haben. In den folgenden Schritten werden wir dieses Token überprüfen und die Benutzerdetails abrufen.
- Sie müssen das hinzufügen x509-Zertifikat die Sie in Schritt 1 „Konfigurieren Sie Ihre Anwendung in miniOrange“ erhalten.
- Wenn das Token nun verifiziert ist, kann die Nutzlast, die aus den Benutzerdetails besteht, im lokalen Speicher gespeichert oder in eine Benutzerklasse serialisiert werden und der nun verifizierte Benutzer kann zum Startbildschirm Ihrer Anwendung umgeleitet werden.
3. SSO-Konfiguration testen
Testen Sie die SSO-Anmeldung bei Ihrem Angular-Konto mit miniOrange IdP:
Externe Referenzen
