Guides

회원 연동과 라이브 설치

Suggest Edits

이 가이드에서는 카페24로 구축된 파트너사 홈페이지에 소스라이브 플레이어를 설치하고, 회원 연동을 하는 과정에 대해 설명합니다.

이미 카페24를 이용 중이라면, 간단한 코드 삽입으로 쉽게 회원 연동과 소스라이브 플레이어를 설치하고 라이브를 진행할 수 있습니다.

📘

연동과 설치를 성공적으로 진행하기 위해서는,

먼저 소스라이브 파트너 계약을 완료하고 모비두 담당자에게 파트너 계정을 발급 받아야 합니다.


회원 연동과 소스라이브 플레이어 설치

PC Web 연동

STEP 1. 카페24에 대표운영자로 로그인합니다.

STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > PC탭에서 소스라이브를 적용할 디자인을 선택 후 복사합니다. 이는 실제 운영 중인 페이지에 영향이 가지 않도록 하기 위해서입니다.


STEP 3. 복사된 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 Easy 화면으로 이동합니다.


STEP 4. 하단의 HTML 수정을 클릭해 스마트 디자인 화면으로 이동합니다.


STEP 5. 왼쪽 하단 폴더추가 버튼을 클릭해 노출된 팝업 화면에서 폴더명 항목에 saucelive를 입력 후 저장을 클릭합니다. 해당 폴더가 추가된 것을 확인할 수 있습니다.


STEP 6. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 saucelive 폴더를 클릭합니다. 저장 경로는 saucelive로 지정되고, 파일명 항목에는 saucelive.html를 입력 후 저장을 클릭합니다.


STEP 7. 아래 코드를 복사해 앞서 추가한 saucellive.html 에 붙여 넣고 상단의 저장을 클릭 후 라이브 페이지를 직접 추가합니다.

❗️

확인해주세요.

  1. 모비두 담당자에게 전달 받은 파트너 ID 를 확인 후 const partnerId라는 변수명을 수정해야 합니다.
    설정된 페이지는 파트너사가 사용하시는 cafe24URL/saucelive/saucelive.html 링크에서 확인 가능합니다.
  2. 별도로 원하는 라이브를 페이지에 랜딩하려면 라이브 준비하기 에서 라이브를 준비하는 과정을 확인하고 실제 라이브 편성하기 를 진행한 후 방송ID 를 확인해 아래와 같이 URL 에 방송 ID 를 추가해주시면 됩니다.
    카페24 도메인 URL + /saucelive/saucelive.html?broadcastId={방송 ID}
  3. 로그인 버튼 클릭 시 이동을 위한 링크가 필요합니다.
<!--@layout(/layout/basic/layout.html)-->
<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.addEventListener(
    "load",  async () => {
      const url = new URL(location.href);
      const customBroadcastId = url.searchParams.get("broadcastId");
      const cafe24DomainUrl = url.origin;

      // 모비두의 파트너 ID 를 확인후 반드시 입력해주세요.(필수값)
      const partnerId = ""; 
      
      // 소스라이브에 현재 등록한 방송(vod,live)이 존재한다면 URL에 방송ID 를 입력하지 않아도 최신 방송을 확인할수 있도록 API 연동을 추가하였습니다.
      const broadcastResponse = await fetch(
        `https://api.sauceflex.com/V1/front/broadcast?partnerId=${partnerId}`,
        options
      );
      const broadcastData = await broadcastResponse.json();
      const broadcast = broadcastData.response.items[0];
      const defaultBroadcastId = broadcast.broadcastId;

      // 로그인 되어있을 경우의 코드와 로그인 되어있지 않을 경우의 코드가 다르기에 다른 페이지에서 로그인하거나 로그아웃 하면 같이 연동되도록 세팅되어있습니다.
      if (isLogin) {
        window.SauceLiveLib.setInit({
          broadcastId: customBroadcastId ? customBroadcastId : defaultBroadcastId,
        });
        window.SauceLiveLib.setMemberObject({
          memberId: sauceMemberId,
          nickName: sauceNickName ? sauceNickName : sauceName,
        });
        window.SauceLiveLib.load();
      } else {
        window.SauceLiveLib.setInit({
          broadcastId: customBroadcastId ? customBroadcastId : defaultBroadcastId,
        });
        window.SauceLiveLib.setMemberToken(" ");
        window.SauceLiveLib.load();
      }
      
   // 소스라이브의 기본 방송 URL 을 사용하지 않기떄문에 기본 기능에 대한 정의가 필요합니다. 아래는 기본 기능 정의를 위한 코드입니다.
    window.addEventListener(
      "message",
      function (e) {
        if (typeof e.data === "string") {
          const jsonData = JSON.parse(e.data);
          switch (jsonData.key) {
           // 별도 지정된 로그인 페이지가 존재할경우 아래의 링크(/member/login.html)를 변경해주세요
            case "sauceflexMoveLogin":
             const defaultExpires = new Date()
             defaultExpires.setDate(defaultExpires.getDate() + 1)
             document.cookie = `saucelogin=${window.location.href};path=/${
             defaultExpires ? `;expires=${defaultExpires.toUTCString()}` : ''
             };SameSite=None;Secure`;
             window.location.href = '/member/login.html'
             break;
            case "sauceflexMoveExit":
             window.history.back()
             break;
           case 'sauceflexMoveBanner':
            window.location.href = jsonData.params.linkUrl
            break;
          case 'sauceflexMoveReward':
            window.location.href = jsonData.params.linkUrl
            break
          case 'sauceflexMoveProduct':
            window.location.href = jsonData.params.linkUrl
            break;
          // 공유하기 기본 기능 정의는 현재 URL 복사 처리하여 세팅합니다.
           case 'sauceflexOnShare':
            copyToClipboard(window.location.href)
            window.alert('URL이 복사되었습니다.')
            break;     
          }
        }
      },false)

    },
    false
  );
