はじめに

このチュートリアルでは、Embedded Authentication TypeとCustom User Validationファンクションを使用して、エンドユーザーが認証後にアプリケーションにログインできるシンプルなクライアントアプリケーションを構築します。Embedded Authentication typeでは、ログイン要素をアプリケーション内のiFrameとして読み込むことができます。

Embedded Authentication Portalアプリは、以下のCatalystサービスとそれぞれのコンポーネントを使用します：

• Catalyst Cloud Scale
  • Authentication: エンドユーザーは、Native Catalyst Authentication TypeであるEmbedded Authenticationを使用してアプリケーションに認証されます。
  • Web Client Hosting: アプリケーションのフロントエンドは、Web Client Hostingコンポーネントを使用してCatalyst上にホストされます。クライアントをBasic web appおよびReact appとして初期化・設定します。
• Catalyst Serverless
  • Functions: Custom User Validationを実装するロジックをコーディングするために、Basic I/O functionを使用します。ファンクションはNode.jsでコーディングします。

このチュートリアルでは、Embedded Authentication Typeのさまざまな機能を理解できます。このチュートリアルでは、以下の機能を実装します：

• メールアドレスを使用したWebアプリへのサインアップ
• サインアップ時のアカウント情報を使用したアプリへのログイン
• 以下のIDプロバイダーログインのいずれかまたはすべてを使用したアプリへのログイン：
  • Zoho
  • Google
  • Microsoft 365
  • LinkedIn
  • Facebook
• エンドユーザーがパスワードを忘れた場合のパスワードリセットオプション
• Email VerificationおよびPassword Resetのメールテンプレートの設定
• Custom User Validationファンクションの設定と追加
• アプリケーションへのログイン後のプロフィール情報の表示
• アプリケーションからのログアウト

以下は、クライアントアプリケーションの表示例です：

動作するアプリケーションにアクセスして機能をテストできます：アプリを試す！

このアプリケーションでは、Authenticationコンポーネントの以下の機能を使用します：

• User Management: ユーザープロフィールは、アプリケーションにサインアップすると、このセクションに自動的に保存されます。この機能を使用して、エンドユーザーのアプリケーションへのアクセスを管理し、ロールを設定できます。

• Authentication Type: アプリケーションに設定した認証タイプを表示し、必要に応じて設定を編集できます。

• Whitelisting: このセクションを使用してCustom User Validationを有効にします。また、このセクションを使用してアプリケーションへのCORSおよびiFrameアクセスを有効にすることもできます。

• Email Templates: このセクションから、Email VerificationおよびPassword Resetメールを設定・カスタマイズできます。

このアプリケーションの構築には、Catalyst WebコンソールとCatalyst Command Line Interface（CLI）を使用します。

このチュートリアルでは、プロジェクトのファンクションおよびクライアントディレクトリに含めるファイルのコードが提供されます。提供されたコードをそのままコピーするか、必要に応じてカスタマイズして、指示に従って適切なファイルに貼り付けてください。

アプリケーションアーキテクチャ

認証ポータルのアプリケーションロジックを以下に説明します：

• ログインプロセス: エンドユーザーはログインページに誘導されます。Zoho、Google、LinkedIn、Microsoft 365、またはFacebookのIDプロバイダーログインを使用してアプリケーションにログインするか、提供されているSign Upオプションをクリックしてメールアドレスでサインアップすることができます。

• カスタムユーザーバリデーション: ログインプロセス中にエンドユーザーが入力した詳細情報は、Custom User ValidationファンクションにJSON入力として送信されます。Basic I/O functionに記述されたカスタムロジックに従って詳細情報が正常に検証された場合、確認メールが送信されます。

• メール検証のトリガー: ユーザーがアプリケーションにサインアップすると、アカウント登録に使用したメールアドレスにメール検証メールが送信されます。メール検証のコンテンツとスタイルは、AuthenticationのEmail Templates機能を使用してお好みに合わせてカスタマイズできます。

• パスワード設定: エンドユーザーがメール検証メールに含まれるリンクをクリックすると、パスワード設定ページに誘導されます。ここでエンドユーザーは、希望するパスワードを設定してアカウントを保護できます。

• エンドユーザーアカウントの作成: パスワードが設定されると、ユーザーアカウントが作成され、エンドユーザーは作成した認証情報を使用してアプリケーションにログインできるようになります。アカウントが作成されたことは、AuthenticationコンポーネントのUser Managementセクションでアカウント詳細を確認できます。

• パスワードリセットオプション: エンドユーザーは、ログインページにあるForgot Passwordオプションを選択してパスワードをリセットできます。以前のパスワードを入力してアカウントを復旧するか、リセットオプションに進むよう求められます。リセットオプションに進むと、ワンタイムパスワード（OTP）メールがユーザーに送信されます。OTPが検証されると、アカウントの新しいパスワードを設定できます。