はじめに

このチュートリアルでは、Custom User Validation関数を使用したCatalyst Hosted Authenticationによる認証後、エンドユーザーがアプリケーションにログインできるシンプルなクライアントアプリケーションの構築方法を説明します。

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

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

このチュートリアルでは、Hosted Authentication Typeのさまざまな機能の使用方法を理解できます。このチュートリアルでは以下の機能を組み込みます：

• メールアドレスを使用してWebアプリにエンドユーザーをサインアップさせる
• サインアップアカウント情報を使用してエンドユーザーをアプリにログインさせる
• 以下のフェデレーテッドIDプロバイダーのいずれかまたはすべてを使用してエンドユーザーをアプリにログインさせる：
  • Zoho
  • Google
  • Microsoft 365
  • LinkedIn
  • Facebook
• エンドユーザーがパスワードを忘れた場合のパスワードリセット
• 以下のページのログイン要素のカスタマイズとスタイリング— Sign Up、Confirm Password、Log In、Password Reset
• 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)を使用します。

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

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

認証ポータルのアプリケーションロジックは以下のとおりです：

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

• カスタムユーザーバリデーション: ログインプロセス中にエンドユーザーが入力した詳細情報は、Custom User Validation関数にJSON入力として送信されます。Basic I/O functionに存在するカスタムロジックに基づいて詳細情報が正常にバリデートされた場合、確認メールがトリガーされます。

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

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

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

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