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

> IDトークンを確認して、ユーザーが多要素認証（MFA）を使用してWebアプリにログインしたかどうかを確認する方法について説明します。

# Webアプリのステップアップ認証を設定する

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) + "*****マスク済み*****";
          }
          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>;
};

ステップアップ認証を使用すると、異なる種類のリソースへのアクセスを提供するアプリケーションで、機密情報へのアクセスや特定のトランザクションの実行時に、より強力な認証方式をユーザーに要求できます。

たとえば、ユーザーが機密データを含むビューにアクセスしたりパスワードをリセットしたりできるのは、<Tooltip tip="多要素認証 (MFA): SMS で送信されるコードなど、ユーザー名とパスワードに加えて別の認証要素を使用するユーザー認証プロセス。" cta="用語集を表示" href="/ja/docs/glossary?term=multi-factor+authentication">多要素認証</Tooltip> (MFA) を使用して本人確認を行った後に限られる場合があります。

Web アプリでステップアップ認証を実現するには、Web アプリから要求があったときに MFA での認証をユーザーに求める Action を作成し、ユーザーが制限付きページにアクセスしようとした場合は、MFA に関する <Tooltip tip="IDトークン: リソースへのアクセスではなく、クライアント自体のための認証情報。" cta="用語集を表示" href="/ja/docs/glossary?term=ID+Token">IDトークン</Tooltip> の クレーム を確認して、その クレーム に MFA が含まれていなければユーザーに認証を求めます。

<div id="validate-id-tokens-for-mfa">
  ## MFA の IDトークンを検証する
</div>

ユーザーがログインすると、ユーザーのセッションに関連する情報をクレームとして含む [IDトークン](/ja/docs/secure/tokens/id-tokens/get-id-tokens) を取得します。ここで関連するクレームは `amr` (authentication methods reference) で、ログイン時に使用された認証方法を示す文字列の JSON 配列です。このクレームは IDトークンのペイロードに含まれている必要があり、値 `mfa` を含んでいなければなりません。

