サイトでの特定コンテンツへのアクセスを制限する方法

内容

どのように動作するか
入手方法

どのように動作するか

サイトにサブスクリプションで提供されるユニークなコンテンツがある場合や、ゲームにユーザーの注目を集めたい場合、サイトのセキュリティを高めたい場合など、サイトのコンテンツを異なるグループのユーザーから隠すことができます。アクセス制限は、以下のいずれかの方法で設定します：

カスタムHTMLコード経由。構成する前に、ログイン製品を接続する必要があります。
加入者グループ経由。構成する前に、ログインとサブスクリプション製品を接続する必要があります。

入手方法

前提条件

パブリッシャーアカウントであなたのプロジェクトを開きます。
サイドメニューでサイトビルダーをクリックします。
サイトパネルでサイトビルダーを開くをクリックします。

ヘッダーブロックで、ログインコンポーネントを追加し、ユーザーデータの保存に使用するログインプロジェクトをドロップダウンリストから選択します。

カスタムHTMLコードによるアクセスを制限する

既存のソリューションを使用することも、独自のコードを追加することもできます。

既存のソリューションを使用する

ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。

次のコードをブロックに挿入します：

Copy

Full screen

Small screen

<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function checkAuth(authToken) {
      function handleBlock(hide) {
        setTimeout(function () {
          blockArray.map(function (block) {
            return document.querySelectorAll(block.blockName)[block.blockNumber];
          })
            .forEach(function (element) {
              if (element) {
                element.style.display = hide ? 'none' : 'block';
              }
            });
        }, 0);
      }

      var token = /xsolla_login_token_sb=(.*);?/.exec(document.cookie);
      token = token && token[1] || authToken;
      if (!token) {
        handleBlock(true);
        return;
      }
      var info = JSON.parse(atob(token.slice(token.indexOf('.') + 1, token.lastIndexOf('.'))));
      var isAuth = Date.now() / 1000 < info.exp;
      if (!isAuth) {
        handleBlock(true);
        return;
      }
      handleBlock(false);
    }

    checkAuth();
    window.addEventListener('sb_xsolla_login_success', function (e) {
      checkAuth(e.detail);
    });
  })();
</script>

blockArrayアレイで、ユーザーには非表示にしたいブロックで以下のパラメータを変更します：
- blockName — CSSクラスのブロックの名前。可能性なオプション：
  - .block--header（ヘッダーブロック）
  - .block--hero（コールトゥアクションブロック）
  - .block--html（カスタムコードブロック）
  - .block--packs（パックブロック）
  - .block--description（説明ブロック)
  - .block--gallery（ギャラリーブロック)
  - .block--requirements（システム要件ブロック）
  - .block--faq（よくある質問ブロック）
  - .block--embed（ソーシャルメディアウィジェットブロック）
  - .block--news（ニュースブロック）
  - .block--footer（フッターブロック)
- blockNumber-ブロックのシーケンス番号。最低値は0です。
プレビューをクリックして変更を確認します。

この手順については、チュートリアルビデオをご覧ください：

自分のコードを追加する

ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。

独自のコードをブロックに挿入します。

コンテンツへのサブスクリプションを使用してアクセスを制限する

サブスクリプションを使用してブロックへのアクセスを制限するには：

1 つ以上のサブスクリプションプランをセットアップします。
サイドメニューでサイトビルダーをクリックします。
サイトパネルでサイトビルダーを開くをクリックします。
アクセスを制限したいブロックの設定に移動します。
ブロックを表示できるユーザーフィールドで、1 つ以上の加入者グループを選択します。変更が公開されると、権限のないユーザーと、選択したプランのサブスクリプションを購入していない権限のあるユーザーに対して、ブロックが非表示になります。