</script>

STEP 8. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 saucelive 폴더를 클릭합니다. 저장 경로는 saucelive로 지정되고, 파일명 항목은 saucelive.js를 입력 후 저장을 클릭합니다.


STEP 9. saucelive.js 파일에 아래 코드를 복사해 추가하고 저장합니다.

let isLogin
let sauceMemberId
let sauceName
let sauceNickName
const options = {method: "GET",  headers: { accept: "application/json", }};

 const copyToClipboard = (message) => {
    const textarea = document.createElement('textarea')
    textarea.value = message

    document.body.appendChild(textarea)
    textarea.select()
    textarea.setSelectionRange(0, 9999)

    document.execCommand('copy')
    document.body.removeChild(textarea)
}

window.addEventListener('DOMContentLoaded', async () =>{
    const url = new URL(location.href);
    const cafe24DomainUrl = url.origin;      
     // cafe24 에서 현재 고객이 로그인되어있는지 확인할수 있는 공개 API를 사용합니다.  
    const memberResponse = await fetch(
        `${cafe24DomainUrl}/exec/front/manage/async?module=member&path_role=ETC&EC_MOBILE=false`,
        options
      );
   const { member } = await memberResponse.json()
   isLogin = member.memberData.id.length >1 ;
   sauceMemberId = member.memberData.id;
   sauceName = member.memberData.name;
   sauceNickName = member.memberData.nick;
   const returnUrl= getCookiem('saucelogin');
   if (returnUrl && isLogin) {
      window.location.href =returnUrl
      delCookiem('saucelogin')
  }
});

STEP 10. 공통 레이아웃 (ex: layout/basic/layout.html) 내 <!--@js(/js/common.js)--> 행 아래 코드 <!-- @js(/saucelive/saucelive.js))-->를 붙여 넣고 상단의 저장을 클릭합니다.



<!--@js(/saucelive/saucelive.js)-->

STEP 11. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.

PC Web 모드에서 회원 연동 작업이 완료되었습니다.


모바일 연동

STEP 1. 카페24에 대표 운영자로 로그인합니다.

STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > 모바일 탭에서 소스라이브를 적용할 디자인을 선택 후 복사합니다. 이는 실제 운영 중인 페이지에 영향이 가지 않도록 하기 위해서입니다.


STEP 3. 복사된 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 화면으로 이동합니다.


STEP 4. 왼쪽 하단 폴더추가 버튼을 클릭해 노출된 팝업 화면에서 폴더명 항목에 saucelive를 입력 후 저장을 클릭합니다. 해당 폴더가 추가된 것을 확인할 수 있습니다.

STEP 5. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 saucelive 폴더를 클릭합니다. 저장 경로는 saucelive로 지정되고, 파일명 항목에는 saucelive.html를 입력 후 저장을 클릭합니다.


STEP 6. 아래 코드를 복사해 앞서 추가한 saucellive.html 에 붙여 넣고 상단의 저장을 클릭 후 라이브 페이지를 직접 추가합니다.

❗️

확인해주세요.

  1. 모비두 담당자에게 전달 받은 파트너 ID 를 확인 후 const partnerId라는 변수명을 수정해야 합니다.
    설정된 페이지는 파트너사가 사용하시는 cafe24URL/saucelive/saucelive.html 링크에서 확인 가능합니다.
  2. 별도로 원하는 라이브를 페이지에 랜딩하려면 라이브 준비하기 에서 라이브를 준비하는 과정을 확인하고 실제 라이브 편성하기 를 진행한 후 방송ID 를 확인해 아래와 같이 URL 에 방송 ID 를 추가해주시면 됩니다.
    카페24 도메인 URL + /saucelive/saucelive.html?broadcastId={방송 ID}
  3. 로그인 버튼 클릭 시 이동을 위한 링크가 필요합니다.
