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

# フォームPOSTを使った暗黙フローでログインを追加する

> フォームPOSTを使った暗黙フローでシングルページアプリケーション（SPA）へのログインを追加する方法を説明します。

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        let processedChildren = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          processedChildren = processedChildren.replace(new RegExp(key, "g"), value);
        }
        setProcessedChildren(processedChildren);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
      {processedChildren}
    </CodeBlock>;
};

フォームPOSTを使った暗黙フローでシングルページアプリケーション（SPA）へのログインを追加することができます。フローの仕組みやメリットについては、「[フォームPOSTを使った暗黙フロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post)」をお読みください。

フォームPOSTを使った暗黙フローは、ログインのみのユースケースに使用します。ユーザーのログイン時にAPIを呼び出せるようにアクセストークンを要求する場合は、PKCEを使った認可コードフローを使用してください。詳細については、「[Proof Key for Code Exchange（PKCE）を使った認可コードフロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)」をお読みください。

フォームPOSTを使った暗黙フローを実装するには、以下のリソースを使用することができます。

* [Express OpenID Connect SDK](https://www.npmjs.com/package/express-openid-connect)：フローを実装する最も簡単な方法です。難しくて手間がかかる作業のほとんどが処理されます。Javascript SDKを使用する場合は、アーキテクチャに適した軽減措置を実施しているか確認してください。詳細については、「[Auth0.js v9の参考情報](/docs/ja-JP/ja-jp/libraries/auth0js)」をお読みください。
* [Authentication API](/docs/ja-JP/ja-jp/api/authentication)：独自のソリューションを構築したい場合は、このまま読み続けて、APIを直接呼び出す方法を学習してください。

ログインに成功すると、アプリケーションがユーザーの[IDトークン](/docs/ja-JP/ja-jp/secure/tokens/id-tokens)にアクセスします。IDトークンには基本的なプロファイル情報が含まれます。

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

アプリをAuth0に登録する必要があります。詳細については、「[シングルページアプリケーションの登録](/docs/ja-JP/ja-jp/get-started/auth0-overview/create-applications/single-page-web-apps)」をお読みください。

* **［Single-Page App（シングルページアプリ）］** を **［Application Type（アプリケーションタイプ）］** として選択します。
* `{https://yourApp/callback}`の **［Allowed Callback URL（許可されているコールバックURL）］** を追加します。
* アプリケーションの **［Grant Types（付与タイプ）］** に **［Implicit（暗黙）］** が含まれていることを確認します。詳細については、「[付与タイプを更新する](/docs/ja-JP/ja-jp/get-started/applications/update-grant-types)」をお読みください。

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

ユーザーの認可を要求しすると、アプリにリダイレクトされます。フローを開始するには、ユーザーの認可が必要です。この手順には、以下のようなプロセスが含まれます。

* ユーザーを認証する
* 認証を行うために、ユーザーをIDプロバイダーへリダイレクトする
* 有効なシングルサインオン（<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-JP/ja-jp/glossary?term=single-sign-on" tip="シングルサインオン（SSO）: ユーザーが1つのアプリケーションにログインした後、そのユーザーを他のアプリケーションに自動的にログインさせるサービス。" cta="用語集の表示">SSO</Tooltip>）セッションを確認する
* 以前に同意を得ていない場合は、要求された権限レベルについてユーザーの同意を得る

ユーザーを認可するには、アプリがユーザーに認可URLを送信する必要があります。

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

export const codeExample1 = `https://{yourDomain}/authorize?
    response_type=YOUR_RESPONSE_TYPE&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=SCOPE&
    state=STATE&
    nonce=NONCE`;

<AuthCodeBlock children={codeExample1} language="text" lines />

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

<table class="table">
  <thead>
    <tr>
      <th>パラメーター名</th>
      <th>説明</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>`response_type`</td>
      <td>Auth0が返す資格情報の種類を示します（コードまたはトークン）。暗黙フローに対して、値は`id_token`、`token`、`id_token token`になります。特に、`id_token`はIDトークンを返し、`token`はアクセストークンを返します。</td>
    </tr>

    <tr>
      <td>`response_mode`</td>
      <td>応答パラメーターが返される方法を指定します。安全保護のため、値は`form_post`にする必要があります。このモードでは、応答パラメーターは、HTTP POSTメソッドを介して送信され、`application/x-www-form-urlencoded`フォーマットを使用して本文でエンコードされるHTMLフォーム値としてエンコードされます。</td>
    </tr>

    <tr>
      <td>`client_id`</td>
      <td>アプリケーションのクライアントID。これは、<a href="https://manage.auth0.com/#/applications/{yourClientId}/settings">アプリケーション設定</a>で見つけることができます。</td>
    </tr>

    <tr>
      <td>`redirect_uri`</td>
      <td>認可がユーザーにより付与された後にAuth0がブラウザをリダイレクトするURL。<a href="https://manage.auth0.com/#/Applications/{yourClientId}/settings">Application Settings（アプリケーション設定）</a>で有効なCallback URLとしてこのURLを指定する必要があります。 <br /> <br /> <strong>警告：</strong> <a href="https://tools.ietf.org/html/rfc6749#section-3.1.2">OAuth 2.0の仕様</a>に従って、Auth0はハッシュの後、すべてを削除し、フラグメントを尊重<em>しません</em>。</td>
    </tr>

    <tr>
      <td>`scope`</td>
      <td>返したいクレーム（またはユーザー属性）を決定する、認可を要求したい<a href="/docs/ja-JP/ja-jp/scopes">スコープ</a>を指定します。スペースで区切る必要があります。`profile`および`email`などのユーザーに関する<a href="https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims">標準OpenID Connect（OIDC）スコープ</a>、<a href="/docs/ja-JP/ja-jp/tokens/guides/create-namespaced-custom-claims">名前空間形式</a>に従った<a href="/docs/ja-JP/ja-jp/tokens/concepts/jwt-claims#custom-claims">カスタムクレーム</a>、ターゲットAPIがサポートするスコープ（例：`read:contacts`）を要求できます。</td>
    </tr>

    <tr>
      <td>`state`</td>
      <td>（推奨）Auth0がリダイレクトしてアプリケーションに戻る際に含まれ、アプリが初期要求に追加する不透明な任意の英数字の文字列。クロスサイトリクエストフォージェリ（CSRF）攻撃を防止するためにこの値を使用する方法については、<a href="/docs/ja-JP/ja-jp/protocols/oauth2/mitigate-csrf-attacks">状態パラメーターを使ってCSRF攻撃を軽減する</a>をご覧ください。</td>
    </tr>

    <tr>
      <td>`nonce`</td>
      <td>（`id_token token`を含む`response_type`に必要、そうでない場合は推奨）<a href="/docs/ja-JP/ja-jp/api-auth/tutorials/nonce">トークンリプレイ攻撃を防ぐために使用される</a>、アプリが初期要求に追加し、Auth0がIDトークンに含める暗号的にランダムな文字列。</td>
    </tr>

    <tr>
      <td>`connection`</td>
      <td>（任意）特定の接続でユーザーにサインインを強制します。たとえば、`github`の値を渡して、GitHubアカウントでログインするようにユーザーを直接GitHubに送信します。指定しなかった場合、ユーザーには、構成された接続すべてが表示されたAuth0 Lock画面が表示されます。アプリケーションの**Connections（接続）** タブで構成された接続のリストを確認できます。</td>
    </tr>

    <tr>
      <td>`organization`</td>
      <td>（任意）ユーザーを認証する時に使用する組織のID。提供されない場合、アプリケーションは**Display Organization Prompt（組織のプロンプトを表示）** に設定され、ユーザーは、認証時に組織名を入力できます。</td>
    </tr>

    <tr>
      <td>`invitation`</td>
      <td>（任意）組織の招待のチケットID。<a href="/docs/ja-JP/ja-jp/organizations/invite-members">Organizationにメンバーを招待する</a>場合、ユーザーが招待を受け入れたとき、アプリケーションは、`invitation`および`organization`のキー/値ペアを転送することで、招待の受け入れを処理する必要があります。</td>
    </tr>
  </tbody>
</table>

たとえば、アプリにログインを追加する際の認可URLのHTMLスニペットは、以下のようになります。

export const codeExample2 = `<a href="https://{yourDomain}/authorize?
  response_type=id_token token&
  response_mode=form_post&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=read:tests&
  state=xyzABC123&
  nonce=eq...hPmz">
  Sign In
</a>`;

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

<div id="response">
  ### 応答
</div>

すべてが成功すると`、HTTP 302`応答を受け取ります。要求された資格情報は本文にエンコードされます。

```lines theme={null}
HTTP/1.1 302 Found
Content-Type: application/x-www-form-urlencoded
id_token=eyJ...acA&
state=xyzABC123
```

返される値は、`response_type`として何を要求したかによって異なります。

<table class="table">
  <thead>
    <tr>
      <th>応答タイプ</th>
      <th>コンポーネント</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>id\_token</td>
      <td>IDトークン</td>
    </tr>

    <tr>
      <td>token</td>
      <td>アクセストークン（および`expires_in`と`token_type`の値）</td>
    </tr>

    <tr>
      <td>id\_token token</td>
      <td>IDトークン、アクセストークン（および`expires_in`と`token_type`の値）</td>
    </tr>
  </tbody>
</table>

Auth0は、認可URLへの呼び出しに含めた状態値も返します。

<Warning>
  トークンは、検証してから保存します。操作方法については、「[IDトークンの検証](/docs/ja-JP/ja-jp/secure/tokens/id-tokens/validate-id-tokens)」および「[アクセストークンを検証する](/docs/ja-JP/ja-jp/secure/tokens/access-tokens/validate-access-tokens)」を参照してください。
</Warning>

IDトークンには、デコードして抽出する必要があるユーザー情報が含まれています。

<div id="use-cases">
  ## ユースケース
</div>

<div id="basic-authentication-request">
  ### 基本的な認証要求
</div>

この例では、手順1でユーザーを認可する際に行う最も基本的な要求について説明します。Auth0のログイン画面を表示して、構成されている接続でユーザーがサインインできるようにします。

export const codeExample3 = `https://{yourDomain}/authorize?
    response_type=id_token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    nonce=NONCE`;

<AuthCodeBlock children={codeExample3} language="text" lines />

これによってIDトークンが返され、リダイレクトURLから解析することができます。

<div id="request-users-name-and-profile-picture">
  ### ユーザーの名前とプロファイルの写真を要求する
</div>

通常のユーザー認証に加えて、この例では名前や写真など、追加のユーザー詳細情報を要求する方法について説明します。

ユーザーの名前や写真を要求するには、ユーザーを認可する際に、適切なスコープを追加する必要があります。

export const codeExample4 = `https://{yourDomain}/authorize?
    response_type=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state=STATE&
    nonce=NONCE`;

<AuthCodeBlock children={codeExample4} language="text" lines />

これで、IDトークンには要求された名前と写真のクレームが含まれます。IDトークンをデコードする際には、以下のようになります。

```json lines theme={null}
{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}
```

<div id="request-user-log-in-with-github">
  ### GitHubでのユーザーログインを要求する
</div>

通常のユーザー認証に加えて、この例では、ユーザーをGitHubなどのソーシャルIDプロバイダーへ直接送る方法について説明します。この例を利用するには、[［Auth0 Dashboard］>［Authentication（認証）］>［Social（ソーシャル）］](https://manage.auth0.com/#/connections/social)の順に移動し、適切な接続を構成します。**［Settings（設定）］** タブから接続名を取得します。

ユーザーをGitHubログイン画面に直接送るには、ユーザーを認可する際に`connection`パラメーターを渡し、その値を接続名（この場合、`github`）に設定する必要があります。

export const codeExample5 = `https://{yourDomain}/authorize?
    response_type=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state=STATE&
    nonce=NONCE&
    connection=github`;

<AuthCodeBlock children={codeExample5} language="text" lines />

これで、`sub`クレームがGitHubから返されたユーザーの一意のIDとともにIDトークンに表示されます。IDトークンをデコードする際には、以下のようになります。

```json lines theme={null}
{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}
```

<div id="learn-more">
  ## もっと詳しく
</div>

* [OAuth 2.0の認可フレームワーク](/docs/ja-JP/ja-jp/authenticate/protocols/oauth)
* [OpenID Connectのプロトコル](/docs/ja-JP/ja-jp/authenticate/protocols/openid-connect-protocol)
* [トークン](/docs/ja-JP/ja-jp/secure/tokens)
* [暗黙フロー使用時にリプレイ攻撃を軽減する](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow)
* [シングルページWebアプリケーションを登録する](/docs/ja-JP/ja-jp/get-started/auth0-overview/create-applications/single-page-web-apps)
* [付与タイプの更新](/docs/ja-JP/ja-jp/get-started/applications/update-grant-types)