Einführung

Erweiterungen erlauben es die Funktionalität der Authority zu erweitern. Erweiterungen können

• Neue Login Methoden (External Login Providers) hinzufügen,
• Neue Verwaltungen für Login Methoden (External Login Provider Manager) hinzufügen und
• Anpassungen am Frontend vornehmen

Aufbau einer Erweiterung

Erweiterungen bestehen aus einem Ordner, welcher eine package.json (aus dem node Ökosystem) und weitere Dateien enthält.

Die package.json enthält wichtige Metadaten Informationen zur Erweiterung. Folgende Schlüssel werden aus der package.json benötigt:

Jede Erweiterung beinhaltet einen Frontend- und Backendteil. Über den mainBackend können Erweiterungen den Serverteil der Authority erweitern. Das mainFrontend Modul wird hingegeben mit in das React Frontend der Authority geladen und kann dort Änderungen vornehmen.

Vorraussetzungen für den Quelltext

Der Quelltext der Erweiterung wird durch die Authority geladen. Für das Laden des Quelltextes ist es notwendig, dass die Erweiterung ihre Funktionen im commonjs oder commonjs2 Format bereitstellt.

Der einfachste Weg dazu ist es einen Bundler zu verwenden. In diesem Beispiel wird Webpack verwendet. Die folgende Konfiguration erlaubt es TypeScript, React und Sass zu verwenden. Die Einstiegspunkte der Erweiterung liegen in src/frontend/index.tsx und src/backend/index.ts.

const path = require('path');
 
const buildConfig = (entry, outputFilename) => {
  return {
    entry: entry,
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: outputFilename,
      library: {
        type: 'commonjs2',
      },
    },
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.ts(x)?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    devtool: false,
  };
};
 
const config = [
  {
    ...buildConfig('./frontend/index.tsx', 'frontend.js'),
    externals: {
      react: 'react',
    },
  },
  {
    ...buildConfig('./backend/index.ts', 'backend.js'),
    target: 'node',
  },
];
 
module.exports = config;