미승인 사용자에 대한 콘텐츠 접근 제한

작동 방식

사이트의 안전성을 개선하기 위해 미승인 사용자에게 일부 콘텐츠 접근 제한을 설정할 수 있습니다.

사용자

이미 웹사이트 빌더로그인을 통합한 파트너.

획득 방법

  1. 게시자 계정 > 웹사이트 빌더로 이동.
  2. 로그인 컴포넌트를 헤더 블록에 추가하고 사용자 데이터 저장에 사용할 로그인 프로젝트를 선택하세요.
  3. 다음 코드를 사용자 정의 코드 블록에 삽입합니다:

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>

  1. blockArray 배열에서 사용자에게 개별 블록을 표시하지 않으려면 블록 각각의 다음 매개변수를 수정합니다:
    1. blockName - 블록의 CSS 클래스 이름. 사용 가능 옵션:
      • .block--header (헤더 블록)
      • .block--hero (콜투액션 블록)
      • .block--html (사용자 정의 코드 블록)
      • .block--packs ( 블록)
      • .block--description (설명 블록)
      • .block--gallery (갤러리 블록)
      • .block--requirements (시스템 요구사항 블록)
      • .block--faq (FAQ 블록)
      • .block--embed (SNS 위젯 블록)
      • .block--news (뉴스 블록)
      • .block--footer (푸터 블록)
    2. blockNumber - 블록 순서 번호. 최솟값은 0.
  2. 다음 미리보기를 클릭하면 변경 사항을 볼 수 있습니다.

이 레시피에 대한 예제 비디오 보기: