HubSpot CMS：セキュアなページ運用を実現する「ログインチェックモジュール」

Demo Video

Detail

会員限定コンテンツやウェビナー資料の配布ページなど、特定のユーザーにのみ閲覧を許可したいページを運用する際、手動での制限は手間がかかります。今回紹介する「ログインチェックモジュール」をページに配置するだけで、ユーザーがログインしているかを自動で判別し、未ログインの場合には指定した認証ページへ即座にリダイレクトさせることが可能になります。

1. 目的

本モジュールの主な目的は、「コンテンツ保護の自動化」と「ユーザー体験の最適化」です。

不正アクセスの防止: コンタクト情報の有無をシステム的に検証し、未登録ユーザーによる限定ページの閲覧をブロックします。
スムーズな認証誘導: 未ログインユーザーを自動的にリダイレクト（転送）させることで、認証プロセスへ迷わず誘導します。
ノーコードでのURL管理: リダイレクト先をHubSpotのエディター上から簡単に変更できるため、複数の限定ページで柔軟に運用できます。

2. ユースケース

会員限定資料のダウンロードページ: フォーム登録済みのユーザーのみが閲覧できるページを作成し、未登録者を登録用LPへ戻します。
ウェビナー参加者専用ページ: 参加申し込みが完了し、HubSpotに記録があるユーザーに対してのみ視聴ページを公開します。
マイページ・ダッシュボードへの入り口: ユーザーが直接URLを入力してアクセスしても、ログインしていなければログイン画面へ強制的に転送します。

3. 実装ステップ

デザインマネージャーでの設定から、ページでの運用までの手順です。

ステップ1：デザインマネージャーでのコード適用

デザインマネージャーで新規モジュールを作成します。提供されたソースコードをHTML/HubLセクションへそのままコピー＆ペーストして保存・公開します。これにより、コンタクトの有無を判定するロジックが組み込まれます。

ステップ2：ページ作成とモジュールの配置

HubSpotの「コンテンツ」メニューから新しいページを作成し、エディター左側のサイドバーでモジュールを検索してページ上部などに配置します。

ステップ3：リダイレクト先とメッセージの設定

編集画面のサイドパネルから、動作の詳細を設定します。

リダイレクトURL: 未ログイン時に飛ばしたい先のURL（ログインページや登録用LPなど）を指定します。
成功時メッセージ: ログイン済みユーザーにのみ表示する案内テキストを入力します。

モジュールのソースコード

HubSpotのDesign Managerで「新規モジュール」を作成し、以下のコードをそれぞれの箇所に貼り付けてください。

1. fields.json

フィールド定義です。繰り返しフィールド（Items）と、スタイル設定用フィールド（Styles）で構成されています。

[
 {
  "default": {
   "content_id": null,
   "href": "",
   "type": "EXTERNAL"
  },
  "display_width": null,
  "id": "9b439ed7-146f-9c8e-5b57-c264daba12ca",
  "label": "redirect_url",
  "locked": false,
  "name": "redirect_url",
  "required": false,
  "supported_types": [
   "EXTERNAL",
   "FILE",
   "CONTENT",
   "BLOG",
   "CALL_TO_ACTION",
   "PAYMENT",
   "EMAIL_ADDRESS",
   "PHONE_NUMBER",
   "WHATSAPP_NUMBER"
  ],
  "type": "url"
 },
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "cccffad9-3274-a676-1d0f-23f8154bd351",
  "label": "message",
  "locked": false,
  "name": "message",
  "required": false,
  "type": "text"
 }
]

Source Code

HTML

{% if not has_contact and not is_in_editor %}
<!-- より厳密な検証を行う包括的な実装 -->
{% set contact_verified = false %}
{% set contact_data = {} %}

<!-- Step 1: 基本的なコンタクト存在確認 -->
{% if contact and contact.email and contact.email != "" %}
    {% set contact_verified = true %}
    {% set contact_data = contact %}
{% endif %}

<!-- Step 2: request_contactでの補完確認 -->
{% if not contact_verified and request_contact.contact_id %}
    {% set contact_verified = true %}
    {% set contact_data = request_contact %}
{% endif %}

<!-- Step 3: 結果に基づく処理 -->
{% if contact_verified %}
    <!-- コンタクト検知成功 - ツール表示 -->
    <div class="member-area">
        <p>{{ module.message }}</p>
    </div>
{% else %}
    <!-- コンタクト未検知 - リダイレクト処理 -->
    {% set redirect_url = module.redirect_url.href|default('https://www.hirose.com/corporate/ja/') %}
    
    <div class="redirect-notice">
        <p>Redirecting to authentication...</p>
    </div>
    <script>
        // 即座にリダイレクト
        setTimeout(function() {
            window.location.href = '{{ redirect_url }}';
        }, 1000);
    </script>
{% endif %}
{% endif %}

CSS

Javascript

FAQ

編集画面（エディター）で作業しているときもリダイレクトされてしまいますか？

いいえ。コード内にエディター内判定が含まれているため、管理者が編集作業を行っている最中にページが飛ばされることはありません。

リダイレクトまでの待ち時間を変更できますか？

可能です。コード内の待機時間設定（ミリ秒）を変更することで、転送までの時間を自由に調整できます。

ログイン済みのユーザーには何が表示されますか？

ログインが確認できたユーザーにはリダイレクトは行われず、エディターで設定した「メッセージ」が表示されるエリアが出現します。

検索

さらに検索する

カスタマイズが必要ですか？

このサンプルは、お客様の具体的なビジネス要件に合わせてカスタマイズすることができます。

無料相談を予約