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

> Form Post を使用する Implicit Flow で利用する、暗号学的に安全な nonce を安全に生成して検証する方法を学びます。

# Implicit Flow 使用時のリプレイ攻撃を軽減する

[Implicit Flow with Form Post](/docs/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post) の使用時にリプレイ攻撃を軽減するには、[OpenID Connect (OIDC) 仕様で規定されているとおり](https://openid.net/specs/openid-connect-core-1_0.html#ImplicitAuthRequest)、認証リクエストで <Tooltip tip="Nonce: リプレイ攻撃を検出して防止するために、認証プロトコルで一度だけ発行される任意の数値。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=nonce">nonce</Tooltip> を送信する必要があります。

nonce はアプリケーションで生成され、認証リクエストの `nonce` クエリ文字列パラメーターとして送信され、Auth0 から返される <Tooltip tip="ID Token: リソースへのアクセスではなく、クライアント自体を対象とした認証情報です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=ID+Token">ID トークン</Tooltip> レスポンスに含まれます。これにより、アプリケーションは Auth0 からの ID トークンレスポンスを初回認証リクエストに対応付けることができます。

nonce をどこに含めるかについて詳しくは、[Form Post を使用する Implicit Flow で Login を追加する](/docs/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/add-login-using-the-implicit-flow-with-form-post) を参照してください。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  [Auth0.js](/docs/ja-jp/libraries/auth0js) は、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication) を使用する際に `state` パラメーターと `nonce` パラメーターを自動的に管理します。
</Callout>

<div id="generate-a-cryptographically-random-nonce">
  ## 暗号学的にランダムな nonce を生成する
</div>

暗号学的にランダムな nonce を生成する方法の1つとして、[Nano ID](https://github.com/ai/nanoid) のようなツールや、それに類するものを使う方法があります。ただし、その場合はそのツールを JavaScript コードにバンドルする必要があります。それが難しい場合は、[最新のブラウザー](http://caniuse.com/#feat=cryptography) では [Web Crypto API](https://www.w3.org/TR/WebCryptoAPI/) を使って、nonce として使える暗号学的に安全なランダム文字列を生成できることを活用できます。

```javascript lines theme={null}
function randomString(length) {
    var charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz+/'
    result = ''

    while (length > 0) {
        var bytes = new Uint8Array(16);
        var random = window.crypto.getRandomValues(bytes);

        random.forEach(function(c) {
            if (length == 0) {
                return;
            }
            if (c < charset.length) {
                result += charset[c];
                length--;
            }
        });
    }
    return result;
}
```

<div id="persist-nonces-across-requests">
  ## リクエスト間で nonce を保持する
</div>

生成された nonce は、次のいずれかの方法でウェブアプリに保持する必要があります。

* `HttpOnly` <Tooltip tip="セッションクッキー: 存在する場合、ユーザーが認証済みと見なされることを可能にするエンティティ。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=session+cookie">セッションクッキー</Tooltip>
* HTML5 のローカルストレージの値

たとえば:

```js lines theme={null}
window.localStorage.setItem('nonce', randomString(16));
```

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

Auth0 から [ID トークン](/docs/ja-jp/secure/tokens/id-tokens) が返されたら、このトークンを通常どおり[検証してデコード](/docs/ja-jp/secure/tokens/id-tokens/validate-id-tokens)する必要があります。
`nonce` クレームには、request で送信したものと完全に同じ値が含まれていなければなりません。
そうでない場合、アプリケーションは認証を拒否する必要があります。

```javascript lines theme={null}
var jwt = '...'; // 検証およびデコードされた ID トークンの本文
if (jwt.nonce === window.localStorage.getItem('nonce')) {
    // Nonce は正常です
} else {
    // Nonce が正しくありません！トークンリプレイ攻撃が行われている可能性があります
}
```

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

* [Form Post を使用する Implicit Flow](/docs/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post)
* [Form Post を使用する Implicit Flow で Login を追加する](/docs/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/add-login-using-the-implicit-flow-with-form-post)
* [OIDC を使用する Implicit Flow](/docs/ja-jp/authenticate/login/oidc-conformant-authentication/oidc-adoption-implicit-flow)