--- title: "はじめに" url: https://docs.catalyst.zoho.com/ja/tutorials/hosted-login-app/java/introduction/ description: "Catalyst Hosted Authenticationの機能を使用して、ユーザーサインアップ、アプリケーションログイン、パスワードリセットを提供し、主要なフェデレーテッドIDプロバイダーを使用したサインインを実装する、シンプルなBasicまたはReactアプリケーションを作成します。" last_updated: 2026-11-03T07:48:52Z 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](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)関数を使用したCatalyst Hosted Authenticationによる認証後、エンドユーザーがアプリケーションにログインできるシンプルなクライアントアプリケーションの構築方法を説明します。 **Authorization Portal**アプリケーションは、以下のCatalystサービスとそれぞれのコンポーネントを使用します： - [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/ja/cloud-scale/) - **Authentication**: エンドユーザーは、[Native Catalyst Authentication Type](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/introduction/)である[Hosted Authentication](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/)を使用してアプリケーションに認証されます。 - **Web Client Hosting**: アプリケーションのフロントエンドは、[Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)コンポーネントを使用してCatalyst上でホストされます。クライアントは[Basic web app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#basic-client-applications)、[React app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#react-applications)、または[Angular app](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#angular-applications)として初期化および設定できます。 - [**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/) - **Functions**: *Custom User Validation*を実装するために、Javaで[Basic I/O function](https://docs.catalyst.zoho.com/ja/serverless/help/functions/basic-io/)をコーディングします。 このチュートリアルでは、*Hosted Authentication Type*のさまざまな機能の使用方法を理解できます。このチュートリアルでは以下の機能を組み込みます： - メールアドレスを使用してWebアプリにエンドユーザーをサインアップさせる - サインアップアカウント情報を使用してエンドユーザーをアプリにログインさせる - 以下のフェデレーテッドIDプロバイダーのいずれかまたはすべてを使用してエンドユーザーをアプリにログインさせる： - [Zoho](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login) - [Google](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-google-social-login) - [Microsoft 365](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-microsoft-365-social-login) - [LinkedIn](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-linkedin-social-login) - [Facebook](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-facebook-social-login) - エンドユーザーがパスワードを忘れた場合のパスワードリセット - 以下のページのログイン要素のカスタマイズとスタイリング— **Sign Up**、**Confirm Password**、**Log In**、**Password Reset** - **Email Verification**と**Password Reset**の[メールテンプレート](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/email-templates/customizing-email-templates/)のカスタマイズと設定 - [Custom User Validation](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)関数の設定と追加 - アプリケーションへのログインとログアウト 以下の画像は、クライアントアプリケーションのログイン画面の表示例です： ![catalyst_authentication_hosted_catalyst_deploy_app_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_catalyst_deploy_app_complete.webp) このアプリケーションの構築には、Authenticationコンポーネントの以下の機能を使用します： * **User Management**: ユーザーの詳細は、アプリケーションにサインアップした後、この[セクション](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/user-management/introduction/)に自動的に保存されます。この機能を使用して、エンドユーザーのアプリケーションへのアクセスを管理し、[ロールを設定](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/user-management/roles/introduction/)できます。 * **Authentication Type**: アプリケーションに設定した[認証タイプ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/authentication-types/)を表示し、必要に応じて設定を編集できます。 * **Whitelisting**: このセクションを使用して[Custom User Validation](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)を有効にします。また、このセクションでアプリケーションの[CORSおよびiFrameアクセス](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction/)を有効にすることもできます。 * **Email Templates**: この[セクション](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/email-templates/introduction/)から、*Email Verification*と*Password Reset*のメールをカスタマイズおよび設定できます。 このアプリケーションの構築には、[Catalyst Webコンソール](https://console.catalyst.zoho.com/baas/index)と[Catalyst Command Line Interface (CLI)](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)を使用します。 このチュートリアルでは、プロジェクトの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が確認された後、アカウントの新しいパスワードを設定できます。 > **Note:** **Hosted Login**方式を使用しているため： - メールをトリガーするための追加ロジックをコーディングする必要はありません。Catalystがバックエンドで自動的に処理します。 - ログイン、サインアップ、パスワードリセットページのスタイリングはコンソールで直接行えるため、追加のスタイル要素をコーディングする必要はありません。