> ## 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": "ベータ",
    "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) + "*****マスク済み*****";
          }
          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 の認可サーバーでホストされる Universal Login にリダイレクトして、ユーザーの本人確認を行います。" cta="用語集を見る" href="/ja/docs/glossary?term=Universal+Login">Universal Login</Tooltip> は、<Tooltip tip="Universal Login: アプリケーションは、Auth0 の認可サーバーでホストされる Universal Login にリダイレクトして、ユーザーの本人確認を行います。" cta="用語集を見る" href="/ja/docs/glossary?term=authorization+server">認可サーバー</Tooltip>に不可欠な機能であるログインフローを提供します。ユーザーがアプリケーションにアクセスするために本人確認を行う必要がある場合は、Universal Login にリダイレクトして、認証プロセスを Auth0 に任せることができます。

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

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

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

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

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

Auth0 Dashboard では、デフォルトのログインページに使用するエクスペリエンスを [ブランディング > 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 Login が必要な場合を除き、Universal Login の実装を推奨します。

この 2 つのエクスペリエンスの違いについて詳しくは、[Universal Login vs. Classic Login](/ja/docs/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="/ja/docs/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](/ja/docs/customize/login-pages/classic-login) を参照してください。

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

テナントで Universal Login または Classic Login を有効にしたら、以下の手順に従って実装します。

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

<div id="navigate-to-the-login-page">
  ### ログインページに移動する
</div>

任意のブラウザーから [Login エンドポイント](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 パラメーターで攻撃を防ぎ、ユーザーをリダイレクトする](/ja/docs/secure/attack-protection/state-parameters)を参照してください。

必要に応じて、`connection` パラメーターを指定して、ユーザーにその接続で認証するよう促すこともできます。

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

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

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

* サインアップ
* ログイン
* Multi-Factor Authentication (MFA) の登録とチャレンジ
* パスワードのリセット

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

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

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

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