Rollen in Erweiterungen der Nutzeroberfläche verwenden

Erweiterungen der Nutzeroberfläche in Stripe Apps können die Rolle des aktiven Nutzers/der aktiven Nutzerin im Dashboard lesen. Apps können für verschiedene Nutzerrollen unterschiedliche Funktionen bereitstellen.

Das SDK für Erweiterungen der Nutzeroberfläche stellt wertvolle Informationen über die Endkunden und Endkundinnen Ihrer App bereit. Das Feld roles des userContext-Objekts enthält eine Liste der aktiven Nutzerrollen. Sie können den Inhalt der App basierend auf der Rolle des Nutzers/der Nutzerin anpassen, indem Sie die Rollen im Nutzerkontext verwenden.

So ermitteln Sie die Dashboard-Rolle des Nutzers/der Nutzerin

Erweiterungen verfügen über die Eigenschaft userContext, die mit Informationen über den/die aktive/n Dashboard-Nutzer/in gefüllt ist. Dieses Objekt verfügt über das Feld roles, bei dem es sich um ein Array mit RoleDefinition-Objekten für jede Rolle handelt, die dem/der aktiven Nutzer/in zugeordnet wird.

Eine Rollendefinition hat folgende Felder:

Das Namensfeld enthält den Namen der Nutzerrolle, mit dem Sie die Funktionalität Ihrer Erweiterung der Nutzeroberfläche ändern können.

Nutzerdefinierte Nutzerrollen (nur für private Apps)

Jede Rollendefinition verfügt über ein Typ-Feld, das den Rollentyp angibt. Das Typ-Feld kann entweder ‘builtIn’ oder ‘custom’ sein. Da nutzerdefinierte Rollen spezifisch für ein bestimmtes Konto sind, sind diese Rollen nur für private Apps verfügbar.

Anpassen von Inhalten basierend auf der Dashboard-Rolle

Häufig werden diese Informationen für die bedingte Anzeige von Inhalten basierend auf der Nutzerrolle verwendet. Nachfolgend finden Sie eine Beispiel-App, die auf bestimmte Nutzerrollen zugeschnittene Inhalte anzeigt.

import { Badge, Box, Inline, ContextView } from "@stripe/ui-extension-sdk/ui";
import type { ExtensionContextValue } from "@stripe/ui-extension-sdk/context";

const App = ({ userContext }: ExtensionContextValue) => {
  const isAdmin = userContext?.roles?.some(role => role.name === 'Administrator');
  const isDeveloper = !isAdmin && userContext?.roles?.some(role => role.name === 'Developer');
  const isaAnotherRole = !isDeveloper && !isAdmin;

  return (
    <ContextView
      title="Role based access"
    >
      <Box>
        <Box css={{ paddingBottom: 'large'}}>Active user roles: {userContext?.roles?.map(role => <Badge key={role.name}>{role.name}</Badge>)}</Box>

        { isAdmin && (<Box>Only <Inline css={{ fontWeight: 'semibold' }}>admin</Inline> users can see this message.</Box>) }
        { isDeveloper && (<Box>Only <Inline css={{ fontWeight: 'semibold' }}>developers</Inline> users can see this message.</Box>) }
        { isaAnotherRole && (<Box>Only users who are not admins or developers can see this message.</Box>) }
      </Box>
    </ContextView>
  );
};

export default App;

Das Ergebnis der Beispiel-App beim Anzeigen der App als Admin-Nutzer/in