メインコンテンツへスキップ
Example
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

コンストラクター

LoginId
Constructor
LoginIdManager のインスタンスを作成します。

プロパティ

branding
client
organization
prompt
screen
tenant
transaction
untrustedData
user
screenIdentifier
string

メソッド

federatedLogin
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// alternateConnections が利用可能で、少なくとも 1 件以上含まれているかを確認します
if (!loginIdManager.transaction.alternateConnections) {
  console.error('No alternate connections available.');
}

// 利用可能な最初の接続を選択します(ユーザーは利用可能な任意の接続を選択できます)
const selectedConnection = alternateConnections[0];

// デバッグまたは情報提供の目的で、選択された接続をログに記録します
console.log(`Selected connection: ${selectedConnection.name}`);

// 選択した接続を使用してフェデレーションによるログインを実行します
loginIdManager.federatedLogin({
  connection: selectedConnection.name,
});
getErrors
コンテキストからトランザクションエラーの配列を取得します。存在しない場合は空の配列を返します。
getLoginIdentifiers
Utility Featureログイン画面のアクティブな識別子タイプを取得します。
Example
import LoginId from "@auth0/auth0-acul-js/login";
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: <usernameFieldValue>
});
passkeyLogin
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// 内部的に、Auth0 サーバーから提供されるユーザーの利用可能なパスキー設定をマッピングします
loginIdManager.passkeyLogin();
pickCountryCode
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

loginIdManager.pickCountryCode();

パスキー

registerPasskeyAutofill
Promise<void>
Utility Featureブラウザーのパスキー用 Conditional UI(オートコンプリートエクスペリエンス)を登録します。このメソッドは、navigator.credentials.get()mediation: "conditional" とともに使用して、受動的な WebAuthn 認証情報リクエストを初期化します。対応している場合、ブラウザーは保存済みのパスキーをユーザー名フィールドのオートコンプリートドロップダウン内に直接表示できるようになります。このメソッドは、ログイン画面が初期化されるとき(たとえばページロード時)に 1 回だけ 呼び出してください。登録後は、ユーザー名入力欄にフォーカスすると、一致するパスキーが候補として自動的に表示されます。パスキーを選択すると、追加のユーザー操作を行うことなく認証が完了します。

入力の設定

inputId が指定されている場合、SDK は次のことを行います。
  • 要素が存在し、<input> であることを検証します。
  • その autocomplete 属性を "webauthn username" に上書きします。
これにより、Conditional Mediation API との完全な互換性が確保されます。 inputId を指定 しない 場合は、正しい属性を使用して 入力要素を手動で設定する必要があります。
<input id="username" autocomplete="webauthn username" />

注意点

  • autocomplete 属性の値は、必ず厳密に "webauthn username" でなければなりません。 "email""text" のような無関係なトークンを含めると、ブラウザーがパスキーのドロップダウンを表示しなくなります。
  • この属性を上書きするのは意図された動作であり、ブラウザー間で一貫した挙動を得るために必要です。既存の autocomplete の値をマージしたり拡張したりすることに依存しないでください。
  • ブラウザーが Conditional Mediation をサポートしていない場合、ソフトウェア開発キット (SDK) は安全に何も行わずに終了します (no-op)。

パラメーター

inputId?
string
stringユーザー名の <input> 要素の ID(省略可、# は含めない)。例: "username"。 省略した場合は、開発者が正しい autocomplete 属性を手動で設定する必要があります。
Example
import LoginId from '@auth0/auth0-acul-js/login-id';

// 例: 非同期セットアップブロック内でパスキーのオートコンプリートを初期化します。
async function initializeLogin() {
  const loginId = new LoginId();
  // 関連するHTML input要素が存在することを確認してください:
  // <input id="username" autocomplete="webauthn username" />
  // 条件付きUIの登録。
  await loginId.registerPasskeyAutofill('username');
}

initializeLogin().catch(console.error);

備考

このメソッドは内部の registerPasskeyAutofill() ユーティリティに処理を委譲し、 リクエストの有効期間を管理するバックグラウンドの AbortController を返します。ページライフサイクルあたり 1 回だけ呼び出してください。