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

APPLICABLE PRODUCTS
  • CMS Hub
    • Enterprise

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

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

始める前に必要なもの

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

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

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

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

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

{% module "social" path="@hubspot/membership_social_logins" %}

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

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

Googleログインボタンを追加する

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

  1. ［Credentials］ページに進みます。
  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ログインボタンが表示されます。

Facebookログインボタンを追加する

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

  1. Facebookの開発者アカウントににログインします（まだない場合はアカウントを新規に登録します）
  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ログインボタンが表示されます。

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

次に、コードの例を示しています。いずれかのプロバイダーのみを追加する場合には、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を使用してログインできるようになりました。

関連コンテンツ

参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。