Frontend

Das Frontend der Authority ist mit React realisiert. Möchte das Backend eine Seite anzeigen, wird die React Applikation mit dem entsprechenden Parametern ausgeliefert. Die konkrete Seite wird beim Rendern über den page Parameter bestimmt. Alle von dem Standard Frontend verwendeten Komponenten werden in einem Registar hinterlegt. Erweiterungen können eigene Seiten hinzufügen, Komponenten aus dem Registar überschreiben oder neue Komponenten hinzufügen.

Einstiegpunkt

Der Einstiegspunkt einer Frontend Erweiterung muss wie folgt aufgebaut sein:

src/frontend/index.tsx


const extensionModuleExport: FrontendExtensionModuleExport = {
  onLoad: (authority) => {
    // ...
  },
};
 
export default extensionModuleExport;

Der onLoad Callback wird beim Laden der Erweiterung aufgerufen. Der Parameter authority dient als Schnittstelle zu den anderen Erweiterungen und der Authority.

Aufbau der Registry

Die ComponentRegistry beinhaltet alle von der Authority verwendeten Komponenten. Jede Seite (page) wird dabei auch als Komponente betrachtet.

Standardmäßig beinhaltet der Registar folgende Komponenten:

Komponente	Beschreibung
`app`	Die Hauptkomponente der Authority.
`page:home`	Die Startseite der Authority.
`page:session_end`	Die Seite, welche angezeigt wird, wenn der Benutzer sich abmelden möchte.
`page:session_end_success`	Die Seite, welche angezeigt wird, wenn der Benutzer sich erfolgreich abgemeldet hat.
`page:error`	Die Seite, welche angezeigt wird, wenn ein Fehler auftritt.
`page:consent`	Die Seite, welche angezeigt wird, wenn der Benutzer die Einwilligung erteilen muss.

Erstellen einer neuen Seite

Möchte eine Erweiterung eine neue Seite zur Verfügung stellen, muss diese lediglich in die Komponentenliste des Registars hinzugefügt werden. Die Komponente muss dabei den page:-Prefix haben. Die Komponente muss dabei ein React-Element zurückgeben.

Registierung der Seite im Frontend


type PageFlowPromptLoginProps = {
  uid: string;
  routerPrefix: string;
}
 
function PageFlowPromptLogin({ uid, routerPrefix} : PageFlowPromptLoginProps): JSX.Element {
  return (
    <form autoComplete='off' action={`${routerPrefix ?? ''}/flow/${uid}/start_external_login`} method='post'>
      <button type='submit'>
        <span>Sign in with Google</span>
      </button>
    </form>
  );
}
 
authority.componentRegistry.register('page:login_google', PageFlowPromptLogin);

Im Backendteil der Erweiterung kann dann die Seite über den page-Parameter aufgerufen werden.

Aufruf der Seite im Backend


const frontend = await renderPage({ interaction, uid }, 'login_google', { interaction });

Überschreiben einer Komponente

Wenn nötig kann auch eine bestehende Komponente überschrieben werden. Dazu wird einfach der Name der Komponente bei dem Registrieren angegeben.

Überschreiben der Komponente im Frontend


import { MyCustomHomeComponent } from '...';
 
authority.componentRegistry.register('page:home', MyCustomHomeComponent);