この値には、事前定義された [Authentication Method Reference Values](https://tools.ietf.org/html/rfc8176) のいずれかが含まれる場合があります。`mfa` 以外の値が含まれることもあるため、検証時には `amr` が存在することを確認し、その内容に `mfa` が含まれているかも確認する必要があります。

ユーザーが制限されたページへのアクセスを試みた際に、トークンからそのユーザーが MFA で認証していないことがわかった場合は、認証を再度トリガーできます。この認証は、Action を使用して MFA がトリガーされるように設定されています。ユーザーが 2 つ目の認証要素を提供すると、`amr` クレームを含む新しい IDトークンが生成され、アプリに送信されます。

1. [IDトークンを取得します](/ja/docs/secure/tokens/id-tokens/get-id-tokens)。
2. トークンの署名を検証します。これにより、トークンの送信者が正当な送信元であること、およびメッセージが途中で改ざんされていないことを確認できます。
3. 次のクレームを検証します。

| クレーム  | 説明                                                                                                                       |
| ----- | ------------------------------------------------------------------------------------------------------------------------ |
| `exp` | トークンの有効期限                                                                                                                |
| `iss` | トークンの発行者                                                                                                                 |
| `aud` | トークンの想定受信者                                                                                                               |
| `amr` | ペイロードに `amr` が存在しない場合、または値 `mfa` を含まない場合、そのユーザーは MFA でログインしていません。ペイロードに `amr` が存在し、値 `mfa` を含む場合、そのユーザーは MFA でログインしています。 |

<div id="amr-claim-exceptions">
  #### AMR クレームの例外
</div>

`amr` クレームは、次のユースケースを除き必須です。

1. ホスト型ログインフローでは、ユーザーが MFA チャレンジを正常に完了した後にのみ、`amr` クレームが IDトークンに追加されます。アプリケーションが新たに発行される IDトークンに対してサイレント認証またはリフレッシュトークンを使用する場合、ユーザーは以前に MFA でログインを完了しているため、`amr` クレームは含まれません。
2. MFA API で発行されたトークンには `amr` クレームは含まれません。`amr` クレームは、ユーザーが IDトークンを受け取る時点で使用された認証方法を示します。MFA API の認証プロセスでは、アプリケーションが認証フローを制御するため、必要に応じて MFA を強制できます。

以下の例では、ユーザーが MFA で認証した場合としていない場合で、IDトークンのペイロードに含まれうる値を比較できます。

<div id="example-values-with-mfa">
  ### 例: MFA がある場合の値
</div>

export const codeExample1 = `{
    "iss": "https://{yourDomain}/",
    "sub": "auth0|1a2b3c4d5e6f7g8h9i",
    "aud": "{yourClientId}",
    "iat": 1522838054,
    "exp": 1522874054,
    "acr": "http://schemas.openid.net/pape/policies/2007/06/multi-factor",
    "amr": [
        "mfa"
    ]
}`;

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

<div id="example-values-without-mfa">
  ### 例: MFA を使用しない値
</div>

export const codeExample2 = `{
    "iss": "https://{yourDomain}/",
    "sub": "auth0|1a2b3c4d5e6f7g8h9i",
    "aud": "{yourClientId}",
    "iat": 1522838054,
    "exp": 1522874054
}`;

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

<div id="scenario-salary-data-with-push-notifications">
  ## シナリオ: プッシュ通知を使用する給与データ
</div>

次のシナリオでは、Web アプリが username とパスワードを使用してユーザーを認証します。給与データを表示する特定の画面にアクセスする一部のユーザーは、Guardian のプッシュ認証要素による認証が必要です。

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

このシナリオでは、Dashboard で次の項目を設定する必要があります。

* [Web アプリケーションを登録する](/ja/docs/get-started/auth0-overview/create-applications/regular-web-apps)。
* [データベース接続を作成する](https://manage.auth0.com/#/connections/database)。
* プッシュ通知を使用するには、[MFA を有効にします](/ja/docs/secure/multi-factor-authentication/enable-mfa)。

<div id="create-an-action">
  ### Action を作成する
</div>

Web アプリから要求されたときに、ユーザーに MFA による認証を求める Action を作成します。[Dashboard > Actions > フロー](https://manage.auth0.com/#/actions/flows) に移動し、次の内容を含む Action を作成します。

```js lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
 const CLIENTS_WITH_MFA = ['REPLACE_WITH_{yourClientId}'];
 // 指定されたクライアントのみ実行する
 if (CLIENTS_WITH_MFA.includes(event.client.client_id)) {
 // ウェブアプリが認証リクエストでMFAを要求した場合のみMFAを求める
 if (event.transaction?.acr_values.includes('http://schemas.openid.net/pape/policies/2007/06/multi-factor')) {
 api.multifactor.enable('any', { allowRememberBrowser: false });
 }
 }
}
```

* `CLIENTS_WITH_MFA` 変数には、この Action を適用するアプリケーションの <Tooltip tip="クライアントID: Auth0 が登録済みリソースに付与する識別値です。" cta="用語集を見る" href="/ja/docs/glossary?term=client+IDs">クライアントID</Tooltip> が含まれます。不要であれば、これ (および後続の `if` 条件) を削除できます。
* `event.transaction.acr_values` プロパティは、認証コンテキストクラス参照 (`acr`) を含む文字列の配列です。これは省略可能なプロパティで、アプリケーションが認証リクエスト内でこれを <Tooltip tip="認可サーバー: ユーザーのアクセス範囲の境界を定義するのに寄与する一元管理サーバーです。たとえば、認可サーバーはユーザーが利用できるデータ、タスク、機能を制御できます。" cta="用語集を見る" href="/ja/docs/glossary?term=Authorization+Server">認可サーバー</Tooltip> に送信した場合にのみ存在します。この例では、Web アプリは認証リクエストにこれを含めますが、それは、まだ MFA で認証していないユーザーが給与情報にアクセスしようとした場合に限られます。Web アプリがこれを含める場合は、`http://schemas.openid.net/pape/policies/2007/06/multi-factor` という値を設定します。これは、認可サーバーに MFA を必須にさせたいことを示します。また、コードで設定した `api.multifactor` プロパティ値により、テナントで構成済みの利用可能ないずれかの方法を使って、ユーザーに MFA チャレンジを求めます。`api.multifactor.enable()` メソッドの詳細については、[Action Triggers: post-login API object](/ja/docs/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object) を参照してください。
* `http://schemas.openid.net/pape/policies/2007/06/multi-factor` ポリシーは、エンドユーザーが複数の認証要素、つまり MFA を提示して <Tooltip tip="OpenID: アプリケーションがログイン情報を収集・保存することなく、ユーザーのアイデンティティを検証できる認証のためのオープン標準です。" cta="用語集を見る" href="/ja/docs/glossary?term=OpenID">OpenID</Tooltip> Provider に認証する認証メカニズムを定義します。詳細については、[OpenID Provider Authentication Policy Extension 1.0](https://openid.net/specs/openid-provider-authentication-policy-extension-1_0.html) を参照してください。

<div id="configure-app">
  ### アプリを設定する
</div>

ユーザーが制限された給与情報ページにアクセスしようとした際に、MFA を使用して認証済みであることを確認するようアプリを設定します。 (ユーザーが MFA で認証されている場合、IDトークンの クレーム には、値が `mfa` の `amr` クレーム が含まれます。) ユーザーがすでに MFA で認証されている場合、Web アプリは制限されたページを表示します。そうでない場合、Web アプリは `acr_values` パラメーターに次の値を含む新しい認証リクエストを送信します。
`http://schemas.openid.net/pape/policies/2007/06/multi-factor`これにより Action がトリガーされます。

このシナリオの Web アプリは認証に [Authorization Code Flow](/ja/docs/get-started/authentication-and-authorization-flow/authorization-code-flow) を使用するため、リクエストは次のとおりです。

export const codeExample3 = `https://{yourDomain}/authorize?
        audience=https://{yourDomain}/userinfo&
        scope=openid&
        response_type=code&
        client_id={yourClientId}&
        redirect_uri={https://yourApp/callback}&
        state={yourOpaqueValue}&
        acr_values=http://schemas.openid.net/pape/policies/2007/06/multi-factor`;

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

ユーザーがMFAで認証されると、Webアプリは認可コードを受け取ります。この認可コードは新しいIDトークンと交換する必要があり、そのIDトークンには `mfa` を値とする `amr` クレームが含まれているはずです。認可コードをIDトークンと交換する方法については、[Authorization Code Flow を使用したログインの追加](/ja/docs/get-started/authentication-and-authorization-flow/authorization-code-flow/add-login-auth-code-flow) を参照してください。

<div id="validate-id-token">
  ### IDトークンを検証する
</div>

このシナリオでは、[JSON Web Token サンプルコード](https://github.com/auth0/node-jsonwebtoken)を使用して検証を行います。このコードでは、トークンの署名を検証し (`jwt.verify`) 、トークンをデコードして、ペイロードに `amr` が含まれているかどうかを確認し、含まれている場合はその結果をコンソールに出力します。

export const codeExample4 = `const AUTH0_CLIENT_SECRET = '{yourClientSecret}';
const jwt = require('jsonwebtoken');

jwt.verify(id_token, AUTH0_CLIENT_SECRET, { algorithms: ['HS256'] }, function(err, decoded) {
  if (err) {
    console.log('トークンが無効です');
    return;
  }

  if (Array.isArray(decoded.amr) && decoded.amr.indexOf('mfa') >= 0) {
    console.log('MFA が使用されました');
    return;
  }

  console.log('MFA は使用されていません');
});`;

<AuthCodeBlock children={codeExample4} language="javascript" />

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

* [IDトークン](/ja/docs/secure/tokens/id-tokens)
* [Rule の使用例](/ja/docs/customize/rules/use-cases)
* [JSON Web Token](/ja/docs/secure/tokens/json-web-tokens)
* [API 向けのステップアップ認証を設定する](/ja/docs/secure/multi-factor-authentication/step-up-authentication/configure-step-up-authentication-for-apis)