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

> Auth0.js のインストール、初期化、使用方法

# Auth0.js

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

Auth0.js ライブラリは、Auth0 用のクライアントサイド JavaScript ライブラリです。[ホスト型ログインと埋め込みログイン](/ja/docs/authenticate/login/universal-vs-embedded-login) の両方のユースケースをサポートしています。この記事では、現行バージョンである **v10** を扱います。

このライブラリの[完全な API ドキュメント](https://auth0.github.io/auth0.js/index.html)を確認してください。

<div id="migrate-from-v9-to-v10">
  ## v9 から v10 への移行
</div>

Auth0.js v10 には、CVE-2026-42280 に対するセキュリティ修正と、1 つの破壊的変更が含まれています。

| 影響対象           | 詳細                                                                                                                                                                                                   |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| RS256 を使用するアプリ | 破壊的変更はありません                                                                                                                                                                                          |
| HS256 を使用するアプリ | `parseHash()` は、これまでのように暗黙的に成功するのではなく、`invalid_token` エラーを返すようになりました。Auth0 Dashboard で RS256 に切り替えてください: **アプリケーション** > 対象のアプリ > **設定** > **詳細設定** > **OAuth** > **JsonWebToken 署名アルゴリズム** > `RS256` |

v9 の API リファレンスが必要な場合は、[npm の auth0-js パッケージ](https://www.npmjs.com/package/auth0-js?activeTab=versions)を参照して v9 バージョンを選択するか、[GitHub の v9 ソースコードと変更履歴](https://github.com/auth0/auth0.js)を参照してください。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Web アプリケーションで埋め込みログインを使用する場合、テナントに[カスタムドメインを設定](/ja/docs/customize/custom-domains)していない限り、[クロスオリジン認証](/ja/docs/authenticate/login/cross-origin-authentication)が使用されます。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを可能にするために、サードパーティ Cookie を使用します。
</Callout>

<div id="ready-to-go-example">
  ## すぐに使えるサンプル
</div>

Auth0.js ライブラリの [example ディレクトリ](https://github.com/auth0/auth0.js/tree/master/example) には、Auth0.js をすばやく簡単に試せる、すぐに使えるアプリが含まれています。実行するには:

1. [node](http://nodejs.org/) がインストールされていない場合は、先にインストールします
2. このプロジェクトのルートで `npm install` を実行して依存関係をダウンロードします
3. 最後に、このプロジェクトのルートで `npm start` を実行し、node サーバー上で動作しているアプリ (通常は `http://localhost:3000/example`) にブラウザでアクセスします。

<div id="setup-and-initialization">
  ## セットアップと初期化
</div>

以下のセクションでは、[インストール方法](#installation-options)、[`Auth0.js` の初期化](#initialization)、[サインアップ](#signup)、[ログイン](#login)、[ログアウト](#logout) などについて説明します。

<div id="configure-your-auth0-application-for-embedded-login">
  ### 埋め込みログイン用に Auth0 アプリケーションを設定する
</div>

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

そのドメインを **Allowed Web Origins** フィールドに追加します。このフィールドは、Dashboard の [Application Settings](https://manage.auth0.com/#/applications) にあります。

<div id="installation-options">
  ### インストール方法
</div>

プロジェクトで Auth0.js を使用するには、いくつかの方法があります。要件に応じて、以下のいずれかを選択してください。

[npm](https://npmjs.org) または [yarn](https://yarnpkg.com) でインストールします。

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

yarn add auth0-js
```

`auth0-js` モジュールをインストールしたら、関連するすべての依存関係とあわせてバンドルするか、次のようにインポートします。

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

または、CDN経由でスクリプトを読み込みます。

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

<div id="initialization">
  ### 初期化
</div>

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

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

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

<div id="available-parameters">
  #### 利用可能なパラメーター
</div>

`webAuth` をインスタンス化する際、`options` オブジェクトには必須パラメーターを 2 つ渡す必要があります。そのほかに任意のパラメーターもあります。

| **パラメーター**                    | **必須** | **説明**                                                                                                                                                                                                                                                                                                  |
| ----------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `domain`                      | 必須     | (String) Auth0 アカウントのドメイン (例: myaccount.auth0.com)                                                                                                                                                                                                                                                      |
| `clientID`                    | 必須     | (String) Auth0 のクライアントID                                                                                                                                                                                                                                                                                |
| `redirectUri`                 | 任意\*   | (String) デフォルトで使用される `redirectUri`。デフォルトは空文字列 (未設定) です。**ここでグローバルな `redirectUri` 値を指定しない場合は、使用する*各*メソッドごとに `redirectUri` 値を指定する必要があります。**                                                                                                                                                               |
| `scope`                       | 任意     | (String) アプリケーションで使用するデフォルトの <Tooltip tip="スコープ: アプリケーションが、オンラインリソース上に以前作成された情報を使って、ユーザーに代わって実行できる操作を決定する仕組み。" cta="用語集を見る" href="/ja/docs/glossary?term=scope%28s%29">スコープ</Tooltip>。スコープを使用すると、リクエスト内の特定のフィールドに対して特定のクレームを返すことができます。詳しくは、[スコープに関するドキュメント](/ja/docs/get-started/apis/scopes)を参照してください。 |
| `audience`                    | 任意     | (String) API アクセスをリクエストする際に使用するデフォルトのオーディエンス。                                                                                                                                                                                                                                                           |
| `responseType`                | 任意\*   | (String) デフォルトで使用される `responseType`。`code`、`token`、`id_token` の値をスペース区切りで任意に組み合わせたリストを指定できます。デフォルトは `'token'` ですが、`redirectUri` が指定されている場合は `'code'` になります。**グローバルな `responseType` 値を指定しない場合は、使用する*各*メソッドごとに `responseType` 値を指定する必要があります。**                                                            |
| `responseMode`                | 任意     | (String) このオプションはデフォルトでは省略されます。`'form_post'` に設定すると、トークンまたは code を POST で `'redirectUri'` に送信できます。サポートされる値は `query`、`fragment`、`form_post` です。                                                                                                                                                          |
| `leeway`                      | 任意     | (Integer) 秒単位の値。IDトークンの有効期限に関するクロックスキューを許容するための猶予です。                                                                                                                                                                                                                                                    |
| `_disableDeprecationWarnings` | 任意     | (Boolean) 非推奨の警告を無効にします。デフォルトは `false` です。                                                                                                                                                                                                                                                              |

クロックスキューの問題により、まれに `The token was issued in the future` というエラーが発生することがあります。これを防ぐには、`leeway` パラメーターを使用して IDトークンの有効期限に数秒の猶予を持たせることができます。

<div id="scope">
  ##### スコープ
</div>

Auth0.js v10 のデフォルトの `scope` 値は `openid profile email` です。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  **Auth0.js をローカルで実行する**

  Auth0.js の初期化時に少なくとも上記のスコープを指定せず、ウェブサイトを `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`

  本番環境でアプリケーションを実行している場合、または `openid profile email` スコープを指定している場合、これは発生しません。詳細については、[ユーザーの同意とサードパーティアプリケーション](/ja/docs/get-started/applications/third-party-applications/user-consent-and-third-party-applications) を参照してください。
</Callout>

<div id="login">
  ## Login
</div>

アプリケーションで必要な認証の種類に応じて、ログイン方法を選択できます。

<div id="webauthauthorize">
  ### webAuth.authorize()
</div>

`authorize()` メソッドは、以下の例のように、<Tooltip tip="Universal Login: アプリケーションはユーザーの本人確認を行うため、Auth0 の認可サーバーでホストされている Universal Login にリダイレクトされます。" cta="用語集を表示" href="/ja/docs/glossary?term=Universal+Login">Universal Login</Tooltip> またはソーシャル接続を通じてユーザーをログインさせる際に使用できます。このメソッドは Authentication API の `/authorize` エンドポイントを呼び出し、`options` オブジェクトを通じてさまざまなパラメーターを受け取れます。

| **パラメーター**     | **必須** | **説明**                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `audience`     | 任意     | (String) API へのアクセスをリクエストする際に使用するデフォルトのオーディエンス。                                                                                                                                                                                                                                                                                                                                                                                                |
| `connection`   | 任意     | (String) アプリケーションで利用可能なすべての接続を表示する代わりに、使用する接続を指定します。                                                                                                                                                                                                                                                                                                                                                                                           |
| `scope`        | 任意     | (String) 認可をリクエストするスコープです。スペース区切りで指定する必要があります。`profile` や `email` など、ユーザーに関する標準の OIDC スコープ、[名前空間付き形式に準拠する必要がある](/ja/docs/secure/tokens/json-web-tokens/create-custom-claims)カスタムクレーム、または対象 API がサポートする任意のスコープ (たとえば `read:contacts`) をリクエストできます。<Tooltip tip="Refresh Token: ユーザーに再度ログインさせることなく、新しい アクセストークン を取得するために使用されるトークン。" cta="用語集を表示" href="/ja/docs/glossary?term=Refresh+Token">リフレッシュトークン</Tooltip> を取得するには、`offline_access` を含めます。 |
| `responseType` | 任意     | (String) `code`、`token`、`id_token` の値をスペース区切りで組み合わせた任意のリストを指定できます。デフォルトは `'token'` ですが、`redirectUri` が指定されている場合は `'code'` になります。                                                                                                                                                                                                                                                                                                               |
| `clientID`     | 任意     | (String) Auth0 のクライアントID。                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `redirectUri`  | 任意     | (String) ユーザーへの認可が付与された後に、Auth0 がブラウザーをリダイレクトする URL。                                                                                                                                                                                                                                                                                                                                                                                           |
| `state`        | 任意     | (String) リダイレクトをまたいで維持される任意の値です。CSRF 攻撃の軽減や、認証処理の完了後に必要になるコンテキスト情報 (たとえばリターン URL) の保持に役立ちます。詳細は [State Parameter](/ja/docs/secure/attack-protection/state-parameters) を参照してください。シングルページアプリケーションで使用する Auth0.js は、state が指定されていない場合、その生成と検証を自動的に処理します。                                                                                                                                                                                           |
| `prompt`       | 任意     | (String) `login` を指定すると、現在のセッションに関係なくログインページが必ず表示されます。`none` を指定すると、すでにセッションが存在する場合はログインプロンプトをスキップしようとします (詳細は [silent authentication](/ja/docs/authenticate/single-sign-on#silent-authentication) のドキュメントを参照してください) 。                                                                                                                                                                                                                         |

ホスト型ログインでは、`/authorize()` メソッドを呼び出す必要があります。

`webAuth.authorize({//ここに追加のオプションを指定できます});`

ソーシャルログインでは、`connection` パラメーターを指定する必要があります。

`webAuth.authorize({connection: 'twitter'});`

<div id="webauthpopupauthorize">
  ### webAuth.popup.authorize()
</div>

ポップアップ認証では、`popup.authorize` メソッドを使用できます。ポップアップ認証は、ホスト型ログインページ内では使用できません。通常、ポップアップ認証は、ページ全体のリダイレクトによって現在の状態が失われるのを避けるために、シングルページアプリケーションで使用されます。

ポップアップを使用したデフォルトの認可 (Universal Login) :

```js lines theme={null}
webAuth.popup.authorize({
  responseType: 'token'
  redirectUri: 'https://YOUR_APP/popup_response_handler.html'
  //追加オプションはここに記述できます
}, function(err, authResult) {
  //処理を記述する
});
```

また、`authorize` を使用してポップアップでソーシャルログインする場合:

```js lines theme={null}
webAuth.popup.authorize({
  responseType: 'token'
  redirectUri: 'https://{yourApp}/popup_response_handler.html',
  connection: 'twitter'
}, function(err, authResult) {
  //処理を記述する
});
```

<div id="handle-popup-authentication-results">
  #### ポップアップ認証の結果を処理する
</div>

ポップアップ認証を使用する場合は、遷移先のページで `webAuth.popup.callback` メソッドを使って認可結果をコールバックに返せるよう、`redirectUri` を指定する必要があります。シンプルな実装例は次のとおりです。

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

理想的なハンドラーには、この最小限の機能だけを含めるようにしてください (つまり、レスポンスを処理するためだけにアプリケーション全体を再読み込みしないようにします) 。

`redirectUri` は、Dashboard のアプリケーション設定ページにあるアプリケーションの **Allowed Callback URLs** リストに追加する必要があります。

<div id="webauthlogin">
  ### webAuth.login()
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Web アプリケーションの埋め込みログインでは、テナントに[カスタムドメインを設定](/ja/docs/customize/custom-domains)していない限り、[クロスオリジン認証](/ja/docs/authenticate/login/cross-origin-authentication)を使用します。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを実行できるように、サードパーティ Cookie を使用します。
</Callout>

`login` メソッドは、`/co/authenticate` を使用して、データベース接続向けの[クロスオリジン認証](/ja/docs/authenticate/login/cross-origin-authentication)による埋め込みログインに使用できます。

| **パラメーター** | **必須** | **説明**                                                                   |
| ---------- | ------ | ------------------------------------------------------------------------ |
| `username` | 任意     | (String) 認証時に使用する username。**`username` または `email` のいずれか**を指定する必要があります。 |
| `email`    | 任意     | (String) 認証時に使用するメールアドレス。**`username` または `email` のいずれか**を指定する必要があります。   |
| `password` | 必須     | (String) 認証時に使用するパスワード。                                                  |
| `realm`    | 必須     | (String) 認証を行う対象のデータベース接続の名前。                                            |

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

<div id="webauthcrossoriginverification">
  ### webAuth.crossOriginVerification()
</div>

`crossOriginVerification()` メソッドは、ブラウザーでサードパーティ Cookie が無効になっているユーザーにクロスオリジン認証を提供する際に役立ちます。使用方法の詳細については、[クロスオリジン認証](/ja/docs/authenticate/login/cross-origin-authentication) を参照してください。

<div id="buildauthorizeurloptions">
  ### buildAuthorizeUrl(options)
</div>

`buildAuthorizeUrl` メソッドは、新しいトランザクションを初期化するための `/authorize` URL を構築する際に使用できます。ブラウザベースの (パッシブな) 認証を実装する場合は、このメソッドを使用してください。

export const codeExample2 = `// リダイレクト先の URL を生成
var url = webAuth.client.buildAuthorizeUrl({
  clientID: '{yourClientId}', // string
  responseType: 'token id_token', // code
  redirectUri: 'https://{yourApp}/callback',
  state: '{yourState}',
  nonce: '{yourNonce}'
});

// URL にリダイレクト
// ...`;

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

`state` パラメーターは、Auth0 から返される不透明な値です。これは CSRF 攻撃の防止に役立つ方法であり、`webAuth.authorize()` を呼び出さずに自分で URL にリダイレクトする場合は、このパラメーターを指定する必要があります。詳細については、[State Parameter](/ja/docs/secure/attack-protection/state-parameters) を参照してください。

<div id="single-sign-on-with-embedded-authentication">
  ### 埋め込み型認証でのシングルサインオン
</div>

埋め込みログインは、アプリケーションが次のアーキテクチャを共有している場合、<Tooltip tip="シングルサインオン (SSO): ユーザーが 1 つのアプリケーションにログインすると、他のアプリケーションにも自動的にログインできるようにするサービスです。" cta="用語集を見る" href="/ja/docs/glossary?term=Single+Sign-on">シングルサインオン</Tooltip> (SSO) をサポートします。

1. SSO を行うアプリケーションは、ファーストパーティアプリケーションである必要があります。サードパーティアプリケーションと埋め込みセッションを共有することはサポートされていません。
2. アプリケーションと Auth0 テナントは、[カスタムドメイン](/ja/docs/customize/custom-domains) を介してトップレベルドメインを共有している必要があります。従来の Auth0 ドメインは `foo.auth0.com` 形式です。カスタムドメインを使用すると、アプリケーションと Auth0 テナントで同じトップレベルドメインを共有できるようになり、CSRF 攻撃の防止にも役立ちます。

アーキテクチャがこれらの条件を満たしている場合は、Auth0.js を使用した埋め込み SSO が適した選択肢です。Universal Login は、複数のドメイン間、または [サードパーティアプリケーション](/ja/docs/get-started/applications/third-party-applications/configure-third-party-applications) との SSO を、セッションレイヤーを通じて自動的に処理します。また、この 2 つは同じアプリで共存できます。たとえば、プライマリサインインには Universal Login を使用し、認証要素の埋め込み登録やステップアップフローには Auth0.js を使用できます。トレードオフを比較するには、[Hosted Login vs. Embedded Login](/ja/docs/authenticate/login/universal-vs-embedded-login) を参照してください。

<div id="passwordless-login">
  ## パスワードレスログイン
</div>

<Tooltip tip="パスワードレス: 第1の認証要素としてパスワードに依存しない認証方式です。" cta="用語集を見る" href="/ja/docs/glossary?term=Passwordless">パスワードレス</Tooltip>認証では、ユーザーはメールアドレスまたはテキストメッセージでワンタイムパスワードを受け取ってログインできます。このプロセスでは、まずパスワードレス認証を開始し、ユーザーに code (またはリンクに含まれる code) を生成して送信したうえで、検証方法を通じて認証情報を受け付ける必要があります。これは、ユーザーの (メールアドレスまたは電話番号) と、送信した code の入力を求めるログイン画面として実装できます。また、ユーザーに code を送信する代わりに、パスワードレスリンクとして実装することもできます。その場合、ユーザーはメールアドレスまたはテキストメッセージ内のリンクをクリックするだけで、そのリンクがエンドポイントに送信され、同じ検証方法を使ってこのデータが自動的に検証されます (ユーザーが code を手動で入力しない点だけが異なります) 。

パスワードレス認証を使用するには、`redirectUri` を指定して Auth0.js を初期化し、`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="js" />

<div id="start-passwordless-authentication">
  ### パスワードレス認証を開始する
</div>

Auth0.js でパスワードレス認証を開始する最初のステップは、`passwordlessStart` メソッドです。このメソッドでは、`options` オブジェクト内で複数のパラメーターを渡せます。

| **Parameter** | **Required** | **Description**                                                                  |
| ------------- | ------------ | -------------------------------------------------------------------------------- |
| `connection`  | required     | (String) ユーザーに code または link を送信する方法を指定します。値は `email` または `sms` のいずれかである必要があります。 |
| `send`        | required     | (String) 値は `code` または `link` のいずれかである必要があります。`null` の場合は、link が送信されます。          |
| `phoneNumber` | optional     | (String) SMS で code または link を送信するためのユーザーの電話番号です。                                |
| `email`       | optional     | (String) メールで code または link を送信するためのユーザーのメールアドレスです。                              |

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

```js lines theme={null}
webAuth.passwordlessStart({
    connection: 'email',
    send: 'code',
    email: 'foo@bar.com'
  }, function (err,res) {
    // エラーを処理するか、続行する
  }
);
```

<div id="complete-passwordless-authentication">
  ### パスワードレス認証を完了する
</div>

code を送信する場合は、次にユーザーにその code の入力を求める必要があります。code の処理とユーザーの認証は `passwordlessLogin` メソッドで行います。このメソッドには、`options` オブジェクトで渡せる複数のパラメーターがあります。

| **Parameter**      | **Required** | **Description**                                                                                             |
| ------------------ | ------------ | ----------------------------------------------------------------------------------------------------------- |
| `connection`       | required     | (String) ユーザーに code またはリンクを送信する方法を指定します。値は `email` または `sms` のいずれかで、`passwordlessStart` に渡した値と同じである必要があります。 |
| `verificationCode` | required     | (String) ユーザーに送信された code です。code として送信される場合と、リンクに埋め込まれて送信される場合があります。                                        |
| `phoneNumber`      | optional     | (String) code またはリンクの送信先となった、ユーザーの電話番号です (SMS) 。                                                            |
| `email`            | optional     | (String) code またはリンクの送信先となった、ユーザーのメールアドレスです (メール) 。                                                         |

`passwordlessStart` と同様に、パスワードレスのトランザクションを検証するには、省略可能な `phoneNumber` と `email` のうち、どちらか一方のみを指定する必要があります。

`passwordlessLogin` を使用するには、WebAuth の初期化時に `redirectUri` と `responseType` を指定します。

```js lines theme={null}
webAuth.passwordlessLogin({
    connection: 'email',
    email: 'foo@bar.com',
    verificationCode: '389945'
  }, function (err,res) {
    // エラーを処理するか続行する
  }
);
```

<div id="extract-the-authresult-and-get-user-info">
  ## authResult を取り出してユーザー情報を取得する
</div>

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

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

| **パラメーター**                                                                                                                                                                                     | **必須**   | **説明**                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------- |
| `state`                                                                                                                                                                                        | optional | (String) アプリケーションが最初のリクエストに追加し、アプリケーションへのリダイレクト時に Auth0 が含める不透明な値です。この値は、CSRF 攻撃を防ぐために Auth0.js で使用されます。 |
| <Tooltip tip="Nonce: Arbitrary number issued once in an authentication protocol to detect and prevent replay attacks." cta="View Glossary" href="/ja/docs/glossary?term=nonce">nonce</Tooltip> | optional | (String) IDトークンの検証に使用されます                                                                                |
| `hash`                                                                                                                                                                                         | optional | (String) URL ハッシュ (指定しない場合は、デフォルトで `window.location.hash` が使用されます)                                       |

`parseHash` が返す authResult オブジェクトの内容は、使用した認証パラメーターによって異なります。次の項目が含まれる場合があります。

| **項目**        | **説明**                                                                                                                                                                                                                         |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `accessToken` | `audience` で指定した API の <Tooltip tip="Access Token: Authorization credential, in the form of an opaque string or JWT, used to access an API." cta="View Glossary" href="/ja/docs/glossary?term=Access+Token">アクセストークン</Tooltip> |
| `expiresIn`   | `accessToken` の有効期限 (秒) を含む文字列                                                                                                                                                                                                 |
| `idToken`     | ユーザープロファイル情報を含む IDトークン JWT                                                                                                                                                                                                     |

```js 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) {
    // ユーザーの情報を取得できました
  });
});
```

上記のように、返された `accessToken` を渡して `client.userInfo` メソッドを呼び出すことができます。これにより `/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"
}
```

これで、アプリケーションの要件に応じて、この情報を使って別の処理を行えるようになります。たとえば、以下で説明するように、<Tooltip tip="Management API: 顧客が管理タスクを実行できるようにする製品です。" cta="用語集を見る" href="/ja/docs/glossary?term=Management+API">Management API</Tooltip> を使用して、ユーザーのユーザープロファイル情報一式を取得できます。

<div id="using-nonces">
  ## nonce の使用
</div>

デフォルトでは (`responseType` に `id_token` が含まれている場合)、Auth0.js は `webAuth.authorize` の呼び出し時にランダムな `nonce` を生成し、ローカルストレージに保存したうえで、`webAuth.parseHash` でそれを取り出します。通常はこのデフォルトの動作で問題ありませんが、ユースケースによっては開発者が `nonce` を制御する必要がある場合もあります。
開発者が生成した `nonce` を使用する場合は、`webAuth.authorize` と `webAuth.parseHash` の両方にオプションとして指定する必要があります。
`webAuth.authorize({<Tooltip tip="Nonce: リプレイ攻撃を検出して防止するため、認証プロトコルで一度だけ発行される任意の数値。" cta="用語集を表示" href="/docs/glossary?term=nonce">nonce</Tooltip>: '1234', responseType: 'token id_token'});
webAuth.parseHash({nonce: '1234'}, callback);`

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

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

`webAuth.checkSession` メソッドは、返された <Tooltip tip="IDトークン: リソースへのアクセスではなく、クライアント自体を対象とした認証情報です。" cta="用語集を表示" href="/ja/docs/glossary?term=ID+Token">IDトークン</Tooltip> の `nonce` クレームが、オプションで指定した値と同じであることを自動的に検証します。

<div id="error-codes-and-descriptions">
  ## エラーコードと説明
</div>

埋め込みログインで Auth0.js を使用する場合、`/co/authenticate` エンドポイントが使われ、次のエラーが発生することがあります。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  エラーの説明は、人間が読んで理解できることを目的としています。説明は**コードで解析しないでください**。また、内容は予告なく変更される場合があります。
</Callout>

| **Status** | **Code**                      | **Description**                                                              |
| ---------- | ----------------------------- | ---------------------------------------------------------------------------- |
| 400        | invalid\_request              | 無効なリクエスト本文です。必要なパラメーターは client\_id、credential\_type、username、otp、realm のみです。 |
| 401        | unauthorized\_client          | クロスオリジンログインは許可されていません。                                                       |
| 400        | unsupported\_credential\_type | 不明な credential\_type パラメーターです。                                               |
| 400        | invalid\_request              | 不明な realm non-existent-connection です。                                        |
| 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.`

<div id="logout">
  ## ログアウト
</div>

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

`clientID` パラメーターが含まれている場合、指定する `returnTo` URL は、[Auth0 Dashboard](https://manage.auth0.com/#) のアプリケーションにある **Allowed Logout URLs** に登録されている必要があります。一方、`clientID` パラメーターが含まれていない場合、`returnTo` URL は [Auth0 Dashboard](https://manage.auth0.com/#) のアカウントレベルにある **Allowed Logout URLs** に登録されている必要があります。

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

<div id="signup">
  ## サインアップ
</div>

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

| **パラメーター**      | **必須**     | **説明**                                                                                                 |
| --------------- | ---------- | ------------------------------------------------------------------------------------------------------ |
| `email`         | required   | (String) ユーザーのメールアドレス                                                                                  |
| `password`      | required   | (String) ユーザーが設定するパスワード                                                                                |
| `username`      | required\* | (String) ユーザーが設定する username。\*データベース接続を使用し、**Requires Username** を有効にしている場合は必須です                       |
| `connection`    | required   | (String) ユーザーアカウントの作成先となる、アプリケーション上のデータベース接続名                                                          |
| `user_metadata` | optional   | (JSON object) ユーザー情報に使用する追加属性です。[user\_metadata](/ja/docs/manage-users/user-accounts/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>
```

<div id="using-checksession-to-acquire-new-tokens">
  ## checkSession を使用して新しいトークンを取得する
</div>

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

`checkSession` の呼び出しは、`webAuth` の初期化時に <Tooltip tip="オーディエンス: 発行されたトークンの受信先を一意に識別する値です。トークン内では aud という名前で表され、その値には、IDトークン の場合はアプリケーション（クライアントID）の ID、アクセストークン の場合は API（API 識別子）の ID が含まれます。" cta="用語集を表示" href="/ja/docs/glossary?term=audience">オーディエンス</Tooltip> として指定した API の新しいトークンを取得するために使用できます。

```js lines theme={null}
webAuth.checkSession({}, function (err, authResult) {
  // 自動parseHashが失敗した場合のエラー
  ...
});
```

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

また、`audience` と `scope` を指定すれば、`webAuth` の初期化時に使用した API とは別の API 向けのトークンを取得できます。

```js lines theme={null}
webAuth.checkSession(
  {
    audience: `https://mydomain/another-api/˜`,
    scope: 'read:messages'
  }, function (err, authResult) {
  // parseHash の自動実行に失敗した場合のエラー
  ...
});
```

`checkSession()` を呼び出すと、設定済みの [Rules](/ja/docs/customize/rules) がすべてトリガーされます。そのため、使用する前に [Dashboard](https://manage.auth0.com/#/rules) で Rules を確認してください。

実際の `/authorize` へのリダイレクトは iframe 内で行われるため、アプリケーションが再読み込みされたり、アプリケーション外にリダイレクトされたりすることはありません。

ただし、ブラウザーでサードパーティ Cookie が**必ず**有効になっている必要があります。そうでない場合、**checkSession()** は現在のユーザーのセッションにアクセスできません (つまり、ユーザーに何も表示せずに新しいトークンを取得することはできません) 。ユーザーが [Safari の ITP を有効にしている](https://support.auth0.com/center/s/article/troubleshoot-auth0-token-renewal-issues-in-safari-with-itp-enabled) 場合も同様です。

認可リクエストの送信元 URL を、[Dashboard](https://manage.auth0.com/#) で対象アプリケーションの **Settings** にある Auth0 アプリケーションの **Allowed Web Origins** リストに追加してください。

<Warning>
  接続がソーシャル接続で、Auth0 dev keys を使用している場合、`checkSession` の呼び出しは常に `login_required` を返します。
</Warning>

<div id="polling-with-checksession">
  ### checkSession() によるポーリング
</div>

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

`checkSession()` の確認間隔は、今後この呼び出しでレート制限に関する問題が発生しないよう、少なくとも 15 分空けてください。

<div id="password-reset-requests">
  ## パスワードリセットのリクエスト
</div>

パスワードリセット機能を実装するには、`changePassword` メソッドを使用し、`connection` パラメーターと `email` パラメーターを含む `options` オブジェクトを渡します。

```js 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);
      }
    });
  });
