> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0.js v9の参考情報

> auth0.js v9をインストール・初期化・使用する方法について説明します。

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

Auth0.jsは、Auth0クライアント側ライブラリーです。[ユニバーサルログイン](/docs/ja-jp/universal-login)と一緒に使用することをお勧めします（ユニバーサルログインは、可能な限り使用してください）。SPAでauth0.jsを使用すると、Auth0での認証・認可が簡単になります。

ライブラリーの完全なAPIドキュメントは[こちら](https://auth0.github.io/auth0.js/index.html)です。

<Warning>
  Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定して**同じドメインにアプリをホスト** しないと、[クロスオリジン認証の信頼性が欠ける可能性があります](/docs/ja-jp/authenticate/login/cross-origin-authentication)。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。
</Warning>

## そのまま使えるサンプル

auth0.jsライブラリーの[サンプルディレクトリ](https://github.com/auth0/auth0.js/tree/master/example)は、そのまま使えるアプリで、auth0.jsを手軽に試してみたいときに役立ちます。実行するには、以下の簡単な手順に従います。

1. [node](http://nodejs.org/)がインストールされていない場合は、ここでインストールします。
2. このプロジェクトのルートディレクトリで`npm install`を実行して、依存関係をダウンロードします。
3. 最後に、このプロジェクトのルートから`npm start`を実行し、ノードサーバー（通常は`http://localhost:3000/example`）で実行中のアプリに移動します。

## セットアップと初期化

それでは、プロジェクトにauth0.jsを統合しましょう。ここでは、[インストールの方法](#installation-options)、[auth0.jsの初期化](#initialization)、[サインアップ](#signup)、[ログイン](#login)、[ログアウト](#logout)などについて説明します。

### 埋め込みログイン用にAuth0アプリケーションを構成する

埋め込みログインを実装するときは、ライブラリが隠しiframe内でのオリジン間の呼び出しを使用して認証を行います。これを安全に行うためには、Auth0がアプリケーションをホストしているドメインを知っている必要があります。

**［Allowed Web Origins（許可されているWebオリジン）］** フィールドにドメインを追加します。このフィールドがDashboardの[［Application Settings（アプリケーションの設定）］](https://manage.auth0.com/#/application/\{yourClientId}/settings)に表示されます。

### インストールオプション

プロジェクトでauth0.jsを使用するには、いくつかのオプションがあります。ニーズに合わせて以下のいずれかを選択します。

[npm](https://npmjs.org)または[yarn](https://yarnpkg.com)を使用してインストールする：

```lines theme={null}
npm install auth0-js

yarn add auth0-js
```

`auth0-js`モジュールをインストールしたら、それをすべての依存関係と一緒にバンドルするか、以下を使用してインポートする必要があります。

```python lines theme={null}
import auth0 from 'auth0-js';
```

別の方法として、CDNを介してスクリプトをインクルードすることもできます。

```javascript lines theme={null}
<script src="https://cdn.auth0.com/js/auth0/9.18/auth0.min.js"></script>
```

### 初期化

Auth0アプリケーションの新しいインスタンスを次のように初期化します。

export const codeExample1 = `<script type="text/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       '{yourDomain}',
    clientID:     '{yourClientId}'
  });
</script>`;

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

#### 使用可能なパラメーター

`webAuth`をインスタンス化する際に、`options`オブジェクトで渡さなければならない必須のパラメーターが2つあります。さらにオプションで渡せるパラメーターもあります。

| パラメーター                        | 必須   | 説明                                                                                                                                                                                                                                  |
| ----------------------------- | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `domain`                      | 必須   | （文字列）Auth0のアカウントのドメインです（例：myaccount.auth0.com）。                                                                                                                                                                                     |
| `clientID`                    | 必須   | （文字列）Auth0のクライアントIDです。                                                                                                                                                                                                              |
| `redirectUri`                 | 任意\* | （文字列）デフォルトで使用される`redirectUri`です。デフォルトでは空文字列（none）です。**ここでグローバルな`redirectUri`の値を設定しない場合には、使用する*それぞれの*メソッドでredirectUriの値を設定する必要があります。**                                                                                               |
| `scope`                       | 任意   | （文字列）アプリケーションが使用するデフォルトのスコープです。スコープを使用すると、要求にある特定のフィールドで特定のクレームを返すことができます。詳細については、\[スコープについてのドキュメント]（/scopes）をお読みください。                                                                                                              |
| `audience`                    | 任意   | （文字列）APIへのアクセス要求にデフォルトで使用されるオーディエンスです。                                                                                                                                                                                              |
| `responseType`                | 任意\* | （文字列）デフォルトで使用される`responseType`です。`code`、`token`、`id_token`の値をスペースで区切った任意のリストです。デフォルトは`'token'`です。ただし、`redirectUri`が提供された場合には、`'code'`がデフォルトになります。**グローバルな`responseType`の値を設定しない場合には、使用する*それぞれの*メソッドで`responseType`の値を設定する必要があります。** |
| `responseMode`                | 任意   | （文字列）このオプションはデフォルトで省略されます。`'form_post'`に設定して、トークンやコードを`'redirectUri'`にPOSTで送信することもできます。対応されている値は`query`、`fragment`、`form_post`です。                                                                                                   |
| `leeway`                      | 任意   | （整数）IDトークンの有効期限に関連して、クロックスキューを許容するため余裕秒数の値です。                                                                                                                                                                                       |
| `_disableDeprecationWarnings` | 任意   | （ブール値）廃止警告を無効にします。デフォルトは`false`です。                                                                                                                                                                                                  |

クロックスキューの問題により、時折「`The token was issued in the future`（トークンが未来に発行された）」というエラーが発生することがあります。`leeway`パラメーターを使用して、IDトークンの有効期限までに数秒の余裕を持たせ、これを防ぎます。

##### Scope（スコープ）

auth0.js v9でのデフォルトの`スコープ`値は、`openid profile email`です。

<Card title="Auth0.jsをローカルで実行する">
  auth0.jsの初期化時に少なくとも上記のスコープを手動で指定しなかった場合、Webサイトが`http://localhost`または`http://127.0.0.1`から実行されている際に`getSSOData()`メソッドを呼び出すと、ブラウザーコンソールに以下のエラーが表示されます。

  `Consent required.When using getSSOData, the user has to be authenticated with the following scope: openid profile email`（同意が必要です。getSSODataを使用する場合、ユーザーはopenid profile emailのスコープで認証される必要があります）

  このエラーは、アプリケーションを運用環境で実行している場合や、スコープに`openid profile email`を指定した場合には発生しません。詳細については、「[ユーザーの同意とサードパーティーアプリケーション](/docs/ja-jp/get-started/applications/confidential-and-public-applications/user-consent-and-third-party-applications)」をお読みください。
</Card>

## ログイン

ログインのメソッドは、アプリケーションで必要なauthの種類に従って選ぶことができます。

### webAuth.authorize()

`authorize()`メソッドは、ユニバーサルログイン経由でユーザーをログインさせる場合や、以下の例に示すようにソーシャル接続経由でログインさせる場合に使用できます。このメソッドは、Authentication APIの`/authorize`エンドポイントを呼び出し、`options`オブジェクト経由でさまざまなパラメーターを取ることができます。

| パラメーター         | 必須 | 説明                                                                                                                                                                                                                                                                                                                    |
| -------------- | -- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `audience`     | 任意 | （文字列）APIへのアクセス要求にデフォルトで使用されるオーディエンスです。                                                                                                                                                                                                                                                                                |
| `connection`   | 任意 | （文字列）アプリケーションに使用可能なすべての接続を提示するのではなく、使用するべき接続を指定します。                                                                                                                                                                                                                                                                   |
| `scope`        | 任意 | （文字列）認可を要求したいスコープです。スペースで区切る必要があります。ユーザーについてのあらゆる標準OIDCスコープを要求することができます。たとえば、`profile`や`email、[名前空間形式に準拠したカスタムクレーム](/docs/tokens/guides/create-namespaced-custom-claims)、呼び出すAPIが対応しているスコープ（`read:contacts`など）を要求することができます。&lt;dfn data-key="refresh-token"&gt;リフレッシュトークン&lt;/dfn&gt;を取得するには、`offline\_access\`を含めます。 |
| `responseType` | 任意 | （文字列）`code`、`token`、`id_token`の値をスペースで区切った任意のリストです。デフォルトは`'token'`です。ただし、`redirectUri`が提供された場合には、`'code'`がデフォルトになります。                                                                                                                                                                                                 |
| `clientID`     | 任意 | （文字列） Auth0のクライアントIDです。                                                                                                                                                                                                                                                                                               |
| `redirectUri`  | 任意 | （文字列）ユーザーが認可された後に、Auth0がブラウザーをリダイレクトするURLです。                                                                                                                                                                                                                                                                          |
| `state`        | 任意 | （文字列） リダイレクト間で維持される任意の値です。CSRF攻撃の軽減や、認証プロセスが完了した後で必要になるかもしれない任意のコンテキスト情報（リターンURL）に便利です。詳細については、「[状態パラメーター](/docs/ja-jp/protocols/oauth2/oauth-state)」を参照してください。指定されない場合、シングルページアプリケーションに限り、auth0.jsがstateの生成と検証を自動的に行います。                                                                                             |
| `prompt`       | 任意 | （文字列）値に`login`を指定すると、現在のセッションにかかわらず、ログインページの表示を強制します。値に`none`を指定すると、セッションが既に存在する場合はログインをバイパスしようとします。(詳細については、「[サイレント認証](/docs/ja-jp/sso/current/single-page-apps#silent-authentication)」の説明を参照してください)。                                                                                                                |

ホスト型のログインでは、`/authorize()`メソッドを呼び出す必要があります。
`webAuth.authorize({
//Any additional options can go here
});`

ソーシャルログインの場合、`connection`パラメーターを指定する必要があります。
`webAuth.authorize({
connection: 'twitter'
});`

### webAuth.popup.authorize()

ポップアップ認証の場合は、`popup.authorize`メソッドを使用できます。ホスト型のログインページでは、ポップアップ認証は使用できません。通常、ポップアップ認証は、ページ全体のリダイレクト時に現在のステータスが失われないようにするために、シングルページアプリで使用します。

ポップアップを使ったデフォルト認可（ユーザーにAuth0のユニバーサルログインが表示されます）：

```javascript lines theme={null}
webAuth.popup.authorize({
  responseType: 'token'
  redirectUri: 'https://{yourApp}/popup_response_handler.html'
  //Any additional options can go here
}, function(err, authResult) {
  //do something
});
```

ポップアップを使用したソーシャルログインの場合は、`authorize`を使用します。

```javascript lines theme={null}
webAuth.popup.authorize({
  responseType: 'token'
  redirectUri: 'https://{yourApp}/popup_response_handler.html',
  connection: 'twitter'
}, function(err, authResult) {
  //do something
});
```

#### ポップアップ認証の結果の処理

ポップアップ認証を使用する場合、`redirectUri`を指定する必要があります。ここでは、宛先のページが`webAuth.popup.callback`メソッドを使用して認可の結果をコールバックに知らせます。簡単な実装は、以下のようになります：

```html lines theme={null}
<!-- popup_response_handler.html -->
<html>
  <body>
    <script src="https://cdn.auth0.com/js/auth0/9.18/auth0.min.js"></script>
    <script type="text/javascript">
      var webAuth = new auth0.WebAuth({
        domain:       '{yourDomain}',
        clientID:     '{yourClientId}'
      });
      webAuth.popup.callback();
    </script>
  </body>
</html>
```

このような最小限の機能性のみを備えた（この応答を処理するためだけにアプリケーション全体を再読み込みしない）ハンドラーが理想的です。
Dashboardのアプリケーション構成ページで、`redirectUri`をアプリケーションの **［Allowed Callback URLs（許可されているコールバックURL）］** リストに追加する必要があります。

### webAuth.login()

<Warning>
  Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定して**同じドメインにアプリをホスト** しないと、[クロスオリジン認証の信頼性が欠ける可能性があります](/docs/ja-jp/authenticate/login/cross-origin-authentication)。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。
</Warning>

`login`メソッドでは、`/co/authenticate`を使用して、データベース接続の[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)を行うことができます。

| パラメーター     | 必須 | 説明                                                        |
| ---------- | -- | --------------------------------------------------------- |
| `username` | 任意 | （文字列）認証用に提示するユーザー名。**次のどちらかが必要です：**`username`または`email`   |
| `email`    | 任意 | （文字列）認証用に提示するメールアドレス。**次のどちらかが必要です：**`username`または`email` |
| `password` | 必須 | （文字列）認証用に提示するパスワード。                                       |
| `realm`    | 必須 | （文字列）認証の対象となるデータベース接続の名前。                                 |

```javascript lines theme={null}
webAuth.login({
  realm: 'tests',
  username: 'testuser',
  password: 'testpass',
});
```

### webAuth.crossOriginVerification()

`crossOriginVerification()`メソッドは、ブラウザーでサードパーティのクッキーが無効になっている顧客にクロスオリジン認証を提供するために使用できます。この用途の詳細については、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)のドキュメントをお読みください。

### buildAuthorizeUrl(options)

`buildAuthorizeUrl`メソッドを使用して`/authorize` URLを構築し、新しいトランザクションを初期化することができます。ブラウザーベースの（パッシブ）認証を実装したいときは、このメソッドを使用します。

export const codeExample2 = `// Calculate URL to redirect to
var url = webAuth.client.buildAuthorizeUrl({
  clientID: '{yourClientId}', // string
  responseType: 'token id_token', // code
  redirectUri: 'https://{yourApp}/callback',
  state: '{yourState}',
  nonce: '{yourNonce}'
});

// Redirect to url
// ...`;

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

`state`パラメーターは、Auth0が返す不透明な値です。このメソッドは、CSRF攻撃を防ぐのに有効なため、`webAuth.authorize()`を呼び出す代わりに自分でURLにリダイレクトを行う場合には指定する必要があります。詳細については、「[Stateパラメーター](/docs/ja-jp/secure/attack-protection/state-parameters)」を参照してください。

### シングルサインオンと埋め込み認証

埋め込みログインのあるアプリがシングルサインオン（<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=single-sign-on" tip="シングルサインオン（SSO）: ユーザーが1つのアプリケーションにログインした後、そのユーザーを他のアプリケーションに自動的にログインさせるサービス。" cta="用語集の表示">SSO</Tooltip>）を使用するには、2つの条件を満たす必要があります。

1. SSOを行おうとするアプリケーションの両方が、ファーストパーティーのアプリケーションでなくてはなりません。サードパーティーのアプリケーションではSSOが動作しません。
2. カスタムドメインを使用していること、SSOを実装しようとしているアプリケーションとAuth0テナントが同じドメインにあることが必要です。従来、Auth0ドメインの形式は`foo.auth0.com`ですが、カスタムドメインを使用すると、該当するすべてのアプリケーションとAuth0テナントに同じドメインを使用してCSRF攻撃のリスクを回避できます。

埋め込みログインの実装では、SSOをセットアップする代わりに、ユニバーサルログインの使用をお勧めします。ユニバーサル ログインは、SSOを実行するための最も信頼性が高く安定した方法であり、アプリケーションに複数のドメインを使用する必要がある場合や、[サードパーティアプリケーション](/docs/ja-jp/get-started/applications/confidential-and-public-applications/enable-third-party-applications)を使用する必要がある場合に実行できる唯一の方法です。

## パスワードレスログイン

パスワードレス認証は、ユーザーがメールやテキストメッセージでワンタイムパスワードを受信することにより、ログインできるようにします。それには、パスワードレス処理を開始し、コード（またはリンク内のコード）を生成してユーザーに送信し、検証方法を介してユーザーの資格情報を承認する必要があります。このプロセスは、ログイン画面の形で実行し、ユーザーにメールアドレス（または電話番号）とそこに送信したばかりのコードの入力を求めます。コードではなく、パスワードレスのリンクを送信することもできます。ユーザーは、メールやテキストに含まれているリンクをクリックするだけでエンドポイントに到達し、このデータが同じ検証方法を使って自動的に検証されます（ユーザーが手動でコードを入力しない点のみが異なります）。

パスワードレスを使用するには、auth0.jsを`redirectUri`で初期化し、`responseType: 'token'`をに設定します。

export const codeExample3 = `var webAuth = new auth0.WebAuth({
  clientID: '{yourClientId}',
  domain: '{yourDomain}',
  redirectUri: 'http://example.com',
  responseType: 'token id_token'
});`;

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

### パスワードレス認証を開始する

auth0.jsを使用したパスワードレス認証の最初のステップは`passwordlessStart`メソッドです。このメソッドにはいくつかのパラメーターがあり、その`options`オブジェクト内で渡すことができます。

| パラメーター        | 必須 | 説明                                                            |
| ------------- | -- | ------------------------------------------------------------- |
| `connection`  | 必須 | （文字列）コード/リンクをユーザーに送信する方法を指定します。値は`email`または`sms`で指定する必要があります。 |
| `send`        | 必須 | （文字列）値は`code`または`link`で指定する必要があります。`null`の場合、リンクが送信されます。      |
| `phoneNumber` | 任意 | （文字列）SMS経由でコードまたはリンクを送るのに使用するユーザーの電話番号。                       |
| `email`       | 任意 | （文字列）メール経由でコードまたはリンクを送信するのに使用するユーザーのメール。                      |

パスワードレスのトランザクションを開始するには、オプションの`phoneNumber`と`email`パラメーターのうち、必ず1つを送信する必要があることにご注意ください。

```javascript lines theme={null}
webAuth.passwordlessStart({
    connection: 'email',
    send: 'code',
    email: 'foo@bar.com'
  }, function (err,res) {
    // handle errors or continue
  }
);
```

### パスワードレス認証を完了する

コードを送信する場合は、ユーザーにコードの入力を求める必要があります。コードを処理してユーザーを認証するには、`passwordlessLogin`メソッドを使用します。このメソッドには、その`options`オブジェクト内で送信できるパラメーターがいくつかあります。

| パラメーター             | 必須 | 説明                                                                                             |
| ------------------ | -- | ---------------------------------------------------------------------------------------------- |
| `connection`       | 必須 | （文字列）コード/リンクをユーザーに送信する方法を指定します。値は`email`または`sms`のいずれかで、`passwordlessStart`に渡される値と同じでなければなりません。 |
| `verificationCode` | 必須 | （文字列）ユーザーに送信されるコード（コードまたはリンク内に埋め込まれる）。                                                         |
| `phoneNumber`      | 任意 | （文字列）SMS経由でコードまたはリンクが送られたユーザーの電話番号。                                                            |
| `email`            | 任意 | （文字列）メール経由でコードまたはリンクが送られたユーザーのメール。                                                             |

`passwordlessStart`と同様に、パスワードレスのトランザクションを確認するためには、オプションの`phoneNumber`と`email`パラメーターのうち、必ず1つを送信する必要があります。

`passwordlessLogin`を使用するには、最初にWebAuthを初期化する際に、`redirectUri`と`responseType`のオプションを指定する必要があります。

```javascript lines theme={null}
webAuth.passwordlessLogin({
    connection: 'email',
    email: 'foo@bar.com',
    verificationCode: '389945'
  }, function (err,res) {
    // handle errors or continue
  }
);
```

## authResultを抽出してユーザー情報を取得する

認証が行われたら、`parseHash`メソッドを使用して、ユーザーがアプリケーションにリダイレクトされた際にURLのハッシュフラグメントを解析し、Auth0の認証応答の結果を抽出することができます。これは、状況に合わせて、（メインアプリケーションにリダイレクトする）コールバックページで、またはページ内で処理できます。

`parseHash`メソッドは、以下のパラメーターを含む`options`オブジェクトを受け付けます。

| パラメーター  | 必須 | 説明                                                                                              |
| ------- | -- | ----------------------------------------------------------------------------------------------- |
| `state` | 任意 | （文字列）アプリケーションにリダイレクトされるときにAuth0が含める最初の要求にアプリケーションが追加する不透明型の値。この値は、CSRF攻撃を防ぐために、auth0.jsで使用されます。 |
| `nonce` | 任意 | （文字列）IDトークンの検証に使用される                                                                            |
| `hash`  | 任意 | （文字列）URLハッシュ（指定されていない場合は、`window.location.hash`がデフォルトで使用される）                                    |

`parseHash`が返すauthResultオブジェクトの内容は、どの認証パラメーターが使われたかによって異なります。次のようなものが含まれます。

| アイテム          | 説明                              |
| ------------- | ------------------------------- |
| `accessToken` | `audience`によって指定されたAPIのアクセストークン |
| `expiresIn`   | `accessToken`の有効期限（秒）が含まれる文字列   |
| `idToken`     | ユーザープロファイル情報が含まれるIDトークンJWT      |

```javascript lines theme={null}
webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) {
  if (err) {
    return console.log(err);
  }

  webAuth.client.userInfo(authResult.accessToken, function(err, user) {
    // Now you have the user's information
  });
});
```

上に示すように、`client.userInfo`メソッドは、返された`accessToken`を渡して呼び出すことができます。その場合、`/userinfo`エンドポイントに要求が送られ、以下の例と同様の形式で、ユーザー情報が入った`user`オブジェクトが返されます。

```json lines theme={null}
{
    "sub": "auth0|123456789012345678901234",
    "nickname": "johnfoo",
    "name": "johnfoo@gmail.com",
    "picture": "https://gravatar.com/avatar/example.png",
    "updated_at": "2018-05-07T14:16:52.013Z",
    "email": "johnfoo@gmail.com",
    "email_verified": "false"
}
```

この情報を使って、アプリケーションのニーズに合わせ、何らかの処理を行うことができます。1つの例として、<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=management-api" tip="Management API: 顧客が管理タスクを実行できるようにするための製品。" cta="用語集の表示">Management API</Tooltip>を使ってユーザーの全プロファイル情報を取得する方法をご紹介します。

## nonceの使用

デフォルトでは（および`responseType`に`id_token`が含まれている場合）、`auth0.js`は`webAuth.authorize`を呼び出す時にランダムな`nonce`を生成し、これをローカルストレージに保存し、それを`webAuth.parseHash`で取り出します。このデフォルトの動作はほとんどのケースに適していますが、場合によっては開発者が`nonce`を管理しなければならないこともあります。
開発者が生成した`nonce`を使用する場合、`webAuth.authorize`と`webAuth.parseHash`の両方にオプションとしてこれを提供する必要があります。
`webAuth.authorize({<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=nonce" tip="Nonce: リプレイ攻撃を検出および防止するために、認証プロトコルで1回だけ発行される任意の数値。" cta="用語集の表示">nonce</Tooltip>:'1234', responseType:'token id_token'});
webAuth.parseHash({nonce:'1234'}, callback);`

`webAuth.authorize`の代わりに`webAuth.checkSession`を呼び出す場合は、`checkSession`のオプションとしてカスタム`nonce`のみを指定する必要があります。

```javascript lines theme={null}
webAuth.checkSession({
  nonce: '1234',
}, function (err, authResult) {
    ...
});
```

`webAuth.checkSession`メソッドは、返されたIDトークンの`nonce`クレームがそのオプションと同じであることを自動的に確認します。

## エラーコードと説明

Auth0.jsが埋め込みログインに使用される場合、`/co/authenticate`エンドポイントが使用されますが、以下のようなエラーが生じる可能性があります。

<Warning>
  エラーの説明は、人間が判読できるように書かれています。この説明は**コードを用いて解析するものではありません** 。また、いつでも変更される可能性があります。
</Warning>

| ステータス | コード                           | 説明                                                                             |
| ----- | ----------------------------- | ------------------------------------------------------------------------------ |
| 400   | invalid\_request              | 無効な要求本文。client\_id、credential\_type、username、otp、realmのすべてが必要で、これ以外があってはなりません。 |
| 401   | unauthorized\_client          | クロスオリジンログインは許可されていません。                                                         |
| 400   | unsupported\_credential\_type | 不明な資格情報タイプのパラメーター。                                                             |
| 400   | invalid\_request              | 不明な領域の存在しない接続。                                                                 |
| 403   | access\_denied                | 間違ったメールアドレスまたはパスワード。                                                           |
| 403   | access\_denied                | 認証エラー。                                                                         |
| 403   | blocked\_user                 | ブロックされたユーザー。                                                                   |
| 401   | password\_leaked              | 使用しているパスワードは（このアプリケーションではなく）データ侵害により以前開示されたため、このログイン試行はブロックされました。              |
| 429   | too\_many\_attempts           | 複数の連続したログイン試行の後にアカウントがブロックされました。ご希望の連絡方法を使用して、ブロック解除の手順を記載した通知を送信しました。         |
| 429   | too\_many\_attempts           | 疑わしいログイン動作を検知したため、今後の試行はブロックされます。管理者に問い合わせてください。                               |

また、`error`または`error_description`プロパティがなくても、一般エラーの403が起きることもあります。応答のボディは、次のようになります：
`Origin https://test.app is not allowed.`（オリジンの[https://test.appは許可されていません）](https://test.appは許可されていません）)

## ログアウト

ユーザーをログアウトさせるには、`logout()`メソッドを使用します。このメソッドは、次のようなパラメータを含むoptionsオブジェクトを受け取ります。

`clientID`パラメーターが含まれている場合、提供された`returnTo` URLは、[Auth0 Dashboard](https://manage.auth0.com/#)のアプリケーションの **［Allowed Logout URLs（許可されているログアウトURL）］** に記載されている必要があります。ただし、`clientID`パラメーターが含まれていない場合は、`returnTo`URLは[Auth0 dashboard](https://manage.auth0.com/#)のアカウントレベルの **［Allowed Logout URLs（許可されているログアウトURL）］** に記載されている必要があります。

```javascript lines theme={null}
webAuth.logout({
  returnTo: 'some url here',
  clientID: 'some client ID here'
});
```

## サインアップ

ユーザーのサインアップには、`signup`メソッドを使用します。このメソッドは、次のようなパラメータを含むoptionsオブジェクトを受け取ります。

| パラメーター          | 必須   | 説明                                                                                                       |
| --------------- | ---- | -------------------------------------------------------------------------------------------------------- |
| `email`         | 必須   | （文字列）ユーザーのメールアドレス                                                                                        |
| `password`      | 必須   | （文字列） ユーザーが希望するパスワード                                                                                     |
| `username`      | 必須\* | （文字列） ユーザーが希望するユーザー名<br />\*データベース接続を使用し、**［Requires Username（ユーザー名を必要とする）］** が有効な場合は必須                  |
| `connection`    | 必須   | （文字列）ユーザーアカウントを作成しようとするアプリケーション上のデータベース接続名                                                               |
| `user_metadata` | 任意   | （JSONオブジェクト）ユーザー情報に使用される追加の属性。[user\_metadata](/docs/ja-jp/users/concepts/overview-user-metadata)に保存されます |

サインアップはデータベース接続用です。`signup`メソッドの例とフォームのサンプルコードをこちらに示します。

```html lines theme={null}
<h2>Signup Database Connection</h2>
<input class="signup-email" />
<input type="password" class="signup-password" />
<input type="button" class="signup-db" value="Signup!" />
<script type="text/javascript">
    $('.signup-db').click(function (e) {
        e.preventDefault();
        webAuth.signup({
            connection: 'Username-Password-Authentication',
            email: $('.signup-email').val(),
            password: $('.signup-password').val(),
            user_metadata: { plan: 'silver', team_id: 'a111' }
        }, function (err) {
            if (err) return alert('Something went wrong: ' + err.message);
            return alert('success signup without login!')
        });
    });
</script>
```

## checkSessionを使った新しいトークンの取得

`checkSession`メソッドを使用すると、すでにドメインに対するAuth0認証が済んでいるユーザーに対して、新しいトークンを取得することができます。このメソッドは、通常であれば、`authorize`に送信される有効なOAuth2パラメーターをすべて受け入れます。省略した場合は、Auth0の初期化時に指定されたパラメーターが使用されます。

`checkSession`への呼び出しは、`webAuth`が初期化された際にオーディエンスとして指定されたAPIの新しいトークンを取得するために使用することができます。

```javascript lines theme={null}
webAuth.checkSession({}, function (err, authResult) {
  // err if automatic parseHash fails
  ...
});
```

`authResult`の形式については、「[authResultを抽出してユーザー情報を取得する](#extract-the-authresult-and-get-user-info)」を参照してください。

また、`audience`と`scope`を指定することによって、`webAuth`の初期化の際に使用されたAPIとは異なるAPIのトークンを取得することもできます。

```javascript lines theme={null}
webAuth.checkSession(
  {
    audience: `https://mydomain/another-api/˜`,
    scope: 'read:messages'
  }, function (err, authResult) {
  // err if automatic parseHash fails
  ...
});
```

`checkSession()`では、設定した[ルール](/docs/ja-jp/customize/rules)がすべてトリガーされるため、使用する前に[Dashboard](https://manage.auth0.com/#/rules)でルールを確認してください。

`/authorize`への実際のリダイレクトはiframe内で起こるため、アプリケーションの再読み込みやアプリケーションからのリダイレクトは行われません。

ただし、ブラウザーではサードパーティのクッキーが有効になっている **必要があります**。有効になっていなければ、**checkSession()** は現在のユーザーのセッションにアクセスできません（ユーザーに何も表示せずに新しいトークンを取得することが不可能になります）。ユーザーが[SafariのITPを有効](/docs/ja-jp/troubleshoot/authentication-issues/renew-tokens-when-using-safari)にしている場合にも同様のことが起こります。

[Dashboard](https://manage.auth0.com/#)のアプリケーションの **［Settings（設定）］** の下にあるAuth0アプリケーションの **［Allowed Web Origins（許可されたWebオリジン）］** リストに、認可要求の送信元となるURLを追加することを忘れないでください。

<Warning>
  接続がソーシャル接続で、Auth0開発者キーを使用する場合、`checkSession`呼び出しは常に`login_required`を返します。
</Warning>

### checkSession()でのポーリング

シングルログアウトが必要な一部のマルチアプリケーションのシナリオ（あるアプリケーションからログアウトするユーザーが他のアプリケーションからもログアウトする必要があるような場合）では、`checkSession()`を使用して定期的にAuth0をポーリングし、セッションが存在するかどうかを確認するようにアプリケーションを設定できます。セッションがない場合は、ユーザーをアプリケーションからログアウトさせることができます。同じポーリング方式を使用して、シングルサインオン（SSO）のシナリオにサイレント認証を実装することができます。

ポーリング間隔として、`checkSession()`の呼び出し間隔を15分以上に設定し、レート制限の問題が生じないようにします。

## パスワードのリセット要求

パスワードリセット機能を設定しようとする場合は、`changePassword`メソッドを使用し、optionsオブジェクトを渡します。このオブジェクトには、connectionパラメーターとemailパラメーターを含めます。

```javascript lines theme={null}
$('.change_password').click(function () {
    webAuth.changePassword({
      connection: 'db-conn',
      email:   'foo@bar.com'
    }, function (err, resp) {
      if(err){
        console.log(err.message);
      }else{
        console.log(resp);
      }
    });
  });
```

すると、ユーザーに、パスワードリセット用のリンクを含んだメールが届きます。

## ユーザー管理

Management APIの機能を使うと、異なるプロバイダーからの個別のユーザーアカウントをリンクしたり、リンクを解除したりして、1つのプロファイルにまとめることができます（詳細については「[ユーザーアカウントのリンク](/docs/ja-jp/manage-users/user-accounts/user-account-linking)」を参照してください）。また、ユーザーメタデータを更新することもできます。

まず、Management APIの呼び出しに使用可能なアクセストークンを取得する必要があります。auth0.jsを初期化する際に`https://{yourDomain}/api/v2/`を指定することで、認証フローの一部としてアクセストークンを取得することができます。

[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を使用している場合、Management API呼び出しで使用するために、`webAuth`の新しいインスタンスを作成する必要があります。この場合、カスタムドメインではなく、Auth0のドメインを使用する必要があります。これはManagement API呼び出しがAuth0のドメインでのみ動作するためです。

export const codeExample4 = `var webAuth = new auth0.WebAuth({
  clientID: '{yourClientId}',
  domain: '{yourDomain}',
  redirectUri: 'http://example.com',
  audience: \`https://{yourDomain}/api/v2/\`,
  scope: 'read:current_user',
  responseType: 'token id_token'
});`;

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

また、`checkSession()`を使用してこれを行うこともできます。

export const codeExample5 = `webAuth.checkSession(
  {
    audience: \`https://{yourDomain}/api/v2/\`,
    scope: 'read:current_user'
  }, function(err, result) {
     // use result.accessToken
  }
);`;

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

必要なスコープを指定しなければなりません。以下のスコープを要求することができます。

* `read:current_user`
* `update:current_user_identities`
* `create:current_user_metadata`
* `update:current_user_metadata`
* `delete:current_user_metadata`
* `create:current_user_device_credentials`
* `delete:current_user_device_credentials`

アクセストークンを取得したら、そのアカウントのAuth0ドメインとアクセストークンを渡して新しい`auth0.Management`インスタンスを作成することができます。

export const codeExample6 = `var auth0Manage = new auth0.Management({
  domain: '{yourDomain}',
  token: 'ACCESS_TOKEN'
});`;

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

### ユーザープロファイルの取得

ユーザープロファイルデータを取得するには、`getUser()`メソッドを使用します。このメソッドには、`userId`とコールバックをパラメーターとして渡します。メソッドはユーザープロファイルを返します。ここで必要とされる`userID`は、`client.userInfo`メソッドから取得したものと同じであることにご注意ください。
`auth0Manage.getUser(userId, cb);`

### ユーザープロファイルの更新

ユーザーメタデータを更新する際は、まず`userMetadata`オブジェクトを作成し、その後`patchUserMetadata`メソッドを呼び出して、作成した`userMetadata`オブジェクトとユーザーIDを渡す必要があります。このオブジェクトの値は、同じキーを持つ既存の値を上書きするか、ユーザーメタデータに値がない場合は新しい値を追加します。ユーザーメタデータの詳細については、[メタデータ](/docs/ja-jp/manage-users/user-accounts/metadata)のドキュメントを参照してください。
`auth0Manage.patchUserMetadata(userId, userMetadata, cb);`

### ユーザーのリンク

ユーザーアカウントをリンクすると、ユーザーがどのアカウントからでも認証できるようになり、どのアカウントを使用してログインしても同じプロファイルが引き出されます。Auth0では、デフォルトですべてのアカウントが個別のプロファイルとして扱われるため、ユーザーのアカウントをリンクしたい場合は以下の手順が必要です。

`linkUser`メソッドは、2つのパラメーターを受け取ります。1つはプライマリーアカウントの`userId`、もう1つはセカンダリーアカウントのIDトークン（このIDでログイン後に取得したトークン）です。このユーザーIDは、プライマリーユーザーアカウントの一意の識別子です。このメソッドを使用する際は、IDにプロバイダーのプレフィックスを付けて渡す必要があります（例：`auth0|1234567890`や`facebook|1234567890`）。詳細については、「[ユーザーアカウントのリンク](/docs/ja-jp/users/concepts/overview-user-account-linking)」を参照してください。
`auth0Manage.linkUser(userId, secondaryUserToken, cb);`

アカウントをリンクすると、セカンダリーアカウントは、ユーザーデータベースの中で別途のアカウントとして存在しなくなり、プライマリーアカウントの一部としてしかアクセスできなくなります。
アカウントがリンクされている場合、セカンダリ―アカウントのメタデータはプライマリーアカウントのメタデータと**統合されません** 。また、リンクが解除されると、セカンダリーアカウントが再び独立した際にプライマリーアカウントのメタデータは保持されません。
