会員ページにソーシャルログインを追加する方法
CMS Hub
- Enterprise
毎日使用する数多くのサイトのパスワードを記憶しておくことは簡単ではありません。ベストプラクティスに従って、全てのアカウントに異なるパスワードを設定している場合はなおさらです。FacebookやGoogleなどのソーシャルアカウントを使用してログインできる機能を提供することで、ウェブサイトの会員になったユーザーがパスワードを容易に管理できるようになります。
このガイドでは、ログインテンプレートにソーシャルログイン機能を追加します。
- アクセス権設定機能(CMS Hub Enterpriseが必要です)
- メンバーシップ ログイン テンプレート
- アクセスを制限するウェブサイトページ
- ページアクセス権を付与するコンタクトリスト(ご自分のEメールだけが含まれているリストが、実際のリストを使用する前のテストに適しています)
Google Developer Consoleで認証情報を作成します。モジュールタグで使用するクライアントIDが提供されます。
- [Credentials]ページに進みます。
- [Create credentials]>[OAuth client ID]を選択します。
- アプリケーションタイプとして[Web application]を選択します。
- HubSpotサイト上で、何にログインしているかをユーザーが理解できる名前をアプリに付けます。
- [Create]をクリックします。
- 新しく作成されたOAuthクライアントのクライアントIDをコピーします。
- テンプレートファイル内でソーシャル ログイン モジュールを見つけ、パラメーター
google_clientid="YourAppID"
を追加し、"YourAppID"をコピーしたアプリのIDに置き換えます。 - パラメーター
google_enabled=true
を追加します。これにより、Googleログインボタンが表示されます。
Facebookのログインボタンを追加するには、Facebookの開発者向けダッシュボード内でアプリを作成します。このアプリにFacebookアプリIDが付与されます。
- Facebookの開発者アカウントににログインします(まだない場合はアカウントを新規に登録します)
- [Create App]ボタンを使用します。
- [Build connected experiences]を選択してから、[continue]をクリックします。
- HubSpotサイトへのログインであることをユーザーに示す名前をアプリに付けます。[Create app]を選択します。
- 製品をアプリに追加するように求める画面が表示されます。
- [Facebook Login]を選択します。
- 左のナビゲーションパネルから[Settings]を開き、[Client OAuth Settings]の[Valid OAuth Redirect URIs]にリダイレクトURLを入力します。
- 最上部のバーにアプリDが表示されます。クリップボードにコピーします。
- テンプレートファイル内のソーシャル ログイン モジュールを見つけ、
facebook_appid="YourAppID"
パラメーターを追加し、「YourAppID」を先ほどコピーしたアプリIDで置き換えます。 facebook_enabled=true
パラメーターを追加します。これにより、Facebookログインボタンが表示されます。
HubSpotは、GoogleとFacebookが提供するUIの制御に関与できる立場にはありません。UIが変わると、以下の手順は混乱を招くか、または機能しなくなる可能性があります。最も重要な点は、クライアント/アプリを作成し、そのIDを取得することです。そのプロバイダーの既定モジュールのパラメーターと、該当する「enabled」パラメーターにそのIDを指定します。
次に、コードの例を示しています。いずれかのプロバイダーのみを追加する場合には、IDも、サポートしないサービスのenabledパラメーターも指定する必要はありません。
- 自分のEメールアドレスだけが含まれているコンタクトリストを作成します。このEメールアドレスは、GoogleアカウントまたはFacebookアカウントに使用している必要があります。
- ページを[非公開 - 登録が必要]に設定し、新しく作成したテストリストを選択します。
- サインイン状態を回避するために、シークレットモードを使用してページの1つにアクセスします。ソーシャルログイン機能を使用したログインテンプレートが表示されるはずです。
- ソーシャル ログイン ボタンを使用してログインを試みます。
問題が発生した場合は、手順を再確認して、クライアントIDまたはアプリIDが正しく入力され、モジュールに渡されていることを確かめます。サイトのドメインがアプリ設定内に信頼できるドメインとして設定されていることを確かめます。
- アクセス権設定
- アクセス権設定のSSO
- CMS HubのCRMオブジェクト
- メンバーシップ ソーシャル ログインのモジュール リファレンス
貴重なご意見をありがとうございました。