---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/embedded-auth/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/embedded-authentication/introduction/
  - name: "ユーザー管理"
    url: /ja/cloud-scale/help/authentication/user-management/introduction/
  - name: "カスタムユーザー検証"
    url: /ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/
  - name: "IDプロバイダー"
    url: /ja/cloud-scale/help/authentication/social-logins/introduction/
  - name: "Node.js SDK"
    url: /ja/sdk/nodejs/v2/overview/
---


# はじめに

このチュートリアルでは、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が検証されると、アカウントの新しいパスワードを設定できます。

Note: 

* ネイティブCatalyst Authentication typeであるEmbedded Loginメソッドを使用しているため、アプリケーションのWebクライアントに追加できるネイティブログインフォームのスクリプトが提供されます。スクリプトに記載されているCSSファイルを設定することで、ログインおよびパスワードリセット要素のデザインとブランディングをカスタマイズすることもできます。iFrameとログイン要素のスタイリングについては、Embedded Authentication typeのスタイリングに関するヘルプセクションを参照してください。
   
* Forgot Passwordオプションを使用する代わりに、エンドユーザーはアプリ管理者に連絡して認証情報をリセットすることもできます。User Management機能を使用して、パスワードのリセットリンクと手順を含むPassword ResetメールをCatalyst内からユーザーに送信できます。このメールはEmail Templates機能を使用してスタイリングできます。