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

# SDKを使用しないOAuth 2.0

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

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

<RelatedLinks
  title="必須のガイド"
  items={[
{ label: translate("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("Setup with OAuth 2.0"), href: "/guides/authentication/oauth2/oauth2-setup", badge: "GUIDE" }
]}
/>

## 概要

Box公式SDKを利用すると、一般的な認証のハードルはなくなりますが、Box APIは、Box公式SDKがなくても使用できます。このガイドでは、OAuth 2.0のフローを手動で完成させるための手順を説明します。

1. 承認URLを作成する
2. ユーザーを承認URLにリダイレクトする
3. ユーザーが自分の代わりにアクションを実行するためのアクセス権限をアプリケーションに付与する (成功した場合は承認コードが提供される)
4. ユーザーを再度アプリケーションにリダイレクトする
5. 承認コードをアクセストークンと交換する

このフローが終了すると、アプリケーションには<Link href="/guides/authentication/tokens/access-tokens">アクセストークン</Link>が付与されます。これを使用すると、ユーザーの代わりにAPIコールを実行できます。

<Note>
  OAuth 2.0フローを介して取得したアクセストークンは、もともとアプリケーションを承認したユーザーに関連付けられています。

  `as-user`ヘッダーを使用して、<Link href="/guides/authentication/oauth2/as-user">別のユーザーとして処理を実行</Link>できます。
</Note>

## 前提条件

続行する前に、以下の手順を完了しておく必要があります。

* Box開発者コンソールで、OAuth 2.0認証方法を利用するPlatformアプリを作成する。
* アプリケーションの \[構成] タブに移動して、`client_id`と`client_secret`の値をコピーする。
* アプリケーションの \[構成] タブで、少なくとも1つのリダイレクトURIが構成されていることを確認する。

## 1. 承認URLを作成する

<Link href="/reference/get-authorize">承認URL</Link>は、以下のパラメータで構成されています。

| パラメータ                                                                             | ステータス | 説明                                                  |
| --------------------------------------------------------------------------------- | ----- | --------------------------------------------------- |
| <Link href="/reference/get-authorize/#param-client_id">`CLIENT_ID`</Link>         | 必須    | 開発者コンソールの \[構成] タブから取得します。                          |
| <Link href="/reference/get-authorize/#param-redirect_uri">`REDIRECT_URI`</Link>   | 省略可   | 開発者コンソールで構成します。アプリケーションにアクセスを許可すると、ユーザーがリダイレクトされます。 |
| <Link href="/reference/get-authorize/#param-response_type">`RESPONSE_TYPE`</Link> | 必須    | 常に`code`に設定します。                                     |
| <Link href="/reference/get-authorize/#param-state">`STATE`</Link>                 | 推奨    | クロスサイトリクエスト偽造から保護します。                               |

<Warning>
  アプリケーション用にリダイレクトURIを複数設定した場合、承認URLには、開発者コンソールで設定したURIのいずれかと一致する`redirect_uri`パラメータを含める必要があります。このパラメータが指定されていない場合、ユーザーには`redirect_uri_missing`エラーが表示され、アプリにリダイレクトされません。
</Warning>

少なくとも、このURLは常に次の形式を使用します。

`https://account.box.com/api/oauth2/authorize`?`client_id=CLIENTIDHERE`&`response_type=code`

<CodeGroup>
  ```csharp .Net theme={null}
  var baseUrl = "https://account.box.com/api/oauth2/authorize";
  var clientId = "[CLIENT_ID]";
  var authorizationUrl = $"{baseUrl}?client_id={clientId}&response_type=code";
  ```

  ```java Java theme={null}
  String baseUrl = "https://account.box.com/api/oauth2/authorize";
  String clientId = "[CLIENT_ID]";
  String authorizationUrl = String.format("%s?client_id=%s&response_type=code", baseUrl, clientId);
  ```

  ```python Python theme={null}
  base_url = 'https://account.box.com/api/oauth2/authorize'
  client_id = '[CLIENT_ID]'
  authorizationUrl = f'{base_url}?client_id=${client_id}&response_type=code'
  ```

  ```js Node theme={null}
  var baseUrl = "https://account.box.com/api/oauth2/authorize";
  var clientId = "[CLIENT_ID]";
  var authorizationUrl = `${baseUrl}?client_id=${clientId}&response_type=code`;
  ```
</CodeGroup>

<Card href={localizeLink("/reference/get-authorize")} arrow title="承認URLの詳細を確認する" />

## 2. ユーザーをリダイレクトする

次に、ユーザーを承認URLにリダイレクトします。その方法は、アプリケーションフレームワークによって異なります。このトピックの詳細については、ほとんどのフレームワークのドキュメントで説明されています。

指定されたアプリに対して承認URLが無効な場合、ユーザーには、アクセスの許可画面ではなくエラーページが表示されます。たとえば、承認URLに含まれる`redirect_uri`パラメータが、アプリ用に構成されたURIのいずれとも一致しない場合、ユーザーには`redirect_uri_mismatch`エラーが表示されます。

<CodeGroup>
  ```csharp .Net theme={null}
  var authorizationUrl = $"{baseUrl}?client_id={clientId}&response_type=code";
  // redirectTo(authorizationUrl);
  ```

  ```java Java theme={null}
  String authorizationUrl = String.format("%s?client_id=%s&response_type=code", baseUrl, clientId);

  // response.redirect(authorizationUrl);
  ```

  ```python Python theme={null}
  auth_url = f'{base_url}?client_id=${client_id}&response_type=code'
  // redirect(auth_url, code=302)
  ```

  ```js Node theme={null}
  var authorizationUrl = `${baseUrl}?client_id=${clientId}&response_type=code`;
  // res.redirect(authorize_url)
  ```
</CodeGroup>

<Info>
  スコープを制限したり追加の状態を渡したりするために、ユーザーをリダイレクトする際に追加のクエリパラメータを渡すことができます。詳細については、承認のリファレンスドキュメントを参照してください。
</Info>

## 3. ユーザーがアプリケーションにアクセス権限を付与する

ユーザーは、Box UIを使用して自分のアカウントにログインするために、ブラウザにリダイレクトされます。その後、リクエストされているスコープのリストと、ユーザーに代わって処理を行うアプリケーションを承認するためのオプションが表示されます。

<Frame border center shadow width="400">
  <img src="https://mintcdn.com/box/ozetuUHA5lVSDzR-/ja/guides/authentication/oauth2/oauth2-grant.png?fit=max&auto=format&n=ozetuUHA5lVSDzR-&q=85&s=46bf43329ee2cedf4310863e7f3b8165" alt="OAuth 2.0承認画面の例" width="796" height="890" data-path="ja/guides/authentication/oauth2/oauth2-grant.png" />
</Frame>

ユーザーが \[**Boxへのアクセスを許可**] をクリックしてこのリクエストを承認すると、ブラウザは、クエリパラメータに有効期間の短い承認コードが指定されている構成済みのリダイレクトURLにリダイレクトされます。

<Warning>
  アプリケーション用にリダイレクトURIを複数設定した場合、承認URLには、開発者コンソールで設定したURIのいずれかと一致する`redirect_uri`パラメータを含める必要があります。このパラメータが指定されていない場合、ユーザーには`redirect_uri_missing`エラーが表示され、アプリにリダイレクトされません。
</Warning>

```sh theme={null}
https://your.domain.com/path?code=1234567
```

## 4. コードを交換する

提供される承認コードは、<Link href="/guides/api-calls/permissions-and-errors/expiration">有効期間が30秒</Link>のため、有効期限が切れる前に<Link href="/reference/post-oauth2-token">アクセストークン</Link>に交換する必要があります。

<CodeGroup>
  ```csharp .Net theme={null}
  using System.Net;
  using System.Net.Http;
  using Newtonsoft.Json;

  String authenticationUrl = "https://api.box.com/oauth2/token";
  var client = new HttpClient();

  var content = new FormUrlEncodedContent(new[]
  {
      new KeyValuePair<string, string>("grant_type", "authorization_code"),
      new KeyValuePair<string, string>("code", "[CODE]"),
      new KeyValuePair<string, string>("client_id", "[CLIENT_ID]"),
      new KeyValuePair<string, string>("client_secret", "[CLIENT_SECRET]")
  });

  var response = client.PostAsync(authenticationUrl, content).Result;

  class Token
  {
      public string access_token { get; set; }
  }

  var data = response.Content.ReadAsStringAsync().Result;
  var token = JsonConvert.DeserializeObject<Token>(data);
  var accessToken = token.access_token;
  ```

  ```java Java theme={null}
  String authenticationUrl = "https://api.box.com/oauth2/token";

  List<NameValuePair> params = new ArrayList<NameValuePair>();

  params.add(new BasicNameValuePair("grant_type", "authorization_code"));
  params.add(new BasicNameValuePair("code", "[CODE]"));
  params.add(new BasicNameValuePair("client_id", "[CLIENT_ID]"));
  params.add(new BasicNameValuePair("client_secret", "[CLIENT_SECRET]"));

  CloseableHttpClient httpClient = HttpClientBuilder.create().disableCookieManagement().build();

  HttpPost request = new HttpPost(authenticationUrl);
  request.setEntity(new UrlEncodedFormEntity(params));

  CloseableHttpResponse httpResponse = httpClient.execute(request);
  HttpEntity entity = httpResponse.getEntity();

  String response = EntityUtils.toString(entity);
  httpClient.close();

  class Token {
      String access_token;
  }

  Token token = (Token) gson.fromJson(response, Token.class);
  String accessToken = token.access_token;
  ```

  ```python Python theme={null}
  authentication_url = "https://api.box.com/oauth2/token";

  params = urlencode({
      'grant_type': 'authorization_code',
      'code': '[CODE]',
      'client_id': '[CLIENT_ID]',
      'client_secret': '[CLIENT_SECRET]'
  }).encode()

  request = Request(authentication_url, params)
  response = urlopen(request).read()
  access_token = json.loads(response)['access_token']
  ```

  ```js Node theme={null}
  const authenticationUrl = "https://api.box.com/oauth2/token";

  let accessToken = await axios
      .post(
          authenticationUrl,
          querystring.stringify({
              grant_type: "authorization_code",
              code: "[CODE]",
              client_id: "[CLIENT_ID]",
              client_secret: "[CLIENT_SECRET]",
          })
      )
      .then((response) => response.data.access_token);
  ```
</CodeGroup>

アクセストークンの使用方法を確認するには、<Link href="/guides/api-calls">APIコールの実行</Link>に関するガイドを参照してください。

[1]: https://support.box.com/hc/ja/articles/360043693554-Box-Verified-Enterpriseとサポート対象のアプリ

<RelatedLinks
  title="関連するAPI"
  items={[
{ label: translate("Authorize user"), href: "/reference/get-authorize", badge: "GET" }
]}
/>

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("Platform App"), href: "/guides/applications/platform-apps/index", badge: "GUIDE" },
{ label: translate("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("Setup with OAuth 2.0"), href: "/guides/authentication/oauth2/oauth2-setup", badge: "GUIDE" }
]}
/>