---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/hosted-login-app/nodejs/introduction/
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "ホスト型認証タイプ"
    url: /ja/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/
  - name: "ユーザー管理"
    url: /ja/cloud-scale/help/authentication/user-management/introduction/
  - name: "カスタムユーザー検証"
    url: /ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/
  - name: "ソーシャルログイン"
    url: /ja/cloud-scale/help/authentication/social-logins/introduction/
  - name: "Java SDK"
    url: /ja/sdk/java/v1/overview/
  - name: "Node.js SDK"
    url: /ja/sdk/nodejs/v2/overview/
  - name: "Python SDK"
    url: /ja/sdk/python/v1/overview/
---


# はじめに

このチュートリアルでは、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関数の設定と追加
- アプリケーションへのログインとログアウト

以下の画像は、クライアントアプリケーションのログイン画面の表示例です：
<br />


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

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

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

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

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

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

Note: Visual Studio Code IDEユーザーの場合、Catalyst Tools拡張機能をインストールして、CLIの代わりにIDEを使用できます。Catalyst VS Code拡張機能の詳細については、このヘルプセクションをご参照ください。

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