--- title: "はじめに" url: https://docs.catalyst.zoho.com/ja/tutorials/embedded-auth/java/introduction/ description: "Catalyst Embedded Authenticationの機能を使用して、ユーザーサインアップ、アプリケーションログイン、パスワードリセットを提供し、一般的なIDプロバイダーを使用したサインインを実装するシンプルなWebアプリケーションを作成します。" 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/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: "Java SDK" url: /ja/sdk/java/v1/overview/ --- # はじめに このチュートリアルでは、[Embedded Authentication Type](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/)と[Custom User Validation](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)ファンクションを使用して、エンドユーザーが認証後にアプリケーションにログインできるシンプルなクライアントアプリケーションを構築します。Embedded Authentication typeでは、ログイン要素をアプリケーション内のiFrameとして読み込むことができます。 Embedded Authentication 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/)である[Embedded Authentication](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/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)として初期化・設定します。 - [Catalyst Serverless](https://docs.catalyst.zoho.com/ja/serverless/) - **Functions**: *Custom User Validation*を実装するロジックをコーディングするために、[Basic I/O function](https://docs.catalyst.zoho.com/ja/serverless/help/functions/basic-io/)を使用します。ファンクションは**Java**でコーディングします。 このチュートリアルでは、*Embedded 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) - エンドユーザーがパスワードを忘れた場合のパスワードリセットオプション - **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/)ファンクションの設定と追加 - アプリケーションへのログイン後のプロフィール情報の表示 - アプリケーションからのログアウト 以下は、クライアントアプリケーションの表示例です： ![working_app](https://catalyst-docs-development.zohostratus.in/images/tutorials/embedded_auth/working_app.webp) 動作するアプリケーションにアクセスして機能をテストできます：[アプリを試す！](https://authentication.catalystserverlessapp.com/app/index.html) このアプリケーションでは、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](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（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のスタイリングに関するヘルプセクション](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/)を参照してください。 * *Forgot Password*オプションを使用する代わりに、エンドユーザーはアプリ管理者に連絡して認証情報をリセットすることもできます。*User Management*機能を使用して、パスワードのリセットリンクと手順を含む**Password Reset**メールをCatalyst内からユーザーに送信できます。このメールは*Email Templates*機能を使用してスタイリングできます。