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
| Info |
|---|
Das Icon für Microsoft ist standardmässig vorhanden. Falls Sie ein anderes Icon benötigen, müssen Sie ein <svg>, Bild oder Bilderlink im String Format angeben. |
| Code Block | ||
|---|---|---|
| ||
import { IThirdPartyOidcButton } from '@quino/ecui';
import { 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. |
...
Es ist möglich, Benutzer durch einen oder mehrere externe Services oder Anbieter zu authentifizieren. Dies kann den Login-Prozess verkürzen und vereinfachen, bietet aber eine grössere Angriffsfläche für böswillige Akteure.
Anforderungen
Aktuell wird nur das OpenID Connect Protokoll unterstüzt
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 erstezt werden, um z.B. eine “silent registration“ zu ermöglichen. Mehr dazu im TODO
Konfiguration
Die Registration der verschiedenen Services / Anbietern erfolgt in der appsettings.json Datei der VS-Solution.
Beispiel:
| Code Block | ||
|---|---|---|
| ||
"ThirdPartyAuthentication": {
"Microsoft": {
"DiscoveryUrl": "https://login.microsoftonline.com/{tenant_id}/v2.0/.well-known/openid-configuration",
"ClientId": "{client_id}",
"ClientSecret": "{client_secret}",
"RedirectUrl": "https://QuinoProject.com/api/v1/thirdParty/auth/callback",
"Icon": "https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/microsoft.svg",
"Caption": "Microsoft Login"
}
} |
Schlüssel
DiscoverUrl
Diese URI wird durch das OpenID Connect Protokol vorgegeben.