Utilisation de rôles dans les extensions d'interface utilisateur

Les extensions d’interface utilisateur des Stripe Apps peuvent lire le rôle de l’utilisateur actif dans le Dashboard. Les applications peuvent exposer différentes fonctionnalités à différents rôles d’utilisateur.

Le SDK des extensions d’interface utilisateur fournit de précieuses informations sur l’utilisateur final de votre application. Le champ roles de l’objet userContext dresse la liste des rôles de l’utilisateur actif. Vous pouvez personnaliser le contenu de l’application en fonction du rôle de l’utilisateur, en utilisant les rôles dans le contexte de l’utilisateur.

Comment déterminer le rôle du Dashboard de l’utilisateur

Les extensions possèdent une propriété userContext renseignée avec des informations sur l’utilisateur actif du Dashboard . Cet objet possède un champ roles, qui est un tableau d’objets RoleDefinition pour chaque rôle auquel l’utilisateur actif est attribué.

Une définition de rôle comprend les champs suivants :

Le champ name fournit l’intitulé du rôle d’utilisateur, et vous pouvez l’utiliser pour modifier les fonctionnalités de votre extension d’interface utilisateur.

Rôles d’utilisateur personnalisés (applications privées uniquement)

Chaque définition de rôle possède un champ type, qui spécifie le type du rôle. Ce champ peut prendre la valeur « builtIn » ou « custom ». Les rôles personnalisés étant propres à un compte donné, ils ne sont disponibles que pour les applications privées.

Personnalisation du contenu en fonction du rôle du Dashboard

Une utilisation courante de ces informations consiste à les mettre à profit pour un affichage conditionnel du contenu en fonction du rôle de l’utilisateur. Voici une application test qui affiche un contenu adapté à des rôles d’utilisateurs particuliers.

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;

Résultat de l’application test lors de l’affichage de l’application en tant qu’utilisateur administrateur