React Single Sign-On SSO
Vereinfachen Sie die Benutzerauthentifizierung in Ihren React-Anwendungen mit der React SSO-Lösung (Single Sign-On) von miniOrange. Unsere React SSO-Lösung ermöglicht Benutzern den sicheren Zugriff auf Ihre React-App mit nur einem Satz Anmeldeinformationen über ihren bestehenden Identitätsanbieter (IdP). Dadurch entfällt die Notwendigkeit mehrerer Passwörter und der Anmeldevorgang wird deutlich vereinfacht. React SSO unterstützt JWT-basierte Authentifizierung und lässt sich nahtlos in gängige Identitätsquellen wie Microsoft Entra ID, AWS Cognito, Active Directory, LDAP und weitere integrieren.
Mit der miniOrange React SSO-Lösung können Unternehmen die Authentifizierung zentralisieren, die Sicherheit verbessern und den Benutzerzugriff über verschiedene Anwendungen hinweg optimieren. Die Lösung unterstützt externe Benutzerverzeichnisse, Social-Login-Anbieter und flexible Optionen für das Benutzer-Onboarding und eignet sich daher ideal für interne und kundenorientierte React-Anwendungen. Nachfolgend finden Sie die Einrichtungsanleitung für React SSO.
Voraussetzungen:
- Herunterladen der JWT-Connector.
- Kopieren Sie den JWT-Connector in den src-Ordner Ihres Projekts.
- Installieren Sie alle Abhängigkeiten.
npm install --save base64url jsrsasign jssha utf8
Folgen Sie der unten stehenden Schritt-für-Schritt-Anleitung für React Single Sign-On (SSO).
1. Konfigurieren Sie React 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 Reagieren 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) und 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 React 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 aus dem 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 = '<YOUR SSO URL>';
// 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.
- Das JWT-Token wird dann an die Umleitungs-URL zurückgesendet, 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.
const Login = () => {
// The SearchParams hook lets us work with the query string of a URL.
let [searchParams, setSearchParams] = useSearchParams();
const cert = "<PLACE YOUR CERTIFICATE STRING HERE>";
var verified = false;
// Gets the id_token parameter from the query URL
let jwt = searchParams.get("id_token");
if (jwt) {
var jwtBuilder = new JWTBuilder();
// Initialize the JWT
jwtBuilder.parseJwt(jwt);
// set the secret that was shared by your IdP
jwtBuilder.setSecret(cert);
try {
// Compare the hashed jwt with the one received
verified = jwtBuilder.verifyJwt();
} catch (error) {
console.error(error);
}
}
useEffect(() => {
if (verified) {
// Once you find the JWT is verified, you can go ahead and get the data from JWT
let user = jwtBuilder.getPayload();
let username = user.username;
let email = user.email;
// You can create a user session here if required and navigate to the home page
}
}, [verified]);
};
- Wenn das Token verifiziert ist, kann die Nutzlast, die die Benutzerdetails enthält, im lokalen Speicher gespeichert oder in eine Benutzerklasse serialisiert werden, und der nun verifizierte Benutzer kann zum Startbildschirm Ihrer Anwendung weitergeleitet werden.
3. SSO-Konfiguration testen
Testen Sie die SSO-Anmeldung bei Ihrem React-Konto mit miniOrange IdP:
Verwenden der IDP-initiierten Anmeldung
- Melden Sie sich mit Ihren Anmeldeinformationen bei miniOrange IdP an.

- Klicken Sie im Dashboard auf Reagieren Anwendung, die Sie hinzugefügt haben, um die SSO-Konfiguration zu überprüfen.

4. Konfigurieren Sie Ihr Benutzerverzeichnis (optional)
miniOrange bietet Benutzerauthentifizierung aus verschiedenen externen Quellen, darunter Verzeichnisse (wie ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito usw.), Identitätsanbieter (wie Okta, Shibboleth, Ping, OneLogin, Keycloak), Datenbanken (wie MySQL, MariaDB, PostgreSQL) und viele mehr . Sie können Ihr bestehendes Verzeichnis/Ihren Benutzerspeicher konfigurieren oder Benutzer in miniOrange hinzufügen.
- Klicken Sie auf Identitätsanbieter >> Identitätsanbieter hinzufügen im linken Menü des Dashboards

