はじめに

このチュートリアルでは、カスタムユーザー検証ファンクションを備えたEmbedded認証タイプを使用して認証されたエンドユーザーがアプリケーションにログインできるシンプルなクライアントアプリケーションの構築を支援します。Embedded認証タイプでは、ログイン要素をアプリケーション内にiFrameとして読み込むことができます。

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

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

このチュートリアルは、Embedded認証タイプのさまざまな機能の使用方法を理解するのに役立ちます。このチュートリアルでは、以下の機能を組み込みます：

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

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

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

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

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

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

• ホワイトリスト: このセクションを使用してカスタムユーザー検証を有効にします。また、このセクションを使用してアプリケーションへのCORSおよびiFrameアクセスを有効にすることもできます。

• メールテンプレート: このセクションから、メール確認およびパスワードリセットメールを設定・カスタマイズできます。

Catalyst WebコンソールとCatalystコマンドラインインターフェース（CLI）を使用してこのアプリケーションを構築します。

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

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

Authorization Portalのアプリケーションロジックは以下の通りです：

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

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

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

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

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

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