<!--@layout(/layout/basic/layout.html)-->
<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.addEventListener(
    "load",  async () => {
      const url = new URL(location.href);
      const customBroadcastId = url.searchParams.get("broadcastId");
      const cafe24DomainUrl = url.origin;

      // 모비두의 파트너 ID 를 확인후 반드시 입력해주세요.(필수값)
      const partnerId = ""; 
      
      // 소스라이브에 현재 등록한 방송(vod,live)이 존재한다면 URL에 방송ID 를 입력하지 않아도 최신 방송을 확인할수 있도록 API 연동을 추가하였습니다.
      const broadcastResponse = await fetch(
        `https://api.sauceflex.com/V1/front/broadcast?partnerId=${partnerId}`,
        options
      );
      const broadcastData = await broadcastResponse.json();
      const broadcast = broadcastData.response.items[0];
      const defaultBroadcastId = broadcast.broadcastId;

      // 로그인 되어있을 경우의 코드와 로그인 되어있지 않을 경우의 코드가 다르기에 다른 페이지에서 로그인하거나 로그아웃 하면 같이 연동되도록 세팅되어있습니다.
      if (isLogin) {
        window.SauceLiveLib.setInit({
          broadcastId: customBroadcastId ? customBroadcastId : defaultBroadcastId,
        });
        window.SauceLiveLib.setMemberObject({
          memberId: sauceMemberId,
          nickName: sauceNickName ? sauceNickName : sauceName,
        });
        window.SauceLiveLib.load();
      } else {
        window.SauceLiveLib.setInit({
          broadcastId: customBroadcastId ? customBroadcastId : defaultBroadcastId,
        });
        window.SauceLiveLib.setMemberToken(" ");
        window.SauceLiveLib.load();
      }
      
   // 소스라이브의 기본 방송 URL 을 사용하지 않기떄문에 기본 기능에 대한 정의가 필요합니다. 아래는 기본 기능 정의를 위한 코드입니다.
    window.addEventListener(
      "message",
      function (e) {
        if (typeof e.data === "string") {
          const jsonData = JSON.parse(e.data);
          switch (jsonData.key) {
           // 별도 지정된 로그인 페이지가 존재할경우 아래의 링크(/member/login.html)를 변경해주세요
            case "sauceflexMoveLogin":
             const defaultExpires = new Date()
             defaultExpires.setDate(defaultExpires.getDate() + 1)
             document.cookie = `saucelogin=${window.location.href};path=/${
             defaultExpires ? `;expires=${defaultExpires.toUTCString()}` : ''
             };SameSite=None;Secure`;
             window.location.href = '/member/login.html'
             break;
            case "sauceflexMoveExit":
             window.history.back()
             break;
           case 'sauceflexMoveBanner':
            window.location.href = jsonData.params.linkUrl
            break;
          case 'sauceflexMoveReward':
            window.location.href = jsonData.params.linkUrl
            break
          case 'sauceflexMoveProduct':
            window.location.href = jsonData.params.linkUrl
            break;
          // 공유하기 기본 기능 정의는 현재 URL 복사 처리하여 세팅합니다.
           case 'sauceflexOnShare':
            copyToClipboard(window.location.href)
            window.alert('URL이 복사되었습니다.')
            break;     
          }
        }
      },false)

    },
    false
  );
</script>


STEP 8. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 saucelive 폴더를 클릭합니다. 저장 경로는 saucelive로 지정되고, 파일명 항목은 saucelive.js를 입력 후 저장을 클릭합니다.

STEP 9. saucelive.js 파일에 아래 코드를 복사해 추가하고 저장합니다.

let isLogin
let sauceMemberId
let sauceName
let sauceNickName
const options = {method: "GET",  headers: { accept: "application/json", }};

 const copyToClipboard = (message) => {
    const textarea = document.createElement('textarea')
    textarea.value = message

    document.body.appendChild(textarea)
    textarea.select()
    textarea.setSelectionRange(0, 9999)

    document.execCommand('copy')
    document.body.removeChild(textarea)
}

window.addEventListener('DOMContentLoaded', async () =>{
     const url = new URL(location.href);
     const cafe24DomainUrl = url.origin;      
     // cafe24 에서 현재 고객이 로그인되어있는지 확인할수 있는 공개 API를 사용합니다.  
     const memberResponse = await fetch(
        `${cafe24DomainUrl}/exec/front/manage/async?module=member&path_role=ETC&EC_MOBILE=false`,
        options
      );
   const { member } = await memberResponse.json()
   isLogin = member.memberData.id.length >1 ;
   sauceMemberId = member.memberData.id;
   sauceName = member.memberData.name;
   sauceNickName = member.memberData.nick;
   const returnUrl= getCookiem('saucelogin');
  if  (returnUrl && isLogin) {
      window.location.href =returnUrl
      delCookiem('saucelogin')
  }
});

STEP 10. 공통 레이아웃 (ex: layout/basic/layout.html)에 내 <!--@js(/js/common.js)--> 행 아래 코드 <!-- @js(/saucelive/saucelive.js))-->를 붙여 넣고 상단의 저장을 클릭합니다.

<!--@js(/saucelive/saucelive.js)-->

STEP 10. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.

모바일 모드에서 회원 연동 작업이 완료되었습니다.


📘

성공적으로 회원 연동과 플레이어 설치를 완료 했다면, 라이브 준비하기 에서 라이브를 준비하는 과정을 확인하고 실제 라이브 편성하기를 해볼 수 있습니다.

Updated 14 days ago