LoginId

Universal Login の login-id 画面をカスタマイズするために利用できる、すべてのプロパティとメソッドについて説明します。

LoginId クラスは、login-id 画面の機能を実装します。この画面では、identifier 優先の認証フローの最初のステップとしてユーザーの identifier を収集します。テナントによっては、この identifier としてメールアドレス、電話番号、またはユーザー名を使用できます。パスキーログイン、フェデレーテッド ID プロバイダー、Google One Tap もサポートしています。

​

コンストラクタ

LoginId 画面マネージャーのインスタンスを作成します:

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

​

プロパティ

branding · BrandingMembers

ブランディングテーマや設定など、ブランディングに関連する設定を提供します。

client · ClientMembers

login-id 画面向けに、id、name、logoUrl などのクライアント関連の設定を提供します。

organization · OrganizationMembers

ユーザーの組織に関する情報 (id や name など) を提供します。

prompt · PromptMembers

認証フローにおける現在の prompt に関するデータを含みます。

screen · ScreenMembersOnLoginId

設定やコンテキストを含む、login-id 画面固有の詳細を含みます。

tenant · TenantMembers

id や関連するメタデータなど、テナント に関連するデータを含みます。

transaction · TransactionMembersOnLoginId

アクティブな identifier やフローの状態など、login-id 画面に固有のトランザクション データを提供します。

untrustedData · UntrustedDataMembers

ログイン時のユーザー入力など、SDK に渡される信頼されていないデータを扱います。

user · UserMembers

アクティブなユーザーの詳細 (username、email、roles など) を含みます。

​

メソッド

changeLanguage · Promise<void>

このメソッドは、Universal Login ページの表示言語を変更します。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.changeLanguage({
  language: 'fr',
});

メソッドのパラメータ

表示 パラメータ

options

LanguageChangeOptions。

language · string · 必須

変更先の言語のロケールコードです (例: 'en'、'fr'、'es') 。

persist? · "session"

'session' に設定すると、選択した言語はセッション中保持されます。

federatedLogin · Promise<void>

このメソッドは、認証のためにユーザーをソーシャルまたはエンタープライズのアイデンティティプロバイダー (IdP) にリダイレクトします。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.federatedLogin({
  connection: "google-oauth2"
});

メソッドのパラメータ

表示 パラメータ

connection · string · 必須

ソーシャルまたはエンタープライズのアイデンティティプロバイダーの接続名です。

getErrors · Error []

このメソッドは、コンテキストからトランザクションのエラー配列を取得します。存在しない場合は空の配列を返します。トランザクションのコンテキストに含まれるエラーオブジェクトの配列です。

getLoginIdentifiers · ScreenIdentifierType [] | null

このメソッドは、login-id 画面で有効になっている identifier タイプを取得します。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

login · Promise<void>

このメソッドは、ユーザーにユーザー名の入力を求めます。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.login({
  username: "testUser"
});

メソッドのパラメータ

表示 パラメータ

options

LoginOptions。

username · string · 必須

ユーザーの identifier です。

captcha? · string

captcha の code、または CAPTCHA provider からのレスポンスです。Auth0 テナントで ボット検出 が有効になっている場合、このプロパティは必須です。

[`key`: `string`] · "string" | "number" | "boolean" | "undefined"

ulp- で始まる追加のカスタムフィールドです (例: 'ulp-custom-field') 。

passkeyLogin · Promise<void>

このメソッドは、指定されたパスキーを使用してユーザーを認証し、成功すると redirect_url にリダイレクトします。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.passkeyLogin();

メソッドのパラメータ

表示 パラメータ

options

CustomOptions。

[`key`: `string`] · "string" | "number" | "boolean" | "undefined"

ulp- で始まる追加のカスタムフィールドです (例: 'ulp-custom-field') 。

googleOneTap · Promise<void>

このメソッドは Google One Tap 資格情報を使用してユーザーを認証し、別のログインページにリダイレクトせずにワンクリックでサインインできるようにします。

Google One Tap プロンプトをレンダリングする前に screen.googleOneTapConfig を確認してください。この機能がサーバー側で有効になっていない場合、値は null です。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.googleOneTap({ one_tap_credential: credential });

メソッド パラメータ

表示 パラメータ

one_tap_credential · string · 必須

Google Identity Services プロンプトから返される Google One Tap 資格情報トークン。

pickCountryCode · Promise<void>

このメソッドはユーザーを国番号の選択リストにリダイレクトし、電話番号の国番号プレフィックスを更新できるようにします。

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.pickCountryCode();

registerPasskeyAutofill · Promise<void>

このメソッドは、mediation: conditional を指定した navigator.credentials.get() を使用して、受動的な WebAuthn 資格情報リクエストを初期化します。サポートされている場合、ブラウザーは保存済みのパスキーをユーザー名フィールドの autocomplete ドロップダウンに直接表示できます。

Example

import LoginId from '@auth0/auth0-acul-js/login-id';

async function initializeLogin() {
  const loginId = new LoginId();
  await loginId.registerPasskeyAutofill('username');
}

initializeLogin().catch(console.error);

メソッド パラメータ

表示 パラメータ

inputId? · string

ユーザー名 <input> 要素の省略可能な ID (# なし) 。例: "username"。省略した場合、入力要素に正しい autocomplete 属性が設定されていることを、開発者が手動で確認する必要があります。