> ## 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 Universal Login

> Universal Login を使用すると、当社の認可サーバーを通じてユーザーの本人確認を行えます。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

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の<Tooltip tip="Universal Login：アプリケーションは、ユーザーの本人確認のために、Auth0 の Authorization Server でホストされる Universal Login にリダイレクトされます。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Universal+Login">Universal Login</Tooltip>は、<Tooltip tip="Universal Login：アプリケーションは、ユーザーの本人確認のために、Auth0 の Authorization Server でホストされる Universal Login にリダイレクトされます。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=authorization+server">認可サーバー</Tooltip>の中核機能であるログインフローを提供します。ユーザーがアプリケーションにアクセスするために本人確認を行う必要がある場合は、Universal Login にリダイレクトするだけで、認証プロセスは Auth0 に任せることができます。

Universal Login では、さまざまな認証方式に対応するための追加の実装作業は必要ありません。まずはシンプルな認証フローから始めて、パスワードレスログイン、ソーシャルログイン、または<Tooltip tip="多要素認証（MFA）：SMS で送信されるコードなど、ユーザー名とパスワードに加えた要素を使用するユーザー認証プロセス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=multi-factor+authentication">多要素認証</Tooltip> (MFA) などの機能を追加することで、安全で使いやすいログイン体験にカスタマイズできます。

Universal Login の設定は動的に行えるため、アプリケーションレベルでの変更は必要ありません。これは、Auth0 の一元管理された<Tooltip tip="Authentication Server：ユーザーの本人確認を承認または拒否するサーバー。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=authentication+server">認証サーバー</Tooltip>でホストされる Web ページが、ログインフロー全体を担うためです。さらに、Auth0 が Universal Login に加えた改善をアプリケーションで利用するために、コードを手動で更新する必要もありません。

<Tooltip tip="Auth0 Dashboard：サービスを設定するための Auth0 の主要製品です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>では、ログインページの外観や動作をカスタマイズして、一貫性のあるブランド体験を実現できます。より高度なユースケースでは、各ページのコードを個別に変更することもできます。

Universal Login と埋め込みログインの違いについて詳しくは、[Centralized Universal Login vs. Embedded Login](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)を参照してください。

<div id="configure-universal-login">
  ## Universal Login を設定する
</div>

