Die Authentifizierung via 3rd Party OpenId Provider ist grundsätzlich möglich, muss jedoch selber implementiert werden (eigener Controller, etc.). Die visuelle Anbindung hingegen, kann mit relativ wenig Aufwand erledigt werden. Dafür müssen Buttons bei der Applikation registriert werden, welche ein bestimmtes Interface (IThirdPartyOidcButton) implementieren müssen. Diese werden dann im Login Dialog korrekt angezeigt.
Beispiel
MicrosoftOidcButton.ts
...
Es ist möglich, Benutzer durch einen oder mehrere externe Anbieter zu authentifizieren. Dies kann den Login-Prozess verkürzen und vereinfachen. Zusätzlich ermöglicht diese Art der Authentifizierung sogenannte Single-Sign-On Szenarien.
Anforderungen
Aktuell wird nur das OpenID Connect Protokoll unterstützt
Standardmässig, müssen die Benutzer in der Applikation vorhanden sein. Der gemeinsame Nenner dabei ist die E-Mail Adresse. Dies kann durch eine eigene Implementation erweitert werden, um z.B. eine “silent registration“ zu ermöglichen. Mehr dazu hier: Externe Authentifizierung erweitern
Konfiguration
Die Registration der verschiedenen externen Anbietern erfolgt in der appsettings.json -Datei der Server-Solution. Dazu muss ein neuer Block mit dem Schlüssel ThirdPartyAuthentication hinzugefügt werden.
Beispiel:
| Info |
|---|
Der Schlüssel “Microsoft“ ist hier nur ein Beispiel und kann durch einen beliebigen Text ersetzt werden. Er dient lediglich als interner Identifikator. |
| Code Block | ||||
|---|---|---|---|---|
| import
| |||
"ThirdPartyAuthentication": { IThirdPartyOidcButton } from '@quino/ecui'; import "Microsoft": { injectable } from 'inversify'; export const MicrosoftOidcButtonSymbol = Symbol.for('MicrosoftOidcButton'); @injectable() export class MicrosoftOidcButton implements IThirdPartyOidcButton { identifier = 'MicrosoftOidcButton'; configuration = { text: 'QuinoThirdPartyOidcButton.Microsoft', icon: 'Microsoft', link: 'https://microsoft.com' }; } |
App.tsx
| Code Block | ||
|---|---|---|
| ||
app.registerSingle<IThirdPartyOidcButton>(MicrosoftOidcButtonSymbol, MicrosoftOidcButton);
app.registerStartupAction(Symbol.for('custom_oidc_buttons'), (app) => {
const thirdPartyOidcButtonProvider = app.get<IThirdPartyOidcButtonProvider>(IThirdPartyOidcButtonProviderSymbol);
thirdPartyOidcButtonProvider.register(app.get<IThirdPartyOidcButton>(MicrosoftOidcButtonSymbol), Symbol.for('MicrosoftOidcButton'));
})
.moveTo(InitializationGroup); |
Der Login Dialog würde danach wie folgt aussehen:
| Info |
|---|
Das Interface verfügt ebenfalls über ein `customRender` prop, mit dem Sie die standard Renderfunktion überschreiben können. |
...
"DiscoveryUrl": "https://login.microsoftonline.com/{tenant_id}/v2.0/.well-known/openid-configuration",
"ClientId": "{client_id}",
"ClientSecret": "{client_secret}",
"RedirectUrl": "https://{your_application_uri}/api/v1/thirdParty/auth/callback",
"Icon": "https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/microsoft.svg",
"Caption": "Microsoft Login"
},
{...}
} |
Schlüssel
| Diese URI wird durch das OpenID Connect Protokol vorgegeben und ermöglicht das automatische Abrufen der verschiedenen Endpunkte für Authentifizierung, Benutzerprofil, etc. |
| Die Client-Id wird von Ihrem Anbieter ausgestellt und identifiziert Ihre OpenID Connect Instanz. |
| Das Client-Secret wird von Ihrem Anbieter ausgestellt und dient als Passwort zur Authentifizierung Ihrer OpenID Connect Instanz. |
| An diese URI wird eine Nachricht gesendet, nachdem sich der Benutzer erfolgreich am externen Anbieter angemeldet hat. |
| Das Icon welches auf der linken Seite des alternativen Login-Buttons des Client’s angezeigt wird. Der Wert kann eine |
| Der Text, welcher innerhalb des alternativen Login-Buttons des Client’s angezeigt wird. Es kann ebenfalls ein Übersetzungsschlüssel angegeben werden. |
Resultat
Nach erfolgter Konfiguration und einem Neustart des Servers, ergänzt sich der Login-Dialog automatisch mit den alternativen Login-Buttons.
Beispiel:
...