ログイン画面クラス

ACULのログイン画面クラスについて説明します

​

ログイン画面クラス

ログイン画面クラスはIdentifier First認証フローの一部で、ユーザーの識別子とパスワードを収集します。テナントのセットアップに応じて、この識別子はメールアドレス、電話番号、またはユーザー名になります。

ログイン画面クラスのインポートとインスタンス化

import Login from "@auth0/auth0-acul-js/login";
const loginManager = new Login();

// SDK Properties return a string, number or boolean
// ex. "login-id"
loginManager.screen.name;

// SDK Methods return an object or array
// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} 
loginManager.screenLinks();

​

プロパティ

ログイン画面クラスには以下のプロパティがあります。

branding

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

​

メソッド

ログイン画面クラスには以下のメソッドがあります。

​

login( options? )

このメソッドは識別子と入力されたパスワードを基にユーザーを認証します。サーバーの構成に応じて、これはメールアドレス、ユーザー名、または電話番号になります。詳細については、「柔軟な識別子」を参照してください。

loginManager.login({
  username: "testUser",
  password: "testPassword"
});

パラメーター	タイプ	必須	説明
username	文字列	必須	ユーザーの識別子です。
password	文字列	必須	ユーザーのパスワードです。
captcha	文字列	条件付き	CAPTCHAプロバイダーが返すCAPTCHAコードまたは応答です。このプロパティはAuth0テナントにボット検知が有効な場合には必須です。
[key: string]	文字列 | 数値 | ブール値 | undefined	任意	ユーザーから収集した追加のデータです。このデータにはpost-loginアクショントリガーでアクセスできます。

​

socialLogin( options? )

このメソッドは認証のために、ユーザーをソーシャルまたはエンタープライズIDプロバイダー（IdP）にリダイレクトします。詳細については、「ソーシャルIDプロバイダー」と「エンタープライズIDプロバイダー」を参照してください。

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

パラメーター	タイプ	必須か否か	説明
connection	文字列	必須	接続の識別子。
[key: string]	文字列 | 番号 | ブール値 | 未定義	任意	ユーザーから収集した追加のデータ。このデータはpost-loginアクショントリガーでアクセスできます。

​

ログインID画面クラス

ログインID画面クラスはIdentifier First認証フローの一部で、ユーザーの識別子を収集します。テナントのセットアップに応じて、この識別子はメールアドレス、電話番号、またはユーザー名になります。

ログインID画面クラスのインポートとインスタンス化

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

// SDK Properties return a string, number or boolean
// ex. "login-id"
loginIdManager.screen.name;

// SDK Methods return an object or array
// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} 
loginIdManager.screenLinks();

​

プロパティ

ログインID画面クラスには以下のプロパティがあります。

branding

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

​

メソッド

ログインID画面クラスには以下のメソッドがあります。

​

login( options? )

このメソッドはユーザーを次のステップへ進めて、パスワードまたはワンタイムパスワード（OTP）コードの入力を求めます。サーバーの構成に応じて、これはメールアドレス、ユーザー名、または電話番号になります。詳細については、「柔軟な識別子」を参照してください。

loginIdManager.login({
  username: <identifierFieldValue>
});

パラメーター	タイプ	必須	説明
username	文字列	必須	ユーザーの識別子です。
captcha	文字列	条件付き	CAPTCHAプロバイダーが返すCAPTCHAコードまたは応答です。このプロパティはAuth0テナントにボット検知が有効な場合には必須です。
[key: string]	文字列 | 数値 | ブール値 | 未定義	任意	ユーザーから収集した追加のデータです。このデータにはpost-loginアクショントリガーでアクセスできます。

​

passkeyLogin( options? )

このメソッドは提供されたパスキーでユーザーを認証し、成功の場合はユーザーをredirect_urlにリダイレクトします。

// This method does not support any parameters
loginIdManager.passkeyLogin();

​

socialLogin( options? )

このメソッドは認証のために、ユーザーをソーシャルまたはエンタープライズIDプロバイダー（IdP）にリダイレクトします。詳細については、「ソーシャルIDプロバイダー」と「エンタープライズIDプロバイダー」を参照してください。

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

// Check if alternateConnections is available and has at least one item
if (!loginIdManager.transaction.alternateConnections) {
  console.error('No alternate connections available.');
}

// Select the first available connection (users can select any available connection)
const selectedConnection = alternateConnections[0];

// Log the chosen connection for debugging or informational purposes
console.log(`Selected connection: ${selectedConnection.name}`);

// Proceed with federated login using the selected connection
loginIdManager.federatedLogin({
  connection: selectedConnection.name,
});

パラメーター	タイプ	必須か否か	説明
connection	文字列	必須	接続の識別子。
[key: string]	文字列 | 番号 | ブール値 | 未定義	任意	ユーザーから収集した追加のデータ。このデータはpost-loginアクショントリガーでアクセスできます。

​

pickCountryCode( options? )

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

// This method does not support any parameters
loginIdManager.pickCountryCode();

​

ログインパスワード画面クラス

ログインパスワード画面クラスはIdentifier First認証フローの一部で、ユーザーのパスワードを収集します。

ログインパスワード画面クラスのインポートとインスタンス化

import LoginPassword from "@auth0/auth0-acul-js/login-password";
const loginPasswordManager = new LoginPassword();

// SDK Properties return a string, number or boolean
// ex. "login-password"
loginPasswordManager.screen.name;

