> ## 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のユニバーサルログイン

> 認可サーバーでユーザーの身元を証明する手段である、Auth0のユニバーサルログインについて説明します。

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のユニバーサルログインには、認可サーバーの重要な機能であるログインフローが備わっています。ユーザーがアプリケーションにアクセスするために本人確認を行う必要がある場合は、ユニバーサルログインにリダイレクトし、Auth0に認証プロセスを処理してもらうことができます。

ユニバーサルログインを使用すれば、さまざまな認証方法に対処するための統合作業が不要になります。識別子とパスワードの簡単なフローから開始し、ソーシャルログインや多要素認証（<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=multifactor-authentication" tip="多要素認証（MFA）: ユーザー名とパスワードに加えて、SMS経由のコードなどの要素を使用するユーザー認証プロセス。" cta="用語集の表示">MFA</Tooltip>）など他の機能を追加して、安全かつユーザーフレンドリーなエクスペリエンスをカスタマイズすることができます。

ユニバーサルログインの構成は動的に行われます。また、Auth0の集中型認証サーバーでホストされたWebページがログインフローを完全に駆動するため、アプリケーションレベルでの変更は不要です。さらに、アプリケーションのコードを手動で更新しなくても、Auth0がユニバーサルログインに対して行う改善のメリットが得られます。

<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=auth0-dashboard" tip="Auth0 Dashboard: サービスを構成するためのAuth0の主製品。" cta="用語集の表示">Auth0 Dashboard</Tooltip>からログインページの外観と動作をカスタマイズし、一貫性のあるブランドエクスペリエンスを創造することができます。より高度なユースケースでは、各ページのコードを個別に変更することもできます。

ユニバーサルログインと埋め込みログインの違いについては、「[中央集中型ユニバーサルログインと埋め込みログイン](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)」を参照してください。

## ユニバーサルログインを構成する

