3.2.2 Authentifizierung Single Page Web Applikation

By Mayer, Wolfram

2 min

Add a reaction

Bitte beachten Sie, dass diese Authentifizierung noch nicht zur Verfügung steht.

Um ein Sage ID Access Token für eine Single Page Applikation (SPA) zu erhalten, muss OAuth 2.0 grant flow mit Proof Key for Code Exchange (RFC 7636) implementiert werden.

Mit PKCE erzeugt eine Applikation für jede Anfrage eine kryptographisch zufälligen Key, den code_verifier und transformiert einen Parameter code_challenge, der an Sage ID gesendet wir, um den authorization_code zu erhalten. Wenn eine Applikation den authorization_code erhält, wird dieser code und code_verifier an den Sage ID Token Endpunkt gesendet, um im Austausch die anfragten Token (Access Token) zu erhalten.

Dieser OAuth 2.0 Flow hat folgende Schritte:

1. Ihre SPA Applikation initiiert den Flow und leitet einen Benutzer zu Sage ID weiter - dem Endpunkt /authorize und sendet code_challenge und code_challenge_method Parameter.

2. Sage ID leitet einen Benutzer zu Ihrer SPA Applikation weiter mit einemauthorization_code Parameter.

3. Ihre SPA Applikation sendet authorization_code und code_verifier zusammen mit der redirect_uri und client_id zu Sage ID, dem /oauth/token Endpunkt.

4. Sage ID validiert diese Anfrage und gibt einen Access Token und optional ein Refresh Token an Ihre SPA Applikation zurück.

5. Ihre SPA Applikation kann mit dem Access Token eine Anfrage an die Sage 100 API senden mit dem Benutzerkontext.

OAuth 2.0 Flow

Folgende Postman Collection enthält OAuth 2.0 Flow auch für die Single Page Applikation für die noch ein Sage ID Client beantragt werden muss.

Open

Implementierung

Um ein Sage ID Access Token für eine Single Page Applikation (SPA) zu erhalten, muss der OAuth 2.0 Grant flow mit Proof Key for Code Exchange (Authorization Code) implementiert werden.

Um die Implementierung zu standardisieren und zu vereinfachen, wird die Bibliothek @auth0/auth0-react verwendet.

1. Installation der Bibliothek

Öffnen Sie in einem Terminal Ihrer Wahl den Ordner der Single Page Application (SPA) und installieren Sie das Paket.

npm install @auth0/auth0-react --save

Hinweis

Die Bibliothek enthält alle Typisierungen, sodass auch bei er Verwendung von typescript keine weiteren Installationen notwendig sind.

2. Initialisierung der Bibliothek

Die Bibliothek stellt einen Provider zur Verfügung, der an einer hohen Stelle platziert werden sollte. Diesem Provider sind die durch Sage bereitgestellten Parameter mitzuteilen.

<Auth0Provider domain={auth0Configuration.domain} clientId={auth0Configuration.clientId} audience={auth0Configuration.audience} redirectUri={window.location.origin}> <App /> </Auth0Provider>

3. Verwendung

In allen innerhalb des Providers verwendeten Komponenten steht ab sofort ein Hook zur Verfügung, der die gesamten Funktionen zur Authentifizierung beinhaltet.

const { getAccessTokenSilently, getAccessTokenWithPopup, getIdTokenClaims, loginWithRedirect, loginWithPopup, logout, buildAuthorizeUrl, buildLogoutUrl, handleRedirectCallback } = useAuth0();

Collapse action bar

View all comments

Open Details Panel

Create page

Open Rovo Chat

Add a comment

Add a reaction