--- title: "Hosted Authenticationの設定" url: https://docs.catalyst.zoho.com/ja/tutorials/hosted-login-app/nodejs/configure-hosted-login/ description: "Catalyst Hosted Authenticationの機能を使用して、ユーザーサインアップ、アプリケーションログイン、パスワードリセットを提供し、主要なフェデレーテッドIDプロバイダーを使用したサインインを実装する、シンプルなBasicまたはReactアプリケーションを作成します。" last_updated: 2026-10-06T06:21:49Z service: All Services type: tutorial related_links: - name: "ホスト型認証タイプのセットアップ" url: /ja/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/configure-hosted-authentication/ - name: "ソーシャルログインの設定" url: /ja/cloud-scale/help/authentication/social-logins/configuring-social-logins/ --- # アプリケーションのHosted Authenticationの設定 このセクションでは、*Native Catalyst Authentication*タイプである*Hosted Login*を設定しましょう。 1. Authenticationは[Catalyst Cloud Scale](https://docs.catalyst.zoho.com/ja/cloud-scale/)のコンポーネントです。コンソールのサイドナビゲーションメニューの**Cloud Scale**アイコンをクリックしてCloud Scaleサービスコンソールにアクセスし、**Start Exploring**をクリックします。 ![catalyst_authentication_cloudscale_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_cloudscale_view.webp) 2. *Security & Identity*の下にある**Authentication**をクリックして、Authenticationコンポーネントにアクセスします。 ![catalyst_authentication_console_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/authorisation-portal-cloudscale-authentication.webp) 3. アプリケーションの認証要素は、[*Native Catalyst Authentication*](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/introduction/)または[*Third-party Authentication*](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/third-party-authentication/introduction/)サービスを使用して設定できます。このチュートリアルでは、*Native Catalyst Authentication*タイプである[*Hosted Login*](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/)を使用してアプリケーションの認証を設定します。*Native Catalyst Authentication*セクションの**Set Up**ボタンをクリックして、ログイン要素の設定を開始します。 ![catalyst_authentication_native_setup_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_native_setup_highlight.webp) > **Note:** * [Embedded Login](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/) * [Third-party Authentication ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/third-party-authentication/introduction/) 4. *Hosted Authentication*を選択し、**Next**をクリックします。 ![catalyst_authentication_hosted_setup_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_setup_highlight.webp) 5. *Company Name*フィールドにビジネス名またはお好みの名前を入力し、*Company Logo*用の画像ファイルをアップロードします。 ![catalyst_authentication_hosted_name_n_logo](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_name_n_logo.webp) > **Note:** このチュートリアルでは、会社名として「**Zylker Technologies Pvt. Ltd.**」を使用しています。 6. コンソールのカラーパレットを使用してログイン要素のスタイルを設定します。右側の*Preview*セクションを使用して、お好みに合わせてログイン要素をデザインします。 ![catalyst_authentication_hosted_design_color_pallete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_design_color_pallete.webp) > **Note:** *Preview*セクションを使用して、*Sign In*、*Sign Up*、*Password Reset*要素のスタイルを同時に確認できます。ただし、*Sign Up*ページを表示するには、Public Signupを有効にする必要があります。*Public Signup*を有効にする手順は以下に記載されています。 7. **トグルボタン**をクリックして*Public Signup*を有効にします。 ![catalyst_authentication_hosted_oublic_toggle_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_oublic_toggle_highlight.webp) * 情報ポップアップを読み、**Yes, Proceed**をクリックします。 ![catalyst_authentication_hosted_public_signup_proceed](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_public_signup_proceed.webp) > **Note:** *Public Signup*の詳細については、この[ヘルプドキュメント](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/public-signup/)をご覧ください。 8. コンソールにある[Social Logins](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/social-logins/introduction/)のいずれかまたはすべてを追加できます。 ![catalyst_authentication_social_login_configurations](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_social_login_configurations.webp) **Zoho**ソーシャルログインを有効にするには： - **Zoho**ボタンをクリックし、*Client Name*として「**AuthorizationPortal**」と入力します。 ![catalyst_authentication_social_login_zoho_configuring](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_social_login_zoho_configuring.webp) - **Enable**をクリックします。 ![catalyst_authentication_hosted_zoho_sl_alone](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_zoho_sl_alone.webp) エンドユーザーがZohoの認証情報を使用してアプリケーションにログインできるようになりました。 > **Note:** アプリケーションはCatalyst by Zoho上で構築されているため、OAuth `Client ID`と`Client Secret`の認証情報を作成する必要はありません。 **Google**ソーシャルログインを有効にするには： - **Google**ボタンをクリックし、Googleコンソールで取得したOAuth `Client ID`と`Client Secret`をそれぞれのフィールドに入力します。 ![catalyst_authentication_social_login_google_configuring](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_social_login_google_configuring.webp) > **Note:** 各ソーシャルログインのOAuth `Client ID`と`Client Secret`を取得する手順は、以下のヘルプドキュメントで確認できます：[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)。 - **Enable**をクリックします。 ![catalyst_authentication_hosted_zoho_google_sl_alone](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_zoho_google_sl_alone.webp) エンドユーザーが**Google**の認証情報を使用してアプリケーションにログインできるようになりました。 同じ手順を繰り返して、他のソーシャルログインを有効にできます。 ![catalyst_authentication_social_logins_configured](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_social_logins_configured.webp) 9. **Next**をクリックします。 > **Note:** *Authentication Type*セクションを使用して、後から[デザインとソーシャルログインの設定を編集](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/edit-hosted-authentication/)するオプションが常にあります。 10. *Additional Settings*セクションは、後で*Whitelisting*機能を使用して設定します。**Finish**をクリックします。 ![catalyst_authentication_addn_settings_skip](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_addn_settings_skip.webp) アプリケーションに*Hosted Authentication*タイプが有効になったことを確認できます。 ![catalyst_authentication_hoted_login_enabled](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hoted_login_enabled.webp) また、Catalystが*Login*、*Sign Up*、*Password Reset*ページ用のセキュアな`Access URLs`を生成し、関連するすべてのページにスタイリングの設定を自動的に反映したことを確認できます。 ![catalyst_authentication_hoted_login_enabled_three_pages](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hoted_login_enabled_three_pages.webp)