// SDK Methods return an object or array
// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} 
loginPasswordManager.screenLinks();

​

プロパティ

ログインパスワード画面クラスには以下のプロパティがあります。

branding

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

​

メソッド

ログインパスワード画面クラスには以下のメソッドがあります。

​

login( options? )

このメソッドは、前のステップからの識別子と入力されたパスワードを基にユーザーを認証します。認証したら、ユーザーが次のステップにリダイレクトされます。

loginPasswordManager.login({
  username: <usernameFieldValue>,
  password: ****** **
});

パラメーター	タイプ	必須	説明
captcha	文字列	条件付き	CAPTCHAプロバイダーが返すCAPTCHAコードまたは応答です。このプロパティはAuth0テナントにボット検知が有効な場合には必須です。
username	文字列	必須	ユーザーの識別子です。
password	文字列	必須	ユーザーのパスワードです。
[key: string]	文字列 | 数値 | ブール値 | 未定義	任意	ユーザーから収集した追加のデータです。このデータにはpost-loginアクショントリガーでアクセスできます。

​

パスワードレスログインメールコード画面クラス

パスワードレスログインメールコード画面クラスはIdentifier First認証フローの一部です。ワンタイムパスワード（OTP）コードが前のステップで入力済みのメールアドレスに送信され、ユーザーがそれを使用して認証できるようにします。

パスワードレスログインメールコード画面クラスのインポートとインスタンス化

import LoginPasswordlessEmailCode from '@auth0/auth0-acul-js/login-passwordless-email-code';
const loginPasswordlessEmailCodeManager = new LoginPasswordlessEmailCode();

// SDK Properties return a string, number or boolean
// ex. "login-passwordless-email-code"
loginPasswordlessEmailCodeManager.screen.name;

// SDK Methods return an object or array
// ex. { edit_identifier: "/edit_url" } 
loginPasswordlessEmailCodeManager.screenLinks();

​

プロパティ

パスワードレスログインメールコード画面クラスには以下のプロパティがあります。

branding

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

​

メソッド

パスワードレスログインメールコード画面クラスには以下のメソッドがあります。

​

resendCode( options? )

このメソッドは前のステップで入力されたメールアドレスにOTPを送信します。

// This method does not support any parameters
loginPasswordlessEmailCode.resendCode();

パラメーター	タイプ	必須	説明
[key: string]	文字列 | 数字 | ブール値 | undefined	任意	ユーザーから収集した任意のデータです。

​

SubmitCode( options? )

このメソッドは提供されたメールアドレスとOTPコードを基にユーザーを認証します。

loginPasswordlessEmailCode.submitCode({
 email: <EmailFieldValue>;
 code: <OtpCodeFieldValue>;
});

パラメーター	タイプ	必須	説明
captcha	文字列	条件付き	CAPTCHAプロバイダーが返すCAPTCHAコードまたは応答です。このプロパティはAuth0テナントにボット検知が有効な場合には必須です。
code	値の文字列	必須	メールに送信されたOTPコードです。
[key: string]	文字列 | 数値 | ブール値 | undefined	任意	ユーザーから収集した追加のデータです。このデータはpost-loginアクションのトリガーで利用できます。

​

パスワードレスログインSMS OTP画面クラス

パスワードレスログインSMS OTP画面クラスはIdentifier First認証フローの一部です。ワンタイムパスワード（OTP）コードが前のステップで入力済みの電話番号に送信され、ユーザーがそれを使用して認証できるようにします。

パスワードレスログインメールコード画面クラスのインポートとインスタンス化

import LoginPasswordlessSmsOtp from '@auth0/auth0-acul-js/login-passwordless-sms-otp';
const loginPasswordlessSmsOtpManager = new LoginPasswordlessSmsOtp();

// SDK Properties return a string, number or boolean
// ex. "login-passwordless-sms-otp"
loginPasswordlessSmsOtpManager.screen.name;

// SDK Methods return an object or array
// ex. { edit_identifier: "/edit_url" } 
loginPasswordlessSmsOtpManager.screenLinks();

​

プロパティ

パスワードレスログインSMS OTP画面クラスには以下のプロパティがあります。

branding

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

​

メソッド

パスワードレスログインSMS OTP画面クラスには以下のメソッドがあります。

​

resendOTP( options? )

このメソッドは前のステップで入力されたメールアドレスにOTPを送信します。

// This method does not support any parameters
loginPasswordlessSmsOtpManager.resendOTP()

パラメーター	タイプ	必須	説明
[key: string]	文字列 | 数字 | ブール値 | undefined	任意	ユーザーから収集した任意のデータです。

​

submitOTP( options? )

このメソッドは提供された電話番号とOTPコードを基にユーザーを認証します。

loginPasswordlessSmsOtpManager.submitOTP({
 username: <PhoneFieldValue>;
 otp: <OtpCodeFieldValue>;
})

パラメーター	タイプ	必須	説明
captcha	文字列	条件付き	CAPTCHAプロバイダーが返すCAPTCHAコードまたは応答です。このプロパティはAuth0テナントにボット検知が有効な場合には必須です。
otp	文字列	必須	電話番号に送信されたOTPコードです。
username	文字列	必須	前の手順で使用された電話番号です。
[key: string]	文字列 | 数値 | ブール値 | 未定義	任意	ユーザーから収集した任意のデータです。