> ## 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.

# JWTを使用した設定

export const SignupCTA = ({children}) => {
  return <div className="flex flex-wrap items-center gap-4 p-5 rounded-lg border border-gray-200 dark:border-gray-700 my-6" style={{
    background: "linear-gradient(135deg, rgba(0, 97, 213, 0.06), rgba(0, 97, 213, 0.02))"
  }}>
      <div className="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300" style={{
    minWidth: "280px"
  }}>
        {children}
      </div>
      <div className="flex flex-col items-center gap-2">
        <a href="https://account.box.com/signup/developer#ty9l3" className="signup-cta-button inline-flex items-center whitespace-nowrap px-5 py-2 text-sm font-semibold text-white no-underline">
          {translate("Get started for free")}
        </a>
        <a href="https://account.box.com/developers/console" className="signup-cta-login text-xs text-gray-500 dark:text-gray-400 no-underline whitespace-nowrap">
          {translate("Already have an account? Log in")}
        </a>
      </div>
    </div>;
};

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("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("Platform App"), href: "/guides/applications/platform-apps/index", badge: "GUIDE" },
{ label: translate("Platform App Approval"), href: "/guides/authorization/platform-app-approval", badge: "GUIDE" }
]}
/>

Platformアプリは、<Link href="/guides/authentication/jwt">JWT</Link>によるサーバー側認証を使用するよう設定できます。

<Card href={localizeLink("/guides/authentication/jwt")} arrow title="JWT認証のしくみを確認する" />

## 前提条件

サーバー側認証を使用してPlatformアプリを設定するには、Box Enterpriseアカウントから[開発者コンソール][devconsole]にアクセスできることを確認する必要があります。または、[Developerアカウント][devaccount]にサインアップすることもできます。

<SignupCTA>
  Boxアカウントをまだ持っていない場合は、無料のDeveloperアカウントを作成すると、開発者コンソールにアクセスして、JWTアプリケーションの作成と構成を行うことができます。
</SignupCTA>

## アプリの作成手順

### 開発者コンソールへの移動

Boxにログインし、[開発者コンソール][devconsole]に移動します。\[**Platformアプリ**] を選択し、\[**新規アプリ**] をクリックします。

### アプリの新規作成

\[**アプリの新規作成**] 画面で、アプリ名を入力し、\[**アプリの種類**] ドロップダウンから \[**サーバー認証 - JWT**] を選択します。

<Frame border>
  <img src="https://mintcdn.com/box/J0IlfoFf_v0hLHOU/images/guides/authentication/create-new-app.png?fit=max&auto=format&n=J0IlfoFf_v0hLHOU&q=85&s=e1118ea7200b15165c48f314ea4e9d0f" alt="[アプリの新規作成] 画面" width="1024" height="891" data-path="images/guides/authentication/create-new-app.png" />
</Frame>

<Warning>
  選択すると、新しいアプリケーションを作成しない限り、別の認証方法に変更できません。
</Warning>

## 公開キーと秘密キーのペア

<Info>
  このセクションは、認証方法として \[サーバー認証 (クライアント資格情報許可)] を選択した場合はスキップできます。
</Info>

\[サーバー認証 (JWT使用)] を利用してPlatformアプリを作成すると、[開発者コンソール][devconsole]の \[構成] タブでキーペアを生成できます。また、独自のキーペアを生成して、その公開キーをBoxに提供することもできます。選択する方法に関係なく、セキュリティの目的で、Boxアカウントでは[2要素認証][2fa]を有効にしておく必要があります。

### キーペアの生成 (推奨)

Boxで生成されたキーペアを使用する場合は、[開発者コンソール][devconsole]に移動し、そこで構成ファイルを生成できます。このファイルには、公開/秘密キーペアのほか、認証に必要なその他さまざまなアプリケーションの詳細が含まれています。

このファイルを生成するには、[開発者コンソール][devconsole]の \[**構成**] タブに移動し、\[**公開キーの追加と管理**] セクションまで下にスクロールします。

<Frame border width="600" center>
  <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-add-keys.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=bcd5821de9325694967f83c381e27e23" alt="キーの追加と管理" width="1400" height="476" data-path="images/guides/authentication/app-add-keys.png" />
</Frame>

\[**公開/秘密キーペアを生成**] ボタンをクリックすると、Boxによってキーペアが生成されます。これにより、アプリケーションコードに移すことができるJSON構成ファイルのダウンロードが開始されます。

<Danger>
  セキュリティ上の理由により、Boxには秘密キーが保存されません。秘密キーを紛失した場合は、キーペア全体のリセットが必要になります。
</Danger>

### 手動によるキーペアの追加

代わりに、独自のキーペアを生成し、その公開キーを[開発者コンソール][devconsole]にアップロードすることもできます。

