이 가이드에서는 카페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 에 붙여 넣고 상단의 저장을 클릭 후 라이브 페이지를 직접 추가합니다.

❗️
성공적인 연동을 위해 꼭 확인해주세요.

모비두 담당자에게 전달 받은 파트너 ID 를 확인 후 코드 내 const partnerId=" "에 넣어 적용해주세요.
적용했다면, 카페24 도메인 URL(파트너사가 사용 중인 URL)/saucelive/saucelive.html 링크에서 플레이어의 적용을 확인할 수 있습니다.

라이브 URL을 사용해야 하는 경우(사전 마케팅 진행 또는 배너를 통한 라이브 랜딩 처리하는 경우 등) 또는 라이브 시 회원 로그인이 반드시 필요한 경우에는 소스어드민에서 라이브를 편성해 승인 완료 후 라이브ID를 확인해 아래 형태의 URL에 적용해 사용합니다. 👉라이브 ID 확인하기

카페24의 기본 로그인 페이지 주소 외 별도의 페이지로 이동을 원하는 페이지가 있다면, member/login.html 부분의 수정이 필요합니다.

<!doctype html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <!--@css(/layout/basic/css/common.css)-->
 <!--@css(/layout/basic/css/layout.css)-->
<!--@js(/layout/basic/js/common.js)-->
<!--@js(/saucelive/saucelive.js)-->
<style>
html {  overscroll-behavior-y: none;  }
html,
body {  margin: 0;  padding: 0;  height: 100%; }
#layout #sauce_live { height: 100%;  }
#sauce_live > div {  height: 100%; }
</style>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.addEventListener("load",  async () => {
      deleteSauceCookie('saucelogin');
      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;
      const isBroadcastId= defaultBroadcastId || customBroadcastId
     
      
      // 로그인 되어있을 경우의 코드와 로그인 되어있지 않을 경우의 코드가 다르기에 다른 페이지에서 로그인하거나 로그아웃 하면 같이 연동되도록 세팅되어있습니다.
      if (isLogin && isBroadcastId ) {
        window.SauceLiveLib.setInit({
          broadcastId: customBroadcastId ? customBroadcastId : defaultBroadcastId,
        });
        window.SauceLiveLib.setMemberObject({
          memberId: sauceMemberId,
          nickName: sauceNickName ? sauceNickName : sauceName,
        });
        window.SauceLiveLib.load();
      } else if(isBroadcastId)  {
        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":
             setSauceCookie()
             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;  
           // 쿠폰 기능 예시는 현재 기본 링크 이동만 제공하고 있습니다.
           case  'sauceflexMoveCoupon' :
            if(!jsonData.params.linkUrl) return
            window.location.href = jsonData.params.linkUrl
            break;        
          }
        }
      },false)

    },
    false
  );
</script>
</head>
<body id="layout">
   <div id='sauce_live' />
</body>
</html>

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 setSauceCookie = () =>{
         const defaultExpires = new Date()
          defaultExpires.setDate(defaultExpires.getDate() + 1)
          document.cookie = `saucelogin=${window.location.href};path=/${
          defaultExpires ? `;expires=${defaultExpires.toUTCString()}` : ''
          };SameSite=None;Secure`;
}

const getSauceCookie =  (name)=> {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? unescape(value[2]) : null;
};

const deleteSauceCookie = (name) => {
	document.cookie = name + '=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

 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 && member.memberData.id.length >1 ;
   sauceMemberId = member.memberData.id;
   sauceName = member.memberData.name;
   sauceNickName = member.memberData.nick;
   const returnUrl= getSauceCookie('saucelogin');
   if (returnUrl && isLogin) {
      deleteSauceCookie('saucelogin')
      window.location.href = returnUrl
  }
});

STEP 10. 공통 레이아웃 (ex: layout/basic/layout.html) 내  행 아래 코드

를 붙여 넣고 상단의 저장을 클릭합니다.

<!--@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 에 붙여 넣고 상단의 저장을 클릭 후 라이브 페이지를 직접 추가합니다.

❗️
성공적인 연동을 위해 꼭 확인해주세요.

모비두 담당자에게 전달 받은 파트너 ID 를 확인 후 코드 내 const partnerId=" "에 넣어 적용해주세요.
적용했다면, 카페24 도메인 URL(파트너사가 사용 중인 URL)/saucelive/saucelive.html 링크에서 플레이어의 적용을 확인할 수 있습니다.

라이브 URL을 사용해야 하는 경우(사전 마케팅 진행 또는 배너를 통한 라이브 랜딩 처리하는 경우 등) 또는 라이브 시 회원 로그인이 반드시 필요한 경우에는 소스어드민에서 라이브를 편성해 승인 완료 후 라이브ID를 확인해 아래 형태의 URL에 적용해 사용합니다. 👉라이브 ID 확인하기