Auth0 Dashboard では、[Branding > Universal Login > Advanced Options](https://manage.auth0.com/#/universal-login/customizations-new) で、デフォルトのログインページに使用するエクスペリエンスを選択できます。

Auth0 では、ホスト型のログインエクスペリエンスを 2 つ提供しています。

* **Universal Login** は、ユーザーにシンプルなエクスペリエンスを提供し、カスタマイズのために JavaScript を使用する必要がありません。
* **Classic Login** は、ログインフローの各ページで JavaScript コントロールを使用します。

現在、Auth0 の開発は Universal Login に注力されており、Classic Login には新たな更新は行われていません。特定のユースケースで Classic エクスペリエンスが必要な場合を除き、Universal Login の実装を推奨します。

この 2 つのエクスペリエンスの違いについて詳しくは、[Universal Login と Classic Login の比較](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login) を参照してください。

<div id="accessibility">
  ### アクセシビリティ
</div>

Auth0 は、支援技術を利用するユーザーが Universal Login フローを使いやすくなるよう、次の標準に準拠しています。

* [Web Content Accessibility Guidelines (WCAG) version 2.2 AA](https://www.w3.org/WAI/standards-guidelines/wcag/)
* [EN 301 549](https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility)

Auth0 Universal Login では、これらの標準への対応がデフォルトで有効になっています。以下は、お客様によるカスタマイズに影響する可能性がある項目です。

* 検証エラーは、スクリーンリーダーで読み取れるよう、ツールチップではなくインラインで表示されます。
* デフォルトのインターフェースコンポーネントの色は、色のコントラストに関する WCAG ガイドラインに準拠しています。
* フォームではオートコレクトが使用されます。
* インターフェースコンポーネントの [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) やその他の属性により、スクリーンリーダーで簡単に操作できます。
* メールアドレスはクライアント側で検証され、サーバー側の検証と同じ書式ルールに従います。
* HTML ラベルはアクセシブルで、それぞれ対応する入力フィールドに関連付けられています。
* パスワードの複雑さの要件とインラインエラーメッセージは、スクリーンリーダーによって読み上げられます。
* すべての <Tooltip tip="認可フロー: OAuth 2.0 フレームワークで指定された認可付与（またはワークフロー）。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=authorization+flow">認可フロー</Tooltip> 画面には、わかりやすく固有のページタイトルが設定されています。
* 必須フィールドのラベルには、視覚的なインジケーターが表示されます。

<div id="customize-login-page">
  ### ログインページをカスタマイズする
</div>

Universal Login を有効にすると、Auth0 Dashboard からログインページを直接カスタマイズできます。具体的には、ページテンプレートやテーマ、サインアップやログインのプロンプト、その他のテキスト要素をカスタマイズできます。詳しくは、Customize Universal Login を参照してください。

Classic Login を実装する場合は、Auth0 Dashboard から基本的なブランディングオプションをカスタマイズできます。その後、ログインフローの構築に使用する SDK を使って、より高度なカスタマイズを設定できます。詳しくは、[Customize Classic Login](/docs/ja-jp/customize/login-pages/classic-login) を参照してください。

<div id="implement-universal-login">
  ## Universal Login を実装する
</div>

テナント内で Universal Login または Classic Login のいずれかを有効にしたら、以下の手順に従ってこのエクスペリエンスを実装します。

1. Auth0 に[アプリケーションを登録](/docs/ja-jp/get-started/auth0-overview/create-applications)します。
2. ログインフローを開始してレスポンスを処理できるように、アプリケーションから Authentication API の [ログイン エンドポイント](https://auth0.com/docs/api/authentication#login) を呼び出すよう設定します。これは直接設定することも、Auth0 の [SDK](/docs/ja-jp/libraries) のいずれかを使用することもできます。
3. [Database](/docs/ja-jp/get-started/applications/set-up-database-connections)、[Enterprise](/docs/ja-jp/authenticate/enterprise-connections)、または [Social](/docs/ja-jp/authenticate/identity-providers/social-identity-providers) 接続を作成し、アプリケーションで有効にします。

<div id="navigate-to-the-login-page">
  ### ログインページを開く
</div>

どのブラウザーからでも、[ログイン エンドポイント](https://auth0.com/docs/api/authentication#login) を直接呼び出すことができます。

export const codeExample = `https://{yourDomain}/authorize?
  response_type=code|token&
  client_id={yourClientId}&
  connection={connectionName}&
  redirect_uri=https://{yourApp}/callback&
  state={yourState}`;

<AuthCodeBlock children={codeExample} language="bash" filename="cURL" />

リクエストには、次の値を含める必要があります。

* `response_type` (`code` または `token`)
* `client_id`
* `redirect_uri`
* `state`

  * この値が必要な理由について詳しくは、[OAuth 2.0 の state パラメーターで攻撃を防ぎ、ユーザーをリダイレクトする](/docs/ja-jp/secure/attack-protection/state-parameters)を参照してください。

必要に応じて、`connection` パラメーターを指定すると、ユーザーにそのコネクションでの認証を促すことができます。

<div id="correlation-id">
  ### Correlation ID
</div>

<ReleaseStageNotice feature="Correlation ID" stage="ea" terms="true" contact="Auth0サポートまたは担当のテクニカルアカウントマネージャー" />

Universal Login は、すべての認証フローで Correlated Events をサポートしています。Universal Login を実装すると、アプリケーションで一意の ID が生成され、その ID を `correlation_id` として `/authorize` エンドポイントに渡します。この一意の ID は、次の認証イベント全体で引き継がれます。

* サインアップ
* ログイン
* 多要素認証 (MFA) の登録とチャレンジ
* パスワードのリセット

`correlation_id` を渡すと、[Auth0 ログ](/docs/ja-jp/deploy-monitor/logs) で認証イベントを追跡できます。

詳細については、[Correlation ID](/docs/ja-jp/authenticate/login/configure-correlation-id) を参照してください。

<div id="use-the-quickstart-guides">
  ### Quickstart ガイドを活用する
</div>

アプリケーションに Universal Login を設定する方法について詳しくは、[Quickstart ガイド](/docs/ja-jp/quickstarts)をご覧ください。ご利用の技術に最も適した方法を選び、Quickstart に沿って実装手順を確認してください。