はじめに

このチュートリアルでは、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を実装するために、Node.jsで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ディレクトリに含めるファイルのコードが提供されます。提供されたコードをコピーするか、必要に応じてカスタマイズし、指示に従って適切なファイルに貼り付けてください。