카페24의 기본 로그인 페이지 주소 외 별도의 페이지로 이동을 원하는 페이지가 있다면, member/login.html 부분의 수정이 필요합니다.

<!doctype html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <!--@css(/layout/basic/css/common.css)-->
 <!--@css(/layout/basic/css/layout.css)-->
<!--@js(/layout/basic/js/common.js)-->
<!--@js(/saucelive/saucelive.js)-->
<style>
html {  overscroll-behavior-y: none;  }
html,
body {  margin: 0;  padding: 0;  height: 100%; }
#layout #sauce_live { height: 100%;  }
#sauce_live > div {  height: 100%; }
</style>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.addEventListener("load",  async () => {
      deleteSauceCookie('saucelogin');
      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;
      const isBroadcastId= defaultBroadcastId || customBroadcastId
     
      
      // 로그인 되어있을 경우의 코드와 로그인 되어있지 않을 경우의 코드가 다르기에 다른 페이지에서 로그인하거나 로그아웃 하면 같이 연동되도록 세팅되어있습니다.
      if (isLogin && isBroadcastId ) {
        window.SauceLiveLib.setInit({
          broadcastId: customBroadcastId ? customBroadcastId : defaultBroadcastId,
        });
        window.SauceLiveLib.setMemberObject({
          memberId: sauceMemberId,
          nickName: sauceNickName ? sauceNickName : sauceName,
        });
        window.SauceLiveLib.load();
      } else if(isBroadcastId)  {
        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":
             setSauceCookie()
             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;  
           // 쿠폰 기능 예시는 현재 기본 링크 이동만 제공하고 있습니다.
           case  'sauceflexMoveCoupon' :
            if(!jsonData.params.linkUrl) return
            window.location.href = jsonData.params.linkUrl
            break;        
          }
        }
      },false)

    },
    false
  );
</script>
</head>
<body id="layout">
   <div id='sauce_live' />
</body>
</html>

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

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

const setSauceCookie = () =>{
         const defaultExpires = new Date()
          defaultExpires.setDate(defaultExpires.getDate() + 1)
          document.cookie = `saucelogin=${window.location.href};path=/${
          defaultExpires ? `;expires=${defaultExpires.toUTCString()}` : ''
          };SameSite=None;Secure`;
}

const getSauceCookie =  (name)=> {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? unescape(value[2]) : null;
};

const deleteSauceCookie = (name) => {
	document.cookie = name + '=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

 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 && member.memberData.id.length >1 ;
   sauceMemberId = member.memberData.id;
   sauceName = member.memberData.name;
   sauceNickName = member.memberData.nick;
   const returnUrl= getSauceCookie('saucelogin');
   if (returnUrl && isLogin) {
      deleteSauceCookie('saucelogin')
      window.location.href = returnUrl
  }
});

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

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

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

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

라이브시 사용되는 닉네임 표기에 대한 마스킹 처리 방법

STEP 1. 아래의 함수를 saucelive.js 파일 가장 상단에 추가합니다.

function maskName(name) {
  if (name.length <= 2) return name; // 이름이 두 글자 이하라면 그대로 반환
  const firstTwo = name.substring(0, 2); // 첫 두 글자 추출
  const stars = '*'.repeat(name.length - 2); // 나머지를 별로 대체
  return firstTwo + stars;
}

STEP 2. saucelive.html 파일에서 setMemberObject 를 아래와 같이 to-be 상태로 수정합니다.

 // as-is 
 window.SauceLiveLib.setMemberObject({ memberId: sauceMemberId, nickName: sauceNickName ? sauceNickName : sauceName });

// to-be (고객ID를 마스킹처리하여 사용할 경우)
 window.SauceLiveLib.setMemberObject({ memberId: sauceMemberId, nickName: maskName(sauceMemberId) });

// to-be (고객이름을 마스킹처리하여 사용할 경우)
 window.SauceLiveLib.setMemberObject({ memberId: sauceMemberId, nickName: maskName(sauceName) });

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

회원 연동과 라이브 설치

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

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

PC Web 연동

❗️
성공적인 연동을 위해 꼭 확인해주세요.

모바일 연동

❗️
성공적인 연동을 위해 꼭 확인해주세요.

라이브시 사용되는 닉네임 표기에 대한 마스킹 처리 방법

📘

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

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

PC Web 연동

❗️성공적인 연동을 위해 꼭 확인해주세요.

모바일 연동

❗️성공적인 연동을 위해 꼭 확인해주세요.

라이브시 사용되는 닉네임 표기에 대한 마스킹 처리 방법

📘

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

❗️
성공적인 연동을 위해 꼭 확인해주세요.

❗️
성공적인 연동을 위해 꼭 확인해주세요.