> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# LoginEmailVerification
"login-email-verification" 画面での操作を管理します。
この画面では、ログイン処理中に本人確認を行うため、
ユーザーにメールアドレス宛に送信されたワンタイムコードの入力を促します。
入力されたコードを送信するメソッド（`continueWithCode`）や、
元のコードを受信していない場合や有効期限が切れている場合に新しいコードをリクエストするメソッド（`resendCode`）を提供します。
`BaseContext` を継承し、トランザクションの state、クライアント情報、国際化されたテキストなどの
認証フロー間で共有されるデータにアクセスします。
```typescript Example theme={null}
// LoginEmailVerification 画面 SDK の使用方法:
import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification';
// ログインメール検証画面のマネージャーをインスタンス化
const loginEmailVerificationManager = new LoginEmailVerification();
// 画面固有のテキストにアクセス (例: タイトル、ラベル、ボタンテキスト)
const screenTexts = loginEmailVerificationManager.screen.texts;
const pageTitle = screenTexts?.title || 'Verify Your Email';
const codePlaceholder = screenTexts?.codePlaceholder || 'Enter code here';
// 前回の試行からのトランザクションエラーにアクセス
const transactionErrors = loginEmailVerificationManager.transaction.errors;
if (transactionErrors && transactionErrors.length > 0) {
transactionErrors.forEach(error => {
console.error(`Error Code: ${error.code}, Message: ${error.message}`);
// これらのエラーをユーザーに適切に表示します。
});
}
// フォームからのコード送信を処理する例
async function onCodeSubmit(enteredCode: string) {
try {
await loginEmailVerificationManager.continueWithCode({ code: enteredCode });
// 検証が成功すると、Auth0 は通常ユーザーをリダイレクトします。
// 検証エラー (例: 無効なコード) がある場合、ページは
// 再レンダリングされ、`loginEmailVerificationManager.transaction.errors` が更新されます。
} catch (e) {
// この catch ブロックは送信中の予期しないエラー (例: ネットワークの問題) 用です。
console.error('An unexpected error occurred while submitting the code:', e);
}
}
// コード再送信リクエストを処理する例
async function onResendCodeClick() {
try {
await loginEmailVerificationManager.resendCode();
// 新しいコードが送信されたことをユーザーに通知します。
// ページが再レンダリングされる可能性があります。「too-many-emails」などの
// 問題については `loginEmailVerificationManager.transaction.errors` を確認してください。
} catch (e) {
console.error('コードの再送信中に予期しないエラーが発生しました:', e);
}
}
```
## コンストラクター
`LoginEmailVerification` 画面マネージャーのインスタンスを作成します。
このコンストラクターでは `BaseContext` を初期化します。これは、次の処理を行うことを含みます。
## プロパティ
BrandingMembers} />
ClientMembers} />
OrganizationMembers} />
PromptMembers} />
ScreenMembers} />
TenantMembers} />
TransactionMembers} />
UntrustedDataMembers} />
UserMembers} />
Login Email Verification 画面の一意の識別子です。
この静的プロパティは SDK の `BaseContext` によって使用され、
クラスが正しい画面コンテキストでインスタンス化されることを保証します。
## メソッド
ユーザーが入力したメール認証コードを Auth0 に送信します。
このメソッドは、認証コードを含むフォームデータを準備して送信し、
必須の `action: "default"` とともに `/u/login-email-verification` エンドポイントにポストします。
フォーム送信が開始されると解決される Promise です。
通常、送信が成功するとサーバー側でリダイレクトが行われます。
コードが誤っている場合やエラーが発生した場合、ページは再レンダーされ、
`this.transaction.errors` にエラーが格納されます。
#### Throws
`payload.code` が存在しないか、文字列ではない場合にスローされます。
送信中に `FormHandler` で問題が発生した場合（例: ネットワークエラー）にも
スローされる可能性があります。Auth0 の検証エラー（例: "invalid-code"）は
JS のエラーとしてスローされるのではなく、処理後に `this.transaction.errors`
から参照できるようになります。
```typescript Example theme={null}
const manager = new LoginEmailVerification();
// 'userInputCode' はフォーム入力から取得した文字列であると仮定
manager.continueWithCode({ code: userInputCode })
.catch(err => {
// 予期しない送信エラーを処理します
displayGlobalError("Could not submit your code. Please try again.");
});
// 処理後、検証メッセージについては manager.transaction.errors を確認します。
```
ContinueWithCodeOptionPayload}>
Login Email Verification 画面の `continueWithCode` メソッドに渡すオプションです。
この操作は、ユーザーがメールで受け取った認証コードを送信して、
認証フローを継続する際に使用されます。
**プロパティ**
ユーザーのメールに送信された認証コードです。通常は短い数字または
英数字の文字列であり、ユーザーはこれをフォームに入力する必要があります。
```ts Example 2 theme={null}
"ABCXYZ"
```
Error[]}>
コンテキストからトランザクションエラーの配列を取得します。存在しない場合は空の配列を返します。
トランザクションコンテキストから取得されるエラーオブジェクトの配列です。
Auth0 に対して、新しい認証コードをユーザーのメールアドレスに送信するよう要求します。
これは、ユーザーが元のコードを受け取らなかった場合や、有効期限が切れた場合に
一般的に使用されます。このメソッドは、`action: "resend-code"` を含むフォームデータを
`/u/login-email-verification` エンドポイントにポストします。
再送リクエストが開始されると解決される Promise です。
リクエストが成功すると、通常は新しいメールが送信されます。
たとえばレート制限（`too-many-emails`）に達した場合などは、
ページが再レンダーされ、`this.transaction.errors` が更新されることがあります。
#### Throws
`FormHandler` で問題が発生した場合（例: ネットワークエラー）にスローされます。
サーバー側の検証エラー（例: レート制限）は JS のエラーとしてスローされず、
処理後に `this.transaction.errors` から参照できるようになります。
```typescript Example theme={null}
const manager = new LoginEmailVerification();
manager.resendCode()
.then(() => {
// 新しいコードが送信されたことをユーザーに知らせます。
showNotification("A new verification code is on its way!");
})
.catch(err => {
// 予期しない送信エラーを処理します
displayGlobalError("Could not request a new code. Please try again later.");
});
// 処理後、特定の問題については manager.transaction.errors を確認します。
```
ResendCodeOptionsPayload}>
Login Email Verification 画面の `resendCode` メソッドに渡すオプションです。
この操作は、ユーザーが新しい認証コードをメールで再送するよう要求する際に使用されます。
たとえば、最初のコードを受け取らなかった場合や、有効期限が切れた場合などです。
ResendControl}>
**`Utility Feature`**
この画面向けの、タイムアウト管理付き再送機能を取得します
startResend メソッドを持つ ResendControl オブジェクト
```typescript Example theme={null}
import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification';
const loginEmailVerification = new LoginEmailVerification();
const { startResend } = loginEmailVerification.resendManager({
timeoutSeconds: 15,
onStatusChange: (remainingSeconds, isDisabled) => {
console.log(`Resend available in ${remainingSeconds}s, disabled: ${isDisabled}`);
},
onTimeout: () => {
console.log('Resend is now available');
}
});
// ユーザーが再送ボタンをクリックしたときに startResend を呼び出します
startResend();
```
StartResendOptions}>
再送機能を設定するためのオプション
**プロパティ**
OnStatusChangeCallback} />