> ## 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>;
};

このガイドでは、Platformアプリとのウェブアプリ統合を設定する方法について説明します。

<Warning>
  サーバー側統合のサポートは終了しました。つまり、サーバー側の処理を使用するアプリケーションは引き続き動作しますが、事前コールバックのURLやBasic認証など、サーバー側の構成オプションを変更することはできなくなります。これらのオプションを無効化し、実装を新しいものに変更できます。
</Warning>

## OAuth 2.0アプリケーションの作成

[開発者コンソール][devconsole]に移動し、<Link href="/guides/authentication/oauth2/oauth2-setup">OAuth 2.0認証</Link>を利用する<Link href="/guides/applications/platform-apps/create">Platformアプリ</Link>を作成します。

## 新しい統合の作成

次に、\[**統合**] タブに移動し、\[**ウェブアプリ統合を作成**] をクリックします。

<Frame center shadow border>
  <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/applications/web-app-integrations/create_integration.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=0a9b7e4b8202d88fc7acc3b2643efe5a" alt="[統合] タブ" width="1679" height="900" data-path="images/guides/applications/web-app-integrations/create_integration.png" />
</Frame>

## 統合の構成

統合を構成するには、各値について、以下のガイダンスに従います。

### アプリ情報

| フィールド                                         | 説明                                                                                                                                              |
| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| 統合名                                           | 統合の名前。ユーザーがファイルまたはフォルダの \[**その他のオプション**] > \[**統合**] メニューを選択したときにBoxウェブアプリに表示されます。                                                              |
| 説明                                            | Box統合に表示される統合の説明。                                                                                                                               |
| サポートされているファイル拡張子                              | 統合は、選択されているファイル拡張子の \[**その他のオプション**] > \[**統合**] メニューのオプションとしてのみ表示されます。                                                                         |
| 必要な権限                                         | ユーザーが統合を表示するために必要な権限を決定します。\[**ダウンロードの権限が必要**] にした場合、ユーザーはファイルをダウンロードできますが、そのファイルを更新することはできません。\[**すべての権限が必要**] にした場合、ユーザーはファイルのダウンロードと更新を行えます。 |
| 統合の範囲                                         | 統合の範囲を指定します。統合の呼び出し元となるファイル/フォルダ、またはその親フォルダを指定します。                                                                                              |
| \[共有ページで表示] の切り替え                             | 共有ページで外部ユーザーに統合を表示可能にするかどうかを決定します。有効にした場合、コンテンツでコラボレーションしていないユーザーが共有リンクを介して項目にアクセスすると、コンテキストメニューに統合が表示されます。                                     |
| \[ロックして、この統合を使用したファイルの上書きを現在のユーザーにのみ許可] の切り替え | 異なるウェブアプリ統合でファイルを同時に編集可能にするかどうかを決定します。                                                                                                          |
| 統合の種類                                         | 必要な統合の種類を選択します。使用できるオプションは、\[**ファイル**]、\[**フォルダ**]、\[**両方**] です。                                                                                |

### コールバック構成

| フィールド            | 説明                                                                                                                                                                                                                                                            |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| クライアントコールバックのURL | <Link href="/guides/applications/web-app-integrations/types">ポップアップ統合</Link>での最初のリクエストの後に、Boxからの追加のコールバックリクエストを処理します。アプリケーションがRESTメソッドでファイルパラメータを指定した場合、事前コールバックのURLはクライアントから発信できません。そのため、必要なインターフェースをサーバーがユーザーに送信できるように、2番目のリクエストがクライアントからサーバーに送信される必要があります。 |
| プロンプトメッセージ       | ユーザーが統合を開始する際に表示されるメッセージを指定します。このフィールドを使用して、次に何が起こるかについてコンテキストを提供します。このメッセージは500文字に制限されています。                                                                                                                                                                  |
| ユーザーエクスペリエンス     | 統合が新しいウィンドウで開くことを通知します。                                                                                                                                                                                                                                       |
| 新しいウィンドウの設定      | アプリケーションを新しいタブで開くかどうかを決定します。                                                                                                                                                                                                                                  |

### コールバックパラメータ

\[**コールバックパラメータ**] セクションでは、ユーザーが確認プロンプトを受け入れるとBoxからコールバックURLに送信されるパラメータを構成します。この設定が構成されていない場合、BoxからコールバックURLにパラメータが送信されません。パラメータを追加するには、\[**メソッド**] (GETまたはPOST) を選択し、\[**パラメータ名**] を指定して、\[**パラメータ値**] を追加します。

<Warning>
  **File**メソッドのサポートは終了しました。すでにこのメソッドを使用している場合は、その値を編集できません。**File**メソッドを**GET**または**POST**に変更することはできますが、この操作を元に戻すことはできません。
</Warning>

例: **GET - `userid` - `#user_id#`**。

以下のパラメータ値が使用可能です。

