> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 会員ページにソーシャルログインを追加する方法

> このガイドでは、ログインテンプレートにソーシャルログイン機能を追加します。

'このガイドでは、ログインテンプレートにソーシャルログイン機能を追加します。';

<ProductTier tiers={['cms-enterprise']} />

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

このガイドでは、ログインテンプレートにソーシャルログイン機能を追加します。

## 始める前に必要なもの

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

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

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

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

`membership_social_logins`モジュールのコードを、ボタンを表示するテンプレートに追加します。

```hubl theme={null}
{% module "social" path="@hubspot/membership_social_logins" %}
```

<Alert type="info">
  このモジュールはGoogleとFacebookの両方のログインをサポートしています。両方、またはいずれか１つをログインページに追加できます。
</Alert>

このモジュールはGoogleとFacebookの両方のログインをサポートしています。両方、またはいずれか１つをログインページに追加できます。

<DndSection>
  <DndModule numCols={6}>
    ### Googleログインボタンを追加する

    <div>
      Google Developer Consoleで認証情報を作成します。モジュールタグで使用する**クライアントID**が提供されます。

      1. [［Credentials］ページ](https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials\&followup=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials\&ifkv=AdBytiPbieJNzGmL-14579rBisbQoPOCBg9IZePRFS0dpPsTqPRY5qTPWJlUAEgK6bGyKDc64wZSsw\&osid=1\&passive=1209600\&service=cloudconsole\&flowName=WebLiteSignIn\&flowEntry=ServiceLogin\&dsh=S-1422909102%3A1757684513748606)に進みます。
      2. ［Create credentials］>［OAuth client ID］を選択します。
      3. アプリケーションタイプとして［Web application］を選択します。
      4. HubSpotサイト上で、何にログインしているかをユーザーが理解できる名前をアプリに付けます。
      5. ［Create］をクリックします。
      6. 新しく作成されたOAuthクライアントの**クライアントID**をコピーします。
      7. テンプレートファイル内でソーシャル ログイン モジュールを見つけ、パラメーター`google_clientid="YourAppID"`を追加し、"YourAppID"をコピーしたアプリのIDに置き換えます。
      8. パラメーター`google_enabled=true`を追加します。これにより、Googleログインボタンが表示されます。
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ### Facebookログインボタンを追加する

    <div>
      Facebookのログインボタンを追加するには、Facebookの開発者向けダッシュボード内でアプリを作成します。このアプリに**FacebookアプリID**が付与されます。

      1. [Facebookの開発者アカウントににログインします](https://www.facebook.com/login/?next=https%3A%2F%2Fbusiness.facebook.com%2Fbusiness%2Floginpage%2F%3Fnext%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Fapps%252F)（まだない場合は[アカウントを新規に登録](https://developers.facebook.com/docs/development/register)します）
      2. ［Create App］ボタンを使用します。
      3. ［Build connected experiences］を選択してから、［continue］をクリックします。
      4. HubSpotサイトへのログインであることをユーザーに示す名前をアプリに付けます。［Create app］を選択します。
      5. 製品をアプリに追加するように求める画面が表示されます。
      6. ［Facebook Login］を選択します。
      7. 左のナビゲーションパネルから［Settings］を開き、［Client OAuth Settings］の［Valid OAuth Redirect URIs］にリダイレクトURLを入力します。
      8. 最上部のバーにアプリDが表示されます。クリップボードにコピーします。
      9. テンプレートファイル内のソーシャル ログイン モジュールを見つけ、`facebook_appid="YourAppID"`パラメーターを追加し、「YourAppID」を先ほどコピーしたアプリIDで置き換えます。
      10. `facebook_enabled=true`パラメーターを追加します。これにより、Facebookログインボタンが表示されます。
    </div>
  </DndModule>
</DndSection>

<Alert type="info">
  HubSpotは、GoogleとFacebookが提供するUIの制御に関与できる立場にはありません。UIが変わると、以下の手順は混乱を招くか、または機能しなくなる可能性があります。最も重要な点は、クライアント／アプリを作成し、そのIDを取得することです。そのプロバイダーの既定モジュールのパラメーターと、該当する「enabled」パラメーターにそのIDを指定します。
</Alert>

次に、コードの例を示しています。いずれかのプロバイダーのみを追加する場合には、IDも、サポートしないサービスのenabledパラメーターも指定する必要はありません。

```hubl theme={null}
{% module "social" path="@hubspot/membership_social_logins",
        clientid="1234567890-abc123def456.apps.googleusercontent.com"
        appid="12345678"
        facebook_enabled=true
        google_enabled=true
        %}
```

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

1. 自分のEメールアドレスだけが含まれている[コンタクトリストを作成](https://knowledge.hubspot.com/ja/lists/create-active-or-static-lists#set-up-a-new-list)します。このEメールアドレスは、GoogleアカウントまたはFacebookアカウントに使用している必要があります。
2. [ページを［非公開 - 登録が必要］に設定し](https://knowledge.hubspot.com/ja/website-pages/require-member-registration-to-access-private-content#set-up-membership-registration-for-pages)、新しく作成したテストリストを選択します。
3. サインイン状態を回避するために、シークレットモードを使用してページの1つにアクセスします。ソーシャルログイン機能を使用したログインテンプレートが表示されるはずです。
4. ソーシャル ログイン ボタンを使用してログインを試みます。

問題が発生した場合は、手順を再確認して、クライアントIDまたはアプリIDが正しく入力され、モジュールに渡されていることを確かめます。サイトのドメインがアプリ設定内に信頼できるドメインとして設定されていることを確かめます。

## 完了

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

## 関連コンテンツ

* [アクセス権設定](https://developers.hubspot.com/docs)
* [アクセス権設定のSSO](https://developers.hubspot.com/docs)
* [CMS HubのCRMオブジェクト](https://developers.hubspot.jp/docs)
* メンバーシップ ソーシャル ログインのモジュール リファレンス