- Wählen Sie unter „Identitätsanbieter auswählen“ AD/LDAP-Verzeichnisse aus dem Dropdown.

- Dann suchen Sie nach AD/LDAP und klicke es an.

- LDAP-KONFIGURATION IN MINIORANGE SPEICHERN: Wählen Sie diese Option, wenn Sie Ihre Konfiguration in miniOrange behalten möchten. Befindet sich das Active Directory hinter einer Firewall, müssen Sie die Firewall öffnen, um eingehende Anfragen an Ihr AD zuzulassen.
- SPEICHERN SIE DIE LDAP-KONFIGURATION VOR ORT: Wählen Sie diese Option, wenn Sie Ihre Konfiguration in Ihrem Gebäude behalten und nur den Zugriff auf AD innerhalb des Gebäudes zulassen möchten. Sie müssen herunterladen und installieren miniOrange-Gateway auf Ihrem Gelände.

- AD/LDAP eingeben Display Name und Identifizieren Namen.
- Auswählen Verzeichnistyp as Active Directory.
- Geben Sie die LDAP-Server-URL oder IP-Adresse für das LDAP ein Server-URL Feld.
- Klicken Sie auf Verbindung testen Klicken Sie auf die Schaltfläche, um zu überprüfen, ob die Verbindung mit Ihrem LDAP-Server.

- Gehen Sie in Active Directory zu den Eigenschaften von Benutzercontainern/OUs und suchen Sie nach dem Distinguished Name-AttributDas Bind-Konto sollte über die erforderlichen Mindestleseberechtigungen in Active Directory verfügen, um Verzeichnissuchen zu ermöglichen. Wenn der Anwendungsfall die Bereitstellung umfasst (z. B. Erstellen, Aktualisieren oder Löschen von Benutzern oder Gruppen), muss dem Konto auch die entsprechenden Schreibberechtigungen erteilt werden.

- Geben Sie das gültige Kennwort für das Bind-Konto ein.
- Klicken Sie auf Testen der Anmeldeinformationen für das Bind-Konto Schaltfläche, um Ihre LDAP-Bind-Anmeldeinformationen für die LDAP-Verbindung zu überprüfen.

- Suchbasis ist die Stelle im Verzeichnis, an der die Suche nach einem Benutzer beginnt. Sie erhalten diese von derselben Stelle, an der Sie Ihren Distinguished Name haben.

- Wählen Sie einen geeigneten Suchfilter aus dem Dropdown-Menü. Wenn Sie Benutzer im Einzelgruppenfilter or Benutzer im Mehrfachgruppenfilter, ersetze dasGruppen-DN> im Suchfilter mit dem Distinguished Name der Gruppe, in der Ihre Benutzer vorhanden sind. Um benutzerdefinierte Suchfilter zu verwenden, wählen Sie „Schreiben Sie Ihren benutzerdefinierten Filter“ Option und passen Sie sie entsprechend an.

- Klicken Sie auf Weiter oder gehen Sie zum Anmeldeoptionen Tab.
- Sie können beim Einrichten von AD auch folgende Optionen konfigurieren. Aktivieren Aktivieren Sie LDAP um Benutzer von AD/LDAP zu authentifizieren. Klicken Sie auf das Weiter Schaltfläche, um einen Benutzerspeicher hinzuzufügen.

Hier ist die Liste der Attribute und was sie bewirken, wenn wir sie aktivieren. Sie können sie entsprechend aktivieren/deaktivieren.
| Attribut |
Beschreibung |
| Aktivieren Sie LDAP |
Alle Benutzerauthentifizierungen werden mit LDAP-Anmeldeinformationen durchgeführt, wenn Sie es aktivieren |
| Fallback-Authentifizierung |
Wenn die LDAP-Anmeldeinformationen fehlschlagen, wird der Benutzer über miniOrange authentifiziert. |
| Administratoranmeldung aktivieren |
Wenn Sie dies aktivieren, wird Ihr miniOrange Administrator-Login über Ihren LDAP-Server authentifiziert. |
| Benutzern IdP anzeigen |
Wenn Sie diese Option aktivieren, ist dieser IdP für Benutzer sichtbar |
| Benutzer in miniOrange synchronisieren |
Benutzer werden in miniOrange nach der Authentifizierung mit LDAP erstellt |
- Klicken Sie auf Weiter oder gehen Sie zum Attribute Tab.
Attributzuordnung aus AD
Benutzerimport und Provisionierung aus AD
- Wenn Sie die Bereitstellung einrichten möchten, hier klicken für detaillierte Informationen. Wir werden diesen Schritt vorerst überspringen.

