メインコンテンツへスキップ
‘このガイドでは、ログインテンプレートにソーシャルログイン機能を追加します。’; 毎日使用する数多くのサイトのパスワードを記憶しておくことは簡単ではありません。ベストプラクティスに従って、全てのアカウントに異なるパスワードを設定している場合はなおさらです。FacebookやGoogleなどのソーシャルアカウントを使用してログインできる機能を提供することで、ウェブサイトの会員になったユーザーがパスワードを容易に管理できるようになります。 このガイドでは、ログインテンプレートにソーシャルログイン機能を追加します。

​
始める前に必要なもの

  • アクセス権設定機能（CMS Hub Enterpriseが必要です）
  • メンバーシップ ログイン テンプレート
  • アクセスを制限するウェブサイトページ
  • ページアクセス権を付与するコンタクトリスト（ご自分のEメールだけが含まれているリストが、実際のリストを使用する前のテストに適しています）

​
1. ログインテンプレートを開く

テーマ内のログインテンプレートを見つけて開きます。メンバーシップ ログイン テンプレートには、テンプレートアノテーションtemplateType: membership_login_pageが含まれている必要があります。

​
2. メンバーシップ ソーシャル ログイン モジュールを追加する

membership_social_loginsモジュールのコードを、ボタンを表示するテンプレートに追加します。 
{% module "social" path="@hubspot/membership_social_logins" %}
このモジュールはGoogleとFacebookの両方のログインをサポートしています。両方、またはいずれか１つをログインページに追加できます。 次に、コードの例を示しています。いずれかのプロバイダーのみを追加する場合には、IDも、サポートしないサービスのenabledパラメーターも指定する必要はありません。 
{% module "social" path="@hubspot/membership_social_logins",
        clientid="1234567890-abc123def456.apps.googleusercontent.com"
        appid="12345678"
        facebook_enabled=true
        google_enabled=true
        %}

​
3. ソーシャルログインをテストする

  1. 自分のEメールアドレスだけが含まれているコンタクトリストを作成します。このEメールアドレスは、GoogleアカウントまたはFacebookアカウントに使用している必要があります。
  2. ページを［非公開 - 登録が必要］に設定し、新しく作成したテストリストを選択します。
  3. サインイン状態を回避するために、シークレットモードを使用してページの1つにアクセスします。ソーシャルログイン機能を使用したログインテンプレートが表示されるはずです。
  4. ソーシャル ログイン ボタンを使用してログインを試みます。
問題が発生した場合は、手順を再確認して、クライアントIDまたはアプリIDが正しく入力され、モジュールに渡されていることを確かめます。サイトのドメインがアプリ設定内に信頼できるドメインとして設定されていることを確かめます。

​
完了

ログインテンプレートにソーシャルログイン機能を正常に追加できました。ユーザーは、GoogleやFacebookを使用してログインできるようになりました。

​
関連コンテンツ

Last modified on December 10, 2025