OpenSSLを使用してキーペアを作成するには、ターミナルウィンドウを開き、以下のコマンドを実行します。

```shell theme={null}
openssl genrsa -des3 -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem
```

<Info>
  **Windowsシステムの場合**

  Windowsユーザーは、[Cygwin][cygwin]パッケージをインストールして使用することで、OpenSSLを実行できます。
</Info>

その後、[開発者コンソール][devconsole]でアプリケーションの \[構成] タブに移動し、\[**公開キーの追加と管理**] セクションまで下にスクロールします。

<Frame border width="600" center>
  <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-add-keys.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=bcd5821de9325694967f83c381e27e23" alt="キーの追加と管理" width="1400" height="476" data-path="images/guides/authentication/app-add-keys.png" />
</Frame>

\[**公開キーを追加**] ボタンをクリックし、上記の手順で生成された公開キーを入力して、\[**確認して保存**] をクリックします。

## アプリ承認

このアプリケーションを使用するには、Box管理者または共同管理者の承認が必要です。

[開発者コンソール][devconsole]の \[**構成**] タブで、以下を実行します。

* Box管理者または共同管理者の場合は、\[**承認**] をクリックして、直ちにアプリを承認します。
* 管理者または共同管理者でない場合は、\[**送信**] をクリックして、管理者または共同管理者に承認リクエストを送信します。リクエストが承認または拒否されると、メールが届きます。

このプロセスに関する詳細については、[アプリの承認に関するサポート記事][app-auth]を参照してください。

<Card href={localizeLink("/guides/authorization/platform-app-approval")} arrow title="Platformアプリケーションの承認方法を確認する" />

## 基本的な構成

### アプリケーションアクセス

アプリケーションのアクセスレベルにより、アプリからアクセスできるユーザーおよびコンテンツが決まります。デフォルトでは、アプリケーションで問題なく操作できるのは、その<Link href="/platform/user-types/#service-account">サービスアカウント</Link>とすべての<Link href="/platform/user-types">App User</Link>のコンテンツのみです。企業の既存の管理対象ユーザーや、アプリ自体が作成していないグループにアクセスするには、[開発者コンソール][devconsole]の \[**構成**] タブにある \[**アプリアクセスレベル**] 設定に移動し、\[**アプリ + Enterpriseアクセス**] に設定します。そうしないと、このような管理対象ユーザーとグループへのアクセスはブロックされます。

<Frame>
  <img src="https://mintcdn.com/box/J0IlfoFf_v0hLHOU/images/guides/authentication/app-access-level-new.png?fit=max&auto=format&n=J0IlfoFf_v0hLHOU&q=85&s=8e1e5f2e6b2d8b5fb45f50d0798c5064" alt="アプリのアクセスレベル" width="1024" height="275" data-path="images/guides/authentication/app-access-level-new.png" />
</Frame>

### アプリケーションスコープ

アプリケーションのスコープにより、アプリケーションが呼び出すことができるエンドポイントとリソースが決まります。各オプションの詳細については、<Link href="/guides/api-calls/permissions-and-errors/scopes">スコープのガイド</Link>を参照してください。

<Frame>
  <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-scopes.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=7d6a76fe395fc483d33179f6c4ad34e1" alt="アプリスコープ" width="1227" height="640" data-path="images/guides/authentication/app-scopes.png" />
</Frame>

### CORSドメイン

アプリケーションがJavaScriptでフロントエンドのブラウザコードからAPIコールを実行する場合は、[クロスオリジンリソース共有][cors] (CORS) のために、これらの呼び出しの実行元となるドメインを許可リストに追加する必要があります。すべてのリクエストがサーバー側のコードから発行される場合は、このセクションをスキップできます。

許可リストに完全なURIを追加するには、[開発者コンソール][devconsole]の \[**構成**] タブの下部にある \[**CORSドメイン**] セクションに移動します。

<Frame>
  <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-cors.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=12de7f8cec95dc4317b02172ef10e9df" alt="アプリのCORS設定" width="1504" height="378" data-path="images/guides/authentication/app-cors.png" />
</Frame>

[devconsole]: https://app.box.com/developers/console

[devaccount]: https://account.box.com/signup/n/developer

[devtoken]: /guides/authentication/tokens/developer-tokens

[cors]: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

{/* i18n-enable localize-links */}

[cygwin]: http://www.cygwin.com/

[app-auth]: https://support.box.com/hc/en-us/articles/360043697174-Authorizing-Apps-in-the-Box-App-Approval-Process

{/* i18n-enable localize-links */}

[2fa]: https://support.box.com/hc/ja/articles/360043697154-アカウントの多要素認証の設定

[ccg]: /guides/authentication/jwt/without-sdk/#client-credentials-grant

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("JWT Auth"), href: "/guides/authentication/jwt/index", badge: "GUIDE" }
]}
/>