Kennwortrichtlinie aus AD importieren
- Wenn Sie Ihre Active Directory-Kennwortrichtlinie in miniOrange importieren möchten, hier klicken für detaillierte Informationen. Wir werden diesen Schritt vorerst überspringen.

Testverbindungen
- Sie sehen eine Liste der Verzeichnisse unter Identitätsanbieter. Wählen Sie im Dropdown-Menü aus AD/LDAP-Verzeichnisse, suchen Sie nach Ihrem konfigurierten Verzeichnis, klicken Sie auf die drei Punkte daneben und wählen Sie Verbindung testen.

- Es wird ein Popup-Fenster angezeigt, in dem Sie aufgefordert werden, einen Benutzernamen und ein Kennwort einzugeben, um Ihre LDAP-Konfiguration zu überprüfen.

- On Erfolgreich Bei der Verbindung mit dem LDAP-Server wird eine Erfolgsmeldung angezeigt.

Testen Sie die Attributzuordnung
- Sie sehen eine Liste der Verzeichnisse unter Identitätsanbieter. Wählen Sie im Dropdown-Menü aus AD/LDAP-Verzeichnisse, suchen Sie nach Ihrem konfigurierten Verzeichnis, klicken Sie auf die drei Punkte daneben und wählen Sie Testen Sie die Attributzuordnung.

- Ein Popup wird angezeigt, in dem Sie einen Benutzernamen eingeben und auf klicken können. Test.

- Das Ergebnis der Testattributzuordnung wird angezeigt.

Die Konfiguration „AD als externes Verzeichnis einrichten“ ist abgeschlossen.
Hinweis: In unserer Anleitung erfahren Sie , wie Sie LDAP auf einem Windows-Server einrichten.
miniOrange lässt sich in verschiedene externe Benutzerquellen wie Verzeichnisse, Identitätsanbieter usw. integrieren.
5. Einmaliges Abmelden (optional)
Wenn Sie sicherstellen möchten, dass alle Sitzungen (SP und IDP) für einen Benutzer ordnungsgemäß geschlossen werden, können Sie Single Logout mit den folgenden Schritten konfigurieren.
A. Konfigurieren Sie miniOrange mit dem IdP SLO-Endpunkt:
- Zurück Nach der Identitätsanbieter und bearbeiten Sie den konfigurierten Identitätsanbieter.
- Finden Sie die Option Einzelne Abmelde-URL und konfigurieren Sie die von Ihrem IdP bereitgestellte SLO-URL.
B. Konfigurieren Sie IdP mit dem MiniOrange SLO-Endpunkt:
- Konfigurieren Sie Ihren Identitätsanbieter mit dem unten stehenden Single-Logout-Endpunkt.
https://login.xecurify.in/moas/broker/login/saml_logout/<your-customer-id>
- Sie finden das die SSO-Bindung Option zum Konfigurieren des Abmeldebindungstyps auf entweder UMLEITEN or jetzt lesen.
C. Konfigurieren Sie Ihre JWT-Anwendung mit SLO-Endpunkt:
- Konfigurieren Sie Ihre JWT-Anwendung mit dem folgenden Single-Logout-Endpunkt.
https://login.xecurify.in/moas/broker/login/jwt/logout/<your-customer-id>?redirect_uri=<redirect-url>
| Ihre Kundennummer |
Sie müssen hier die Kunden-ID Ihres miniOragne-Kontos eingeben. |
| Umleitungs-URL |
Dies sollte durch die Abmelde-URL Ihrer JWT-Anwendung ersetzt werden. |
Externe Referenzen