```

ユーザーには、パスワードをリセットするためのリンクが記載されたメールが送信されます。

<div id="user-management">
  ## ユーザー管理
</div>

Management API には、異なるプロバイダーにまたがる別々のユーザーアカウントのリンクとリンク解除、およびユーザーメタデータの更新を行う機能があります。詳細については、[User Account Linking](/ja/docs/manage-users/user-accounts/user-account-linking)を参照してください。

開始するには、まず Management API の呼び出しに使用できる <Tooltip tip="アクセストークン: API へのアクセスに使用される認可資格情報で、不透明な文字列または JWT の形式です。" cta="用語集を見る" href="/ja/docs/glossary?term=access+token">アクセストークン</Tooltip> を取得する必要があります。これは、Auth0.js の初期化時に `https://{yourDomain}/api/v2/` を audience として指定することで行えます。この場合、認証フローの一部としてアクセストークンを取得できます。

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

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="js" />

`checkSession()` を使用して実行することもできます。

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

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

必要なスコープを明示的に指定する必要があります。要求できるスコープは次のとおりです。

* `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="js" />

<div id="get-the-user-profile">
  ### ユーザープロファイルの取得
</div>

ユーザープロファイルデータを取得するには、`userId` とコールバックをパラメーターに指定して `getUser()` メソッドを使用します。このメソッドはユーザープロファイルを返します。ここで必要な `userID` は、`client.userInfo` メソッドで取得したものと同じです。
`auth0Manage.getUser(userId, cb);`

<div id="update-the-user-profile">
  ### ユーザープロファイルを更新する
</div>

ユーザーメタデータを更新するには、まず `userMetadata` オブジェクトを作成し、次に `patchUserMetadata` メソッドを呼び出して、ユーザー id と作成した `userMetadata` オブジェクトを渡します。このオブジェクト内の値は、同じキーを持つ既存の値を上書きし、ユーザーメタデータにまだ存在しないキーについては新たに追加されます。詳細については、[Metadata](/ja/docs/manage-users/user-accounts/metadata) を参照してください。
`auth0Manage.patchUserMetadata(userId, userMetadata, cb);`

<div id="link-users">
  ### ユーザーをリンク
</div>

ユーザーアカウントをリンクすると、ユーザーはどのアカウントからでも認証でき、どのアカウントを使ってもログイン時に同じユーザープロファイルを表示できるようになります。Auth0 では、これらのアカウントはデフォルトですべて別々のユーザープロファイルとして扱われるため、ユーザーのアカウントをリンクする場合はこの方法を使用します。

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

アカウントをリンクすると、2 つ目のアカウントはユーザーデータベース内で別個のエントリとしては存在しなくなり、プライマリアカウントの一部としてのみアクセス可能になります。
アカウントがリンクされても、セカンダリアカウントのメタデータがプライマリアカウントのメタデータにマージされることはありません。また、後でリンクを解除した場合も、再び別個のアカウントとなったセカンダリアカウントにプライマリアカウントのメタデータが保持されることはありません。