| パラメータ                 | メソッド     | 説明                                                                                                                                                                                                                                                                                                                                                                               |
| --------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `user_id`             | GET、POST | Box<Link href="/platform/appendix/locating-values/#user-ids">ユーザーID</Link>。この情報は、アクションを完了するためにユーザー認証が必要なポップアップ統合で使用されます。Box IDをアプリケーションに保存すると、統合からの後続の認証リクエストを有効にできます。                                                                                                                                                                                                           |
| `user_name`           | POST     | Boxユーザーのフルネームまたはメールアドレス。Boxユーザーが常に自分の名前を指定しているとは限りません。                                                                                                                                                                                                                                                                                                                           |
| `file_id`             | GET、POST | Box<Link href="/platform/appendix/locating-values/#content-ids">ファイルID</Link>。このIDを使用すると、ファイルを操作するBox APIコールを実行できます。                                                                                                                                                                                                                                                             |
| `file_name`           | POST     | ファイルの名前。                                                                                                                                                                                                                                                                                                                                                                         |
| `file_extension`      | GET、POST | ファイルの拡張子。                                                                                                                                                                                                                                                                                                                                                                        |
| `auth_code`           | GET、POST | OAuth 2.0<Link href="/guides/authentication/oauth2/without-sdk/#3-user-grants-application-access">承認コード</Link>。これは、認証の成功時にBoxによって生成されます。その後、アプリケーションは、この承認コードをOAuth 2.0アクセストークンの代わりにBoxに指定する必要があります。有効なアクセストークンが含まれた承認ヘッダーをすべてのBox APIリクエストに含める必要があります。                                                                                                                          |
| `redirect_to_box_url` | GET、POST | ポップアップ統合で、確認プロンプトによるリクエストの送信先となるURL。このURLを使用すると、ユーザーは \[すべてのファイル] ページにリダイレクトされます。このパラメータにより、ポップアップパネルが閉じ、\[すべてのファイル] ページは、統合による変更をすべて反映するよう更新されます。このパラメータをアプリケーションに追加しない場合は、URL全体を指定できます。**成功**: `#redirect_to_box_url#&status=success&message=Your%20action%20was%20successful%2E`。**失敗**: `#redirect_to_box_url#&status=failure&message=Your%20action%20was%20unsuccessful%2E` |

### 統合ステータス

* **開発**: 統合は、\[**一般設定**] タブで表示されるアプリケーションコラボレータのみが表示および使用できます。このオプションは、アプリケーションがまだ開発中でテストの実施中である場合に最もよく使用されます。
* **オンライン**: 統合は、すべてのBoxユーザーが表示し、使用できます。このオプションは、開発が完了し、アプリケーションを統合で公開する準備ができている場合に最もよく使用されます。
* **メンテナンス**: 統合は、\[**一般設定**] タブで表示されるアプリケーションコラボレータのみが表示および使用できます。このオプションは、統合が \[統合] で公開された後、メンテナンスでの更新を実行したり問題をトラブルシューティングしたりする必要がある場合に最もよく使用されます。このオプションを使用すると、アプリケーションのコラボレータ以外のすべてのユーザーに対して統合が一時的にオフラインになります。

## Box統合のユースケースの例

ユーザーがポップアップ統合を選択すると、Boxから事前コールバックのURLにコールバックリクエストが送信されます。これにより、構成済みのコールバックパラメータがサーバーに送信されます。クライアントが必要なデータを最初のリクエストからすべて取得できない場合は、Boxが2番目のリクエストを送信することもあります。

次の例では、クライアントコールバックのURLが必要ありません。

* ポップアップ統合で、`download_file_url`コールバックパラメータを使用してREST呼び出しを実行する。
* ユーザーが確認プロンプトで \[**OK**] をクリックしてポップアップを受け入れる。
* Boxが次のURLにリクエストを送信する (事前コールバックのURLにコールバックパラメータを追加): `http://www.doceditor.com/service?apikey=abc&file=&redirect=`。
* コールバックURLからのレスポンスにより、リクエストを送信したユーザーにユーザーインターフェースが表示される。ポップアップには、アクションを続行するために必要なすべての情報が表示されているため、追加のクライアントコールバックは必要ありません。

次の例では、クライアントコールバックのURLが必要です。

* ポップアップ統合で、ファイルコールバックパラメータを使用してREST呼び出しを実行する。
* ユーザーが確認プロンプトで \[**OK**] をクリックしてポップアップを受け入れる。
* ポップアップによって表示されたページで、Boxからリモートサーバーに、ファイルのコンテンツを含むPOSTリクエストとともにコールバックパラメータが送信される。
* Boxがリモートサーバーからレスポンスを受信し、クライアントにクライアントコールバックのURLへのレスポンスを投稿するよう指示する。このURLで識別されたサーバーがレスポンスを解釈し、適切なセッションIDを持つユーザーをリダイレクトします。

## クライアントコールバックのURLのリクエスト形式

BoxからクライアントコールバックのURLに送信されるPOSTリクエストは、事前コールバックのURLからレスポンスを取得し、元のコールバックと同じデータとともにレスポンスを同じURLに転送します。

| クライアントコールバックのURL                                                                                     | 例                                                        |
| ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| 2つのGETパラメータと1つのPOSTパラメータ: `http://your-client-callback-url.com/?get_param1=value1&get_param2=value2` | `POST data: post_param1=value1initial_callback_response` |

クライアントコールバックリクエストへのレスポンスはHTTPステータス302で、ユーザーは正しいURLにリダイレクトされるか、UIのHTMLにリダイレクトされます。

ほとんどの場合、このURLは、ウェブアプリ統合のために開発された個々のAPIまたはカスタムスクリプトを指します。これは、事前コールバックのURLの結果を解析します。

<Warning>
  Box PlatformアプリをすべてのBoxユーザーが利用できるように公開する場合は、そのURLがインターネット上でパブリックにアクセスできることを確認してください。
</Warning>

## 統合の一般公開

Box統合を一般公開するには、統合をApp Centerに掲載する必要があります。詳細については、<Link href="/guides/applications/integrations">統合</Link>ガイドに従ってください。

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

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

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("Setup with OAuth 2.0"), href: "/guides/authentication/oauth2/oauth2-setup", badge: "GUIDE" },
{ label: translate("Tokens"), href: "/guides/authentication/tokens/index", badge: "GUIDE" },
{ label: translate("Integrations"), href: "/guides/applications/integrations/index", badge: "GUIDE" }
]}
/>
