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

> PKCE を使用した Authorization Code フローを使って、ネイティブ、モバイル、またはシングルページ アプリケーションから API を呼び出す方法を学びます。

# PKCE を使用した Authorization Code フローで API を呼び出す

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
              processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  このチュートリアルでは、PKCE を使用した Authorization Code フローを使って、ネイティブアプリ、モバイルアプリ、またはシングルページアプリから独自の API を呼び出す方法を説明します。このフローの仕組みと、これを使用すべき理由については、[Authorization Code Flow with Proof Key for Code Exchange (PKCE)](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce) を参照してください。ネイティブアプリ、モバイルアプリ、またはシングルページアプリにログインを追加する方法については、[Add Login Using Authorization Code Flow with PKCE](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce/add-login-using-the-authorization-code-flow-with-pkce) を参照してください。
</Callout>

Auth0 では、次の方法でアプリに Authorization Code Flow with Proof Key for Code Exchange (PKCE) を簡単に実装できます。

* [Auth0 Mobile SDKs](/docs/ja-jp/libraries) と [Auth0 Single-Page App SDK](/docs/ja-jp/libraries/auth0-single-page-app-sdk): フローを実装する最も簡単な方法で、多くの複雑な処理を代わりに行ってくれます。[Mobile Quickstarts](/docs/ja-jp/quickstart/native) と [Single-Page App Quickstarts](/docs/ja-jp/quickstart/spa) では、手順を順を追って説明しています。
* [Authentication API](https://auth0.com/docs/api/authentication): 独自のソリューションを構築したい場合は、このまま読み進めて API を直接呼び出す方法を確認してください。

<div id="prerequisites">
  ## 前提条件
</div>

**このチュートリアルを始める前に:**

* [Auth0 でアプリケーションを登録する](/docs/ja-jp/get-started/auth0-overview/create-applications/native-apps).

  * アプリケーションの種類に応じて、**Application Type** で **Native** または **Single-Page App** を選択します。
  * **Allowed Callback URL** に `{yourCallbackUrl}` を追加します。コールバック URL の形式は、アプリケーションの種類とプラットフォームによって異なります。アプリケーションの種類とプラットフォームごとの形式について詳しくは、[Native/Mobile Quickstarts](/docs/ja-jp/quickstart/native) および [Single-Page App Quickstarts](/docs/ja-jp/quickstart/spa) を参照してください。
  * アプリケーションの **Grant Types** に **認可コード** が含まれていることを確認してください。設定方法については、[Grant Types を更新する](/docs/ja-jp/get-started/applications/update-grant-types) を参照してください。
  * アプリケーションでリフレッシュトークンを使用できるようにする場合は、アプリケーションの **Grant Types** に **Refresh Token** が含まれていることを確認してください。設定方法については、[Grant Types を更新する](/docs/ja-jp/get-started/applications/update-grant-types) を参照してください。リフレッシュトークンの詳細については、[Refresh Tokens](/docs/ja-jp/secure/tokens/refresh-tokens) を参照してください。
* [Auth0 で API を登録する](/docs/ja-jp/get-started/architecture-scenarios/mobile-api/part-2#create-the-api)

  * API がリフレッシュトークンを受け取り、以前のトークンの有効期限が切れたときに新しいトークンを取得できるようにするには、**オフラインアクセスの許可** を有効にします。

<div id="steps">
  ## 手順
</div>

1. [コードベリファイアを作成する](#create-code-verifier):
   Auth0 に送信してトークンをリクエストするための `code_verifier` を生成します。
2. [コードチャレンジを作成する](#create-code-challenge):
   `code_verifier` から `code_challenge` を生成し、これを Auth0 に送信して `authorization_code` をリクエストします。
3. [ユーザーを認可する](#authorize-user):
   ユーザーの認可をリクエストし、`authorization_code` とともにアプリへリダイレクトします。
4. [トークンをリクエストする](#request-tokens):
   `authorization_code` と `code_verifier` をトークンと引き換えます。
5. [API を呼び出す](#call-api):
   取得したアクセストークンを使って API を呼び出します。
6. [リフレッシュトークンを使用する](#refresh-tokens):
   既存のトークンの有効期限が切れたときに、新しいトークンをリクエストするためにリフレッシュトークンを使用します。

任意: [サンプルのユースケースを確認する](#sample-use-cases)。

<div id="create-code-verifier">
  ### code verifier を作成する
</div>

`code_verifier` を作成します。これは、最終的にトークンをリクエストするために Auth0 に送信される、暗号学的にランダムな Base64 エンコード済みのキーです。

<div id="javascript-sample">
  #### Javascript のサンプル
</div>

```javascript lines theme={null}
// 依存関係: Node.js cryptoモジュール
// https://nodejs.org/api/crypto.html#crypto_crypto
function base64URLEncode(str) {
    return str.toString('base64')
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}
var verifier = base64URLEncode(crypto.randomBytes(32));
```

#### Java の例

```java lines theme={null}
// 依存関係: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Base64クラスをインポートします。
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.getUrlEncoder().withoutPadding().encodeToString(code);
```

<div id="android-sample">
  #### Android サンプル
</div>

```kotlin lines theme={null}
// See https://developer.android.com/reference/android/util/Base64
// Base64クラスをインポートする
// import android.util.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.encodeToString(code, Base64.URL_SAFE | Base64.NO_WRAP | Base64.NO_PADDING);
```

<div id="swift-5-sample">
  #### Swift 5のサンプル
</div>

```swift lines theme={null}
var buffer = [UInt8](repeating: 0, count: 32)
_ = SecRandomCopyBytes(kSecRandomDefault, buffer.count, &buffer)
let verifier = Data(buffer).base64EncodedString()
    .replacingOccurrences(of: "+", with: "-")
    .replacingOccurrences(of: "/", with: "_")
    .replacingOccurrences(of: "=", with: "")
```

<div id="objective-c-sample">
  #### Objective-C のサンプル
</div>

```objc lines theme={null}
NSMutableData *data = [NSMutableData dataWithLength:32];
int result __attribute__((unused)) = SecRandomCopyBytes(kSecRandomDefault, 32, data.mutableBytes);
NSString *verifier = [[[[data base64EncodedStringWithOptions:0]
                        stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
                        stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
                        stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];
```

<div id="create-code-challenge">
  ### code challenge を作成する
</div>

`authorization_code` をリクエストするために Auth0 に送信する `code_challenge` を、`code_verifier` から生成します。

#### Javascript の例

```javascript lines theme={null}
// 依存関係: Node.js cryptoモジュール
// https://nodejs.org/api/crypto.html#crypto_crypto
function sha256(buffer) {
    return crypto.createHash('sha256').update(buffer).digest();
}
var challenge = base64URLEncode(sha256(verifier));
```

<div id="java-sample">
  #### Java のサンプル
</div>

```java lines theme={null}
// 依存関係: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Base64クラスをインポートします。
// import org.apache.commons.codec.binary.Base64;
byte[] bytes = verifier.getBytes("US-ASCII");
MessageDigest md = MessageDigest.getInstance("SHA-256");
md.update(bytes, 0, bytes.length);
byte[] digest = md.digest();
String challenge = Base64.encodeBase64URLSafeString(digest);
```

<div id="swift-5-sample">
  #### Swift 5のサンプル
</div>

```swift lines theme={null}
import CommonCrypto

// ...

guard let data = verifier.data(using: .utf8) else { return nil }
var buffer = [UInt8](repeating: 0, count: Int(CC_SHA256_DIGEST_LENGTH))
_ = data.withUnsafeBytes {
    CC_SHA256($0.baseAddress, CC_LONG(data.count), &buffer)
}
let hash = Data(buffer)
let challenge = hash.base64EncodedString()
    .replacingOccurrences(of: "+", with: "-")
    .replacingOccurrences(of: "/", with: "_")
    .replacingOccurrences(of: "=", with: "")
```

#### Objective-Cのサンプル

```objc lines theme={null}
// 依存関係: Apple Common Cryptoライブラリ
// http://opensource.apple.com//source/CommonCrypto
u_int8_t buffer[CC_SHA256_DIGEST_LENGTH * sizeof(u_int8_t)];
memset(buffer, 0x0, CC_SHA256_DIGEST_LENGTH);
NSData *data = [verifier dataUsingEncoding:NSUTF8StringEncoding];
CC_SHA256([data bytes], (CC_LONG)[data length], buffer);
NSData *hash = [NSData dataWithBytes:buffer length:CC_SHA256_DIGEST_LENGTH];
NSString *challenge = [[[[hash base64EncodedStringWithOptions:0]
                         stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
                         stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
                         stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];
```

<div id="authorize-user">
  ### ユーザーを認可する
</div>

`code_verifier` と `code_challenge` を作成したら、ユーザーの認可を得る必要があります。これは技術的には <Tooltip tip="Authorization Flow: OAuth 2.0 フレームワークで規定された authorization grant（または workflow）。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=authorization+flow">認可フロー</Tooltip> の始まりにあたり、このステップには次のプロセスの 1 つ以上が含まれることがあります。

* ユーザーを認証する。
* 認証を行うため、ユーザーを <Tooltip tip="Identity Provider (IdP): デジタルアイデンティティを保存および管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Identity+Provider">IDプロバイダー</Tooltip> にリダイレクトする。
* 有効な [シングルサインオン (SSO)](/docs/ja-jp/authenticate/single-sign-on) セッションがあるか確認する。
* 以前に同意が与えられていない場合は、要求された権限レベルについてユーザーの同意を得る。

ユーザーを認可するには、アプリからユーザーを [認可 URL](https://auth0.com/docs/api/authentication#authorization-code-grant-pkce-) に送る必要があります。その際、前のステップで生成した `code_challenge` と、`code_challenge` の生成に使用したメソッドを含めます。

<div id="example-authorization-url">
  #### 認可 URL の例
</div>

export const codeExample1 = `https://{yourDomain}/authorize?
    response_type=code&
    code_challenge={codeChallenge}&
    code_challenge_method=S256&
    client_id={yourClientId}&
    redirect_uri={yourCallbackUrl}&
    scope=SCOPE&
    audience={apiAudience}&
    state={state}`;

<AuthCodeBlock children={codeExample1} language="http" />

##### パラメータ

カスタム API の呼び出し時にユーザーを認可する場合は、次の点に注意してください。

* <Tooltip tip="Audience: 発行されたトークンの audience の一意の識別子です。トークン内では `aud` という名前で、その値には ID トークンの場合はアプリケーション（Client ID）、アクセストークンの場合は API（API Identifier）の ID が含まれます。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=audience">audience</Tooltip> パラメータを含める必要があります
* 対象の API でサポートされている追加のスコープを含めることもできます

| パラメータ名                  | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `response_type`         | Auth0 が返す認証情報の種類 (`code` または `token`) を示します。このフローでは、値は `code` である必要があります。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `code_challenge`        | `code_verifier` から生成されたチャレンジです。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `code_challenge_method` | チャレンジの生成に使用する方法です (例: `S256`) 。PKCE 仕様では `S256` と `plain` の 2 つの方法が定義されています。この例では前者を使用しており、後者は非推奨であるため、Auth0 がサポートしているのは **前者のみ** です。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `client_id`             | アプリケーションの Client ID です。この値は [Application Settings](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で確認できます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `redirect_uri`          | ユーザーが認可を許可した後に、Auth0 がブラウザーをリダイレクトする URL です。認可コードは URL パラメータ `code` で取得できます。この URL は [Application Settings](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で有効なコールバック URL として指定する必要があります。<br /><br />**警告:** [OAuth 2.0 Specification](https://tools.ietf.org/html/rfc6749#section-3.1.2) に従い、Auth0 はハッシュ以降の内容をすべて削除し、フラグメントは一切考慮しません。                                                                                                                                                                                                                                                                                                                                |
| `scope`                 | 認可をリクエストする [scopes](/docs/ja-jp/get-started/apis/scopes) です。各 scope はスペースで区切る必要があります。`profile` や `email` など、ユーザーに関する任意の [standard OpenID Connect (OIDC) scopes](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims)、[namespaced format](/docs/ja-jp/secure/tokens/json-web-tokens/create-custom-claims) に準拠した [custom claims](/docs/ja-jp/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims)、または対象 API がサポートする任意のスコープ (例: `read:contacts`) をリクエストできます。[リフレッシュトークン](/docs/ja-jp/glossary?term=Refresh+Token) を取得するには `offline_access` を含めてください ([Application Settings](https://manage.auth0.com/#/apis) で **オフラインアクセスの許可** フィールドが有効になっていることを確認してください) 。 |
| `audience`              | モバイルアプリがアクセスする API の一意の識別子です。このチュートリアルの前提条件の一部として作成した API の [Settings](https://manage.auth0.com/#/apis) タブにある **Identifier** の値を使用します。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `state`                 | (推奨) アプリが最初のリクエストに追加し、Auth0 がアプリケーションにリダイレクトするときに含める、不透明な任意の英数字の文字列です。この値を使ってクロスサイトリクエストフォージェリ (CSRF) 攻撃を防ぐ方法については、[Mitigate CSRF Attacks With State Parameters](/docs/ja-jp/secure/attack-protection/state-parameters) を参照してください。                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `organization`          | (任意) ユーザーの認証時に使用する organization の ID です。指定しない場合、アプリケーションで **Display Organization Prompt** が設定されていれば、ユーザーは認証時に organization 名を入力できます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `invitation`            | (任意) organization 招待の ticket ID です。[メンバーを Organizations に招待する](/docs/ja-jp/manage-users/organizations/configure-organizations/invite-members) 場合、ユーザーが招待を承諾したときに、アプリケーションは `invitation` と `organization` のキーと値のペアを引き渡して、招待の承諾を処理する必要があります。                                                                                                                                                                                                                                                                                                                                                                                                                                               |

例として、API の呼び出し時に使用する認可 URL の HTML スニペットは次のようになります。

export const codeExample2 = `<a href="https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM&
  code_challenge_method=S256&
  redirect_uri={yourCallbackUrl}&
  scope=appointments%20contacts&
  audience=appointments:api&
  state=xyzABC123">
  サインイン
</a>`;

<AuthCodeBlock children={codeExample2} language="html" />

<div id="response">
  #### レスポンス
</div>

問題なく進めば、`HTTP 302` レスポンスが返されます。認可コードは URL の末尾に含まれます。

```http lines theme={null}
HTTP/1.1 302 Found
Location: {yourCallbackUrl}?code={authorizationCode}&state=xyzABC123
```

<div id="request-tokens">
  ### トークンをリクエストする
</div>

認可コードを取得したら、次はそれをトークンと交換する必要があります。前のステップで取得した認可コード (`code`) を使い、`code_verifier` を添えて [トークン URL](https://auth0.com/docs/api/authentication#authorization-code-pkce-) に `POST` リクエストを送信する必要があります。

#### トークンURLへのPOST例

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request POST \
    --url 'https://{yourDomain}/oauth/token' \
    --header 'content-type: application/x-www-form-urlencoded' \
    --data grant_type=authorization_code \
    --data 'client_id={yourClientId}' \
    --data 'code_verifier={yourGeneratedCodeVerifier}' \
    --data 'code={yourAuthorizationCode}' \
    --data 'redirect_uri={https://yourApp/callback}'
  ```

  ```csharp C# theme={null}
  var client = new RestClient("https://{yourDomain}/oauth/token");
  var request = new RestRequest(Method.POST);
  request.AddHeader("content-type", "application/x-www-form-urlencoded");
  request.AddParameter("application/x-www-form-urlencoded", "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}", ParameterType.RequestBody);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go theme={null}
  package main

  import (
  	"fmt"
  	"strings"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://{yourDomain}/oauth/token"

  	payload := strings.NewReader("grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")

  	req, _ := http.NewRequest("POST", url, payload)

  	req.Header.Add("content-type", "application/x-www-form-urlencoded")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java theme={null}
  HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token")
    .header("content-type", "application/x-www-form-urlencoded")
    .body("grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
    .asString();
  ```

  ```javascript Node.JS theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'POST',
    url: 'https://{yourDomain}/oauth/token',
    headers: {'content-type': 'application/x-www-form-urlencoded'},
    data: new URLSearchParams({
      grant_type: 'authorization_code',
      client_id: '{yourClientId}',
      code_verifier: '{yourGeneratedCodeVerifier}',
      code: '{yourAuthorizationCode}',
      redirect_uri: '{https://yourApp/callback}'
    })
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://{yourDomain}/oauth/token",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}",
    CURLOPT_HTTPHEADER => [
      "content-type: application/x-www-form-urlencoded"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  payload = "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  headers = { 'content-type': "application/x-www-form-urlencoded" }

  conn.request("POST", "/{yourDomain}/oauth/token", payload, headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://{yourDomain}/oauth/token")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Post.new(url)
  request["content-type"] = 'application/x-www-form-urlencoded'
  request.body = "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="parameters">
  ##### パラメーター
</div>

| パラメーター名         | 説明                                                                                                                                |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `grant_type`    | これを `"authorization_code"` に設定します。                                                                                                |
| `code_verifier` | このチュートリアルの最初のステップで生成した、暗号学的にランダムなキーです。                                                                                            |
| `code`          | このチュートリアルの前のステップで取得した `authorization_code` です。                                                                                    |
| `client_id`     | ご利用のアプリケーションの Client ID です。この値は [Application Settings](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で確認できます。 |
| `redirect_uri`  | Application Settings で設定した有効なコールバック URL です。これは、このチュートリアルの前のステップで認可 URL に渡した `redirect_uri` と完全に一致している必要があります。なお、URL エンコードが必要です。   |

<div id="response">
  #### レスポンス
</div>

問題なく処理されると、`access_token`、`refresh_token`、`id_token`、`token_type` の各値を含むペイロードとともに、HTTP 200 レスポンスが返されます。

```json lines theme={null}
{
  "access_token":"eyJz93a...k4laUWw",
  "refresh_token":"GEbRxBN...edjnXbL",
  "id_token":"eyJ0XAi...4faeEoQ",
  "token_type":"Bearer",
  "expires_in":86400
}
```

<Warning>
  保存する前に、トークンを検証してください。方法については、[ID トークンの検証](/docs/ja-jp/secure/tokens/id-tokens/validate-id-tokens)および[アクセストークンの検証](/docs/ja-jp/secure/tokens/access-tokens/validate-access-tokens)をご覧ください。
</Warning>

[ID トークン](/docs/ja-jp/secure/tokens/id-tokens)には、デコードして取り出す必要があるユーザー情報が含まれています。

[アクセストークン](/docs/ja-jp/secure/tokens/access-tokens)は、[Auth0 Authentication API の /userinfo エンドポイント](https://auth0.com/docs/api/authentication#get-user-info)または別の API を呼び出すために使用されます。独自の API を呼び出す場合、最初に必要になるのは、[アクセストークンを検証する](/docs/ja-jp/secure/tokens/access-tokens/validate-access-tokens)ことです。

[リフレッシュトークン](/docs/ja-jp/secure/tokens/refresh-tokens)は、前の <Tooltip tip="アクセストークン: API へのアクセスに使用される、opaque 文字列または JWT 形式の認可資格情報。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=access+token">アクセストークン</Tooltip> または <Tooltip tip="アクセストークン: API へのアクセスに使用される、opaque 文字列または JWT 形式の認可資格情報。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=ID+token">ID トークン</Tooltip> の有効期限が切れた後に、新しいものを取得するために使用されます。`refresh_token` は、`offline_access` scope を含め、Auth0 Dashboard で API の **オフラインアクセスの許可** を有効にした場合にのみ、レスポンスに含まれます。

<Warning>
  リフレッシュトークンは、ユーザーが実質的に永続して認証済みの状態を保てるようにするため、厳重に保管する必要があります。
</Warning>

<div id="call-api">
  ### API を呼び出す
</div>

ネイティブ／モバイル アプリケーションから API を呼び出すには、取得したアクセストークンを HTTP request の Authorization ヘッダーで Bearer トークンとして渡す必要があります。

<AuthCodeGroup>
  ```bash cURL lines theme={null}
  curl --request GET \
    --url https://myapi.com/api \
    --header 'authorization: Bearer {accessToken}' \
    --header 'content-type: application/json'
  ```

  ```csharp C# lines theme={null}
  var client = new RestClient("https://myapi.com/api");
  var request = new RestRequest(Method.GET);
  request.AddHeader("content-type", "application/json");
  request.AddHeader("authorization", "Bearer {accessToken}");
  IRestResponse response = client.Execute(request);
  ```

  ```go Go lines expandable theme={null}
  package main

  import (
  	"fmt"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://myapi.com/api"

  	req, _ := http.NewRequest("GET", url, nil)

  	req.Header.Add("content-type", "application/json")
  	req.Header.Add("authorization", "Bearer {accessToken}")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java lines theme={null}
  HttpResponse response = Unirest.get("https://myapi.com/api")
    .header("content-type", "application/json")
    .header("authorization", "Bearer {accessToken}")
    .asString();
  ```

  ```javascript Node.JS lines theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'GET',
    url: 'https://myapi.com/api',
    headers: {'content-type': 'application/json', authorization: 'Bearer {accessToken}'}
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP lines expandable theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://myapi.com/api",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => [
      "authorization: Bearer {accessToken}",
      "content-type: application/json"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python lines theme={null}
  import http.client

  conn = http.client.HTTPSConnection("myapi.com")

  headers = {
      'content-type': "application/json",
      'authorization': "Bearer {accessToken}"
      }

  conn.request("GET", "/api", headers=headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby lines theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://myapi.com/api")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Get.new(url)
  request["content-type"] = 'application/json'
  request["authorization"] = 'Bearer {accessToken}'

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="refresh-tokens">
  ### リフレッシュトークン
</div>

このチュートリアルをここまで進め、次の内容を完了していれば、すでに[リフレッシュトークン](/docs/ja-jp/secure/tokens/refresh-tokens)を受け取っています。

* API をオフラインアクセスの許可に対応するよう設定した
* [authorize endpoint](https://auth0.com/docs/api/authentication/reference#authorize-application) を通じて認証リクエストを開始する際に、`offline_access` スコープを含めた

新しいアクセストークンを取得するには、<Tooltip tip="リフレッシュトークン: ユーザーに再度ログインさせることなく、新しいアクセストークンを取得するために使用されるトークンです。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Refresh+Token">リフレッシュトークン</Tooltip>を使用できます。通常、ユーザーが新しいアクセストークンを必要とするのは、以前のトークンの有効期限が切れた後か、新しいリソースへのアクセスを初めて取得するときだけです。API を呼び出すたびに新しいアクセストークンを取得するためにエンドポイントを呼び出すのは適切ではありません。また、Auth0 ではレート制限が設けられているため、同じ IP から同じトークンを使用してそのエンドポイントに対して実行できるリクエスト数は制限されます。

トークンを更新するには、`grant_type=refresh_token` を使用して、Authentication API の `/oauth/token` エンドポイントに `POST` リクエストを送信します。

<div id="example-post-to-token-url">
  #### トークン URL への POST の例
</div>

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request POST \
    --url 'https://{yourDomain}/oauth/token' \
    --header 'content-type: application/x-www-form-urlencoded' \
    --data grant_type=refresh_token \
    --data 'client_id={yourClientId}' \
    --data 'refresh_token={yourRefreshToken}'
  ```

  ```csharp C# theme={null}
  var client = new RestClient("https://{yourDomain}/oauth/token");
  var request = new RestRequest(Method.POST);
  request.AddHeader("content-type", "application/x-www-form-urlencoded");
  request.AddParameter("application/x-www-form-urlencoded", "grant_type=refresh_token&client_id={yourClientId}&refresh_token=%7ByourRefreshToken%7D", ParameterType.RequestBody);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go theme={null}
  package main

  import (
  	"fmt"
  	"strings"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://{yourDomain}/oauth/token"

  	payload := strings.NewReader("grant_type=refresh_token&client_id={yourClientId}&refresh_token=%7ByourRefreshToken%7D")

  	req, _ := http.NewRequest("POST", url, payload)

  	req.Header.Add("content-type", "application/x-www-form-urlencoded")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java theme={null}
  HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token")
    .header("content-type", "application/x-www-form-urlencoded")
    .body("grant_type=refresh_token&client_id={yourClientId}&refresh_token=%7ByourRefreshToken%7D")
    .asString();
  ```

  ```javascript Node.JS theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'POST',
    url: 'https://{yourDomain}/oauth/token',
    headers: {'content-type': 'application/x-www-form-urlencoded'},
    data: new URLSearchParams({
      grant_type: 'refresh_token',
      client_id: '{yourClientId}',
      refresh_token: '{yourRefreshToken}'
    })
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://{yourDomain}/oauth/token",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => "grant_type=refresh_token&client_id={yourClientId}&refresh_token=%7ByourRefreshToken%7D",
    CURLOPT_HTTPHEADER => [
      "content-type: application/x-www-form-urlencoded"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  payload = "grant_type=refresh_token&client_id={yourClientId}&refresh_token=%7ByourRefreshToken%7D"

  headers = { 'content-type': "application/x-www-form-urlencoded" }

  conn.request("POST", "/{yourDomain}/oauth/token", payload, headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://{yourDomain}/oauth/token")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Post.new(url)
  request["content-type"] = 'application/x-www-form-urlencoded'
  request.body = "grant_type=refresh_token&client_id={yourClientId}&refresh_token=%7ByourRefreshToken%7D"

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="parameters">
  ##### パラメーター
</div>

| パラメーター名         | 説明                                                                                                                            |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `grant_type`    | `refresh_token` に設定します。                                                                                                       |
| `client_id`     | アプリケーションの Client ID です。この値は [Application Settings](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で確認できます。 |
| `refresh_token` | 使用するリフレッシュトークンです。                                                                                                             |
| `scope`         | (省略可能) 要求するスコープ権限をスペース区切りで指定した一覧です。送信しない場合は元のスコープが使用され、送信した場合はスコープをより限定して要求できます。なお、URL エンコードが必要です。                            |

<div id="response">
  #### レスポンス
</div>

問題なく進めば、新しい `access_token`、その有効期間 (秒単位の `expires_in`) 、付与された `scope` 値、および `token_type` を含むペイロードとともに、`HTTP 200` レスポンスが返されます。最初のトークンのスコープに `openid` が含まれている場合、レスポンスには新しい `id_token` も含まれます。

```json lines theme={null}
{
  "access_token": "eyJ...MoQ",
  "expires_in": 86400,
  "scope": "openid offline_access",
  "id_token": "eyJ...0NE",
  "token_type": "Bearer"
}
```

<Warning>
  保存する前に、トークンを検証してください。方法については、[ID トークンを検証する](/docs/ja-jp/secure/tokens/id-tokens/validate-id-tokens)と[アクセストークンを検証する](/docs/ja-jp/secure/tokens/access-tokens/validate-access-tokens)を参照してください。
</Warning>

<div id="sample-use-cases">
  ### 使用例
</div>

<div id="customize-tokens">
  #### トークンをカスタマイズする
</div>

Actions を使うと、返されるアクセストークンのスコープを変更したり、アクセストークンや ID トークンにクレームを追加したりできます。 (Actions の詳細については、[Auth0 Actions](/docs/ja-jp/customize/actions) をご覧ください。) これを行うには、次の Action を追加します。この Action は、ユーザーの認証後に実行されます。

```js lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  // Access Token と ID トークンにカスタムクレームを追加する
  api.accessToken.setCustomClaim('https://foo/bar', 'value');
  api.idToken.setCustomClaim('https://fiz/baz', 'some other value');

  // Access Token のスコープを変更する
  api.accessToken.addScope('foo');
  api.accessToken.addScope('bar');
};
```

スコープは、Action の実行後にトークンで利用できるようになります。

<Warning>
  Auth0 は、[OpenID Connect (OIDC) specification](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) で定義されているとおり、構造化されたクレーム形式でプロファイル情報を返します。つまり、ID トークンまたはアクセストークンに追加するカスタムクレームは、競合が発生する可能性を避けるため、[ガイドラインと制限事項に準拠する必要があります](/docs/ja-jp/secure/tokens/json-web-tokens/create-custom-claims)。
</Warning>

<div id="view-sample-application-mobile-app-api">
  #### サンプルアプリケーションを見る: モバイルアプリ + API
</div>

実装例については、[Mobile + API](/docs/ja-jp/get-started/architecture-scenarios/mobile-api) アーキテクチャシナリオを参照してください。このチュートリアルシリーズには、[GitHub で参照できるコードサンプル](https://github.com/auth0-samples/auth0-pnp-exampleco-timesheets) も用意されています。

<div id="learn-more">
  ## 詳しくはこちら
</div>

* [OAuth 2.0 認可フレームワーク](/docs/ja-jp/authenticate/protocols/oauth)
* [OpenID Connect プロトコル](/docs/ja-jp/authenticate/protocols/openid-connect-protocol)
* [トークン](/docs/ja-jp/secure/tokens)
