柔軟な言語選択を設定する

Universal Login プロンプトに、希望する言語を選択するメニューを追加する方法を説明します。

柔軟な言語選択は、ユーザーがログイン画面など、アプリケーションに関連付けられたUniversal Loginプロンプトで希望する言語を選択できるオプション機能です。この機能は、Universal Login の各プロンプトごとに個別に設定できます。

特定のプロンプトにこの機能を実装すると、対応する画面に言語選択メニューが追加されます。ユーザーはこのメニューから希望する言語を選択すると、その言語でプロンプトが自動的にレンダリングされます。

​

始める前に

柔軟な言語選択を実装する前に、次の要件を満たしていることを確認してください。

• Universal Login を使用します。

  • この機能は、カスタムログインページでは利用できません。

• カスタムドメイン を設定します。

• Auth0 テナントで、プロンプトに追加する予定の言語を有効にします。

  • Auth0 Dashboard で 設定 > General > Languages に移動し、使用する言語を 1 つ以上有効にします。

    • 詳細については、Universal Login Internationalization を参照してください。

​

柔軟な言語選択機能を実装する

柔軟な言語選択機能を設定するには、主に次の 2 つの手順があります。

1. 言語を選択できるように、ページテンプレート を準備する。
2. 各プロンプトでユーザーに言語選択を表示するよう設定する。

​

Universal Loginのページテンプレートを準備する

まず、言語を選択できるようにするため、次のスクリプトをUniversal Loginのページテンプレートに追加します。

<script>
  function updateSelectedLanguage() {
    const selectElement = document.getElementById('language');
    const selectedValue = selectElement.value;
    const options = selectElement.options;
    for (let i = 0; i < options.length; i++) {
      if (options[i].value === selectedValue) {
        options[i].selected = true;
      } else {
        options[i].selected = false;
      }
    }
    document.getElementById('changeLanguage').click();
  }
</script>

このスクリプトを使用すると、Universal Login のプロンプトに動的な言語選択メニューをレンダリングできます。Users はこのメニューにアクセスして、設定したプロンプトに希望の言語を適用できます。

このスクリプトをページテンプレートに追加するには、Set Template for Universal Login endpoint を使用します。

この呼び出しを行うと、Universal Login のページテンプレートに対して行った既存の設定がすべて上書きされるため、注意してください。中断を避けるため、この呼び出しには必要なページテンプレートのカスタマイズをすべて含めるようにしてください。

​

個別の Universal Login プロンプトを設定する

次に、カスタムプロンプト partials を設定して、1 つ以上の Universal Login プロンプトに言語選択を追加します。Partials は、ログイン画面などのプロンプト画面内のエントリポイントに挿入されるカスタムコードを指します。詳細については、Customize Signup and Login Prompts を参照してください。

特定のプロンプトに言語選択を追加するには、Auth0 の Management API を使用して、次のパラメータでカスタムプロンプト partials を設定します。

パラメータ	説明	値の例
language	必須。 ユーザーに表示される言語選択メニューに含める 1 つ以上の言語。	es,fr,en
persist	必須。 言語設定をセッション全体で維持するかどうかを指定します。	session
action	任意。 ユーザーがプロンプトを先に進めずに言語を変更できるようにしたい場合に、このパラメータを使用します。 この値を指定すると、ユーザーが言語を変更してもフォームは自動送信されません。指定しない場合は、別の言語を選択するとプロンプトが自動的に進みます。	change-language

以下のセクションでは、さまざまな種類の Universal Login プロンプトに対応するコードサンプルを確認できます。

以下のコードサンプルでは、プレースホルダーを適切な値に置き換えてください。

• {yourDomain} を yourdomain.auth0.com に置き換えます。
• {mgmtApiToken} を access token に置き換えます。

サインアップ プロンプト: 識別子 + パスワード

signup プロンプトに言語選択を追加するには、プロンプトに partials を設定する エンドポイントを使用します:

ログインプロンプト: Identifier First

login-id プロンプトに言語選択を追加するには、プロンプトのパーシャルを設定する エンドポイントを使用します。

ログインプロンプト: パスワードレス (Email)

login-passwordless-email-code プロンプトに言語選択を追加するには、プロンプトに partials を設定するエンドポイントを使用します。