Auth0 Dashboardの[［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Advanced Options（高度なオプション）］](https://manage.auth0.com/#/universal-login/customizations-new)では、デフォルトのログインページに使用するエクスペリエンスを選択することができます。

Auth0には、2種類のホストされたログインエクスペリエンスが用意されています。

* **ユニバーサルログイン** では、ユーザー向けに効率化されたエクスペリエンスを受けることができ、カスタマイズにJavaScriptを使用する必要はありません。
* **クラシックログイン** では、ログインフローの各ページにJavaScript制御を使用します。

現時点では、Auth0の開発作業は主にユニバーサルログインに焦点を当てており、クラシックログインは更新されなくなりました。特定のユースケースでクラシックエクスペリエンスが必要でない限り、ユニバーサルログインの実装をお勧めします。

これら2つのエクスペリエンスの比較方法については、「[ユニバーサルログインとクラシックログイン](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login)」をお読みください。

### アクセシビリティ

Auth0は、以下の標準に従って、アシスティブテクノロジーを活用するユーザーに対する、ユニバーサルログインフローへのアクセシビリティを強化しました。

* [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 Dashboardの[**［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Advanced Options（高度なオプション）］** ](https://manage.auth0.com/#/universal-login/customizations-new)に移動し、トグルを使用して、これらの規格を有効にすることができます。

<Frame>
  <img src="https://mintcdn.com/docs-dev-docs-event-stream-action-templates/oCq_HmOgBHEv-wbr/docs/images/ja-jp/cdy7uua7fh8z/5O4DDy1h0rgbYNzKwm1lKY/2302115935d5096c679425402a78a1c2/WCAG_-_JP.png?fit=max&auto=format&n=oCq_HmOgBHEv-wbr&q=85&s=d6f9646b464d7b7bd91a43a2d164c985" alt="早期アクセスでは、このトグルでサインインフローのWCAG要素を有効にします。 " width="716" height="331" data-path="docs/images/ja-jp/cdy7uua7fh8z/5O4DDy1h0rgbYNzKwm1lKY/2302115935d5096c679425402a78a1c2/WCAG_-_JP.png" />
</Frame>

また、`enable_ulp_wcag_compliance`フラグを[プロンプト設定更新エンドポイント](/docs/ja-jp/api/management/v2/prompts/patch-prompts)で更新し、<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=management-api" tip="Management API: 顧客が管理タスクを実行できるようにするための製品。" cta="用語集の表示">Management API</Tooltip>でこの機能を有効にすることもできます。

```bash cURL lines theme={null}
curl -L -X PATCH 'https://<tenant_name>.auth0.com/api/v2/prompts' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Bearer abc123' \
-d '{"enable_ulp_wcag_compliance":true}'
```

ユニバーサルログインにHTML、CSS、およびJavascriptカスタマイズを大規模に行った場合、カスタマーエクスペリエンスにダウンストリームの影響を及ぼす可能性があります。WCAG準拠バージョンのAuth0を非運用テナントで有効にし、更新によってユニバーサルログインのカスタマイズが壊れていないかを認証フローでテストします。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  2025年7月31日より、WCAGを手動で有効にしていないテナントは、ユニバーサルログインのWCAG準拠バージョンに自動的に移行されます。
</Callout>

顧客のカスタマイズに影響する可能性のある領域は以下のとおりです。

* スクリーンリーダーにアクセスできるよう、検証エラーが代わりにツールチップとしてインライン表示される
* デフォルトのインターフェイスコンポーネントの色が色のコントラストに関するWCAGガイドラインに沿っている
* フォームがオートコレクトを使用する
* インターフェイスコンポーネントの[ARIA](https://www.w3.org/WAI/standards-guidelines/aria/)とその他の属性によって、スクリーンリーダーを簡単に移動できる
* メールアドレスはクライアント側で検証され、サーバー側の検証と同じ形式ルールが適用されます。
* HTMLラベルはアクセス可能で、それぞれの入力フィールドに関連付けられます。
* パスワードの複雑さの要件とインラインエラーメッセージはスクリーンリーダーによって読み上げられます。
* すべての認可フロー画面には便利で分かりやすいページタイトルがあります。
* 必須フィールドにはラベルに視覚的なインジケーターが使用されます。

### ログインページをカスタマイズする

ユニバーサルログインを有効にしたら、Auth0 Dashboardから直接ログインページをカスタマイズすることができます。具体的には、ページテンプレートやテーマ、サインアップとログインプロンプト、およびその他のテキストエレメントをカスタマイズできます。詳細については、「ユニバーサルログインのカスタマイズ」を参照してください。

クラシックログインを実装する場合は、Auth0 Dashboardから基本的なブランディングオプションをカスタマイズすることができます。次に、ログインフローの構築に使用するSDKで、高度なカスタマイズを構成できます。詳細については、「クラシックログインのカスタマイズ」を参照してください。

## ユニバーサルログインを実装する

ユニバーサルログインまたはクラシックログインをテナント内で有効にしたら、以下の手順に従ってエクスペリエンスを実装します。

1. Auth0に[アプリケーションを登録](https://auth0.com/docs/get-started/auth0-overview/create-applications)します。
2. 認証APIの[ログインエンドポイント](/docs/ja-jp/api/authentication#login)を呼び出すようにアプリケーションを構成し、ログインフローをトリガーして応答を処理します。これを行うには、直接構成するか、Auth0のいずれかの[SDK](https://auth0.com/docs/libraries)を使用します。
3. [データベース](/docs/ja-jp/get-started/applications/set-up-database-connections)、[エンタープライズ](/docs/ja-jp/authenticate/enterprise-connections)、または[ソーシャル](/docs/ja-jp/authenticate/identity-providers/social-identity-providers)接続を作成し、アプリケーション向けに有効にします。

### ログインページに移動する

[ログインエンドポイント](/docs/ja-jp/api/authentication#login)は任意のブラウザーから直接呼び出すことができます。

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

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

要求には以下の値を含めなければなりません。

* `response_type`（`code`または`token`）
* `client_id`
* `redirect_uri`
* `state`

  * この値が必要な理由を明確に理解するには、「[OAuth 2.0の状態パラメーターを使用して攻撃防御とユーザーのリダイレクトを行う](/docs/ja-jp/secure/attack-protection/state-parameters)」を参照してください。

あるいは、`connection`パラメーターを含めて、指定された接続で認証を行うようユーザーを促すこともできます。

### Quickstartガイドを使用する

アプリケーションにユニバーサルログインをセットアップする方法については、「[クイックスタートガイド](/docs/ja-jp/quickstarts)」を参照してください。使用している技術に合った方法を選択し、クイックスタートに従って段階的に説明を受けながら実装が進められます。

## もっと詳しく

* [中央集中型ユニバーサルログインと埋め込みログイン](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)
* [ユニバーサルログインエクスペリエンス](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience)
* [クラシックログインエクスペリエンス](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)
* [ユニバーサルログインとクラシックログイン](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login)
* [ユニバーサルログインの国際化](/docs/ja-jp/customize/internationalization-and-localization/universal-login-internationalization)