UI 拡張機能で役割を使用する

UI 拡張機能にユーザーの役割を組み込んで、さまざまな役割に合わせて機能を調整する方法をご紹介します。

Stripe Apps の UI 拡張機能を使用して、ダッシュボードで有効なユーザーの役割を読み取ることができます。アプリでは、ユーザーの個々の役割に対してさまざまな機能を公開できます。

UI 拡張機能 SDK は、アプリのエンドユーザーに関する有用な情報を提供します。userContext オブジェクトの roles フィールドには、有効なユーザーの役割のリストが示されます。ユーザーのコンテキストで役割を使用し、ユーザーの役割に基づいてアプリのコンテンツを調整できます。

ダッシュボードに関するユーザーの役割を決定する方法

拡張機能には、有効なダッシュボードユーザーに関する情報が設定される userContext プロパティがあります。このオブジェクトには、有効なユーザーに割り当てられた役割ごとの RoleDefinition オブジェクトの配列である roles フィールドがあります。

役割の定義には以下のフィールドがあります。

フィールド名	タイプ	例
タイプ	‘builtIn’ \| ‘custom’	builtIn
役割の種類を指定します。カスタム役割はプライベートアプリにのみ使用できます。
名前	文字列	開発者
ユーザーの役割の名前です。

名前フィールドにはユーザーの役割の名前を指定します。このフィールドを使用して、UI 拡張機能の機能を変更できます。

カスタムユーザーの役割 (プライベートアプリのみ)

それぞれの役割の定義には、役割のタイプを指定するタイプフィールドがあります。タイプフィールドは、‘builtIn’ または ‘custom’ のいずれかです。カスタム役割は特定のアカウントに特有のものであるため、これらの役割はプライベートアプリにのみ使用できます。

ダッシュボードでの役割に基づいてコンテンツを調整する

この情報は一般的に、ユーザーの役割に基づいてコンテンツを条件付きで表示するために使用します。以下のアプリは、特定のユーザーの役割に合わせてコンテンツを表示するサンプルアプリです。

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 role(s): {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;

管理者ユーザーとしてアプリを表示する場合のサンプルアプリの結果

UI 拡張機能で役割を使用する

UI 拡張機能にユーザーの役割を組み込んで、さまざまな役割に合わせて機能を調整する方法をご紹介します。

ダッシュボードに関するユーザーの役割を決定する方法

カスタムユーザーの役割 (プライベートアプリのみ)

ダッシュボードでの役割に基づいてコンテンツを調整する

参照情報