> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 専用スコープ

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<RelatedLinks
  title="必須のガイド"
  items={[
{ label: translate("Installation"), href: "/guides/embed/ui-elements/installation", badge: "GUIDE" }
]}
/>

Box UI Elementsを使用する際に、開発者の多くが、Boxが定義した[アクセスレベル][acl]とは異なる独自の権限モデルを実装できることに関心を示します。

<Link href="/guides/authentication/tokens/downscope">ダウンスコープ</Link> (トークン交換とも呼ばれます) とは、開発者がアクセストークンに対する権限をより詳細に制限できるBoxのメカニズムです。このメカニズムを使用することで、開発者はBox Platform上に独自の権限モデルを構築できます。

## スコープとUI Element

このプロセスを容易にするために、BoxではAPIスコープの新しいセットを作成しました。これにより、開発者は、UI Elementを利用しているアプリケーションでエンドユーザーが使用できるUIコントロールを制御できます。

Box UI Elementは、これらのスコープによって適用される権限を配慮するよう設計されています。したがって、対応する機能をトークンが許可するかどうかに応じて、UIコントロールが自動的に有効または無効になります。

このほかにも、これらの新しいスコープには利点があります。トークンのスコープは、アプリケーションでエンドユーザーにアクセスを許可する操作の厳密なセットに限定されるため、知識のあるエンドユーザーは、トークンを使用してAPIから直接アクセスすることはできません。このように、アプリケーションの安全性を強化できます。

## スコープの原則

新しいスコープは、以下の原則を念頭に置いて設計されています。

* **すべてのスコープはモジュール化され、厳密には累積される:** 開発者はトークン交換リクエストで複数のスコープを組み合わせて、必要な機能セットを含むトークンを生成できます。また、混乱を避けるために、2つのスコープに同じ権限を設定しないでください。
* **スコープはUI Elementでの特定の操作に直接マップされる:** つまり、このスコープをトークンに追加すると、特定の操作が有効になります。特定のUI Elementで実行できるのは一部の操作のみのため、一部のスコープは意味を持ってこのUI Elementのみに適用される可能性があります。
* **スコープには、対応する操作の実行に必要な最小限の権限セットが含まれている:** アプリケーションのエンドユーザーの一部がAPIに対して直接トークンを使用しても、UI Elementを介して提供するよう意図した機能以外にはアクセスできません。
* **各UI Elementには、そのUI Elementが正常に機能するために必要なすべての権限がカプセル化されている「基本スコープ」が必要:** トークンの権限が少なくなると、UI Elementに対する基本的な操作が機能しません。このスコープを必ずトークン交換リクエストに含める必要があります。

上記の内容を踏まえて、各UI Elementには、以下の2種類のスコープを追加しています。

### 基本スコープ

各UI Elementには「基本スコープ」があります。これにより、そのUI Elementが動作するために必要な最小限の権限のセットが提供されます。そのため、この「基本スコープ」は常にトークン交換リクエストに存在する必要があります。各UI Elementが動作するための基本の権限セットは異なる場合があるため (たとえば、コンテンツアップローダーUI Elementはプレビュー権限を必要としない)、UI Elementがそれぞれ独自の基本スコープを持っている可能性があります。

### 機能のスコープ

基本スコープ以外に、機能レベルのスコープも導入されました。機能スコープを基本スコープと組み合わせる際、UI Element内で追加の機能が有効になります。また、ユーザーには、ダウンスコープされたトークンに追加された機能スコープで規定された操作を実行する権限が付与されます。基本スコープと同様、機能スコープもほとんどがUI Elementごとに異なります。機能スコープは厳密には累積されるため、(ドキュメントに別途記載がない限り) スコープに対するアクセス権限のみをユーザーに付与すると、そのユーザーには対応する操作のみを実行する権限が付与されることを想定できます。

基本スコープと機能スコープについて理解したところで、各UI Elementに関するドキュメントを参照してその専用スコープの詳細を確認してください。

[acl]: https://support.box.com/hc/ja/articles/360044196413-コラボレータの権限レベルについて

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("UI Elements"), href: "/guides/embed/ui-elements/index", badge: "GUIDE" }
]}
/>