Severin Hasler : Bitte hier eintragenDie 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. |
...