회원 연동과 라이브 설치
이 가이드에서는 메이크샵으로 구축된 파트너사 홈페이지에 소스라이브 플레이어를 설치하고, 회원 연동을 하는 과정에 대해 설명합니다.
이미 메이크샵을 이용 중이라면, 간단한 코드 삽입으로 쉽게 회원 연동과 소스라이브 플레이어를 설치하고 라이브를 진행할 수 있습니다.
연동을 성공적으로 진행하기 위해서는,
먼저 소스라이브 파트너 계약을 완료하고 모비두 담당자에게 파트너 계정을 발급받아야 합니다.
회원 연동과 소스라이브 플레이어 설치
PC Web 연동
STEP 1. 메이크샵에 로그인 합니다.
STEP 2. 개별 디자인 > 디자인 스킨 관리 > 디자인 편집하기를 클릭합니다.
STEP 3. 상단 > 기본 상단 페이지에 아래 코드를 복사해 추가합니다.
<!--/if_login/-->
<script>
const returnUrl= getCookie('saucelogin');
if (returnUrl) {
window.location.href =returnUrl;
}
</script>
<!--/end_if/-->
STEP 4. 페이지 추가 를 클릭 후 팝업 화면에서 화면 선택은 개별 페이지 로 선택합니다.
STEP 5. 추가한 개별페이지의 디자인 편집 영역에 아래의 코드를 붙여 넣은 후, 저장을 클릭합니다.
<div id="sauce_live"></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
// 생성된 페이지 주소를 확인해주세요.
// shop/page.html?id=1 와 같은 URL의 뒤에 &broadcastId={방송ID}를 추가하면 지정된 라이브 혹은 VOD 방송을 현재의
// 페이지에서 확인 가능합니다.
// 미입력 시 현재 가장 최신의 방송이 나오도록 세팅되어 있습니다. (방송 자체를 미등록 시에는 아무런 방송이 나오지 않음)
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)
}
const url = new URL(location.href);
const broadcastId = url.searchParams.get("broadcastId");
// shop_id는 소스라이브 가입 시에 설정한 파트너 ID와 같아야 합니다. (필수값)
const shopId = "";
(async () => {
if (broadcastId) {
// 로그인 시에 실행되는 코드입니다.
<!--/if_login/-->
let expire_date = new Date();
expire_date.setDate(expire_date.getDate() - 1);
document.cookie = 'saucelogin' + '=' + '; expires=' + expire_date.toGMTString() + '; path=/';
const userId = encodeURIComponent("<!--/user_id/-->");
const userName = "<!--/user_name/-->";
window.SauceLiveLib.setInit({ broadcastId });
await window.SauceLiveLib.setMemberObject({
memberId: userId,
nickName: userName,
});
window.SauceLiveLib.load();
// 비로그인 시 실행되는 코드입니다.
<!--/else/-->
window.SauceLiveLib.setInit({ broadcastId });
window.SauceLiveLib.setMemberToken(" ");
window.SauceLiveLib.load();
<!--/end_if/-->
} else {
const broadcastResponse = await fetch(
`https://api.sauceflex.com/V1/front/broadcast?partnerId=${shopId}` );
const broadcastData = await broadcastResponse.json();
const broadcast = broadcastData.response.items[0];
const defaultBroadcastId = broadcast.broadcastId;
window.SauceLiveLib.setInit({ broadcastId: defaultBroadcastId });
<!--/if_login/-->
const userId = encodeURIComponent("<!--/user_id/-->");
const userName = "<!--/user_name/-->";
await window.SauceLiveLib.setMemberObject({
memberId: userId,
nickName: userName,
});
<!--/else/-->
window.SauceLiveLib.setMemberToken(" ");
<!--/end_if/-->
window.SauceLiveLib.load();
}
// 상품 이동, 공유하기 등 전체 기능에 대해서 정의가 필요합니다.
window.addEventListener(
"message",
function (e) {
// 이곳에 처리
if (typeof e.data === "string") {
const jsonData = JSON.parse(e.data);
switch (jsonData.key) {
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;
case 'sauceflexOnShare':
copyToClipboard(window.location.href)
window.alert('URL이 복사되었습니다.')
break;
case "sauceflexMoveLogin":
setCookie('saucelogin',window.location.href,1);
// 별도의 로그인 페이지를 사용할 경우 아래의 링크를 변경해주세요
window.location.href = '/shop/member.html?type=login'
break;
}
}
},
false
);
})();
</script>
STEP 6. 페이지 주소 버튼을 클릭하여 현재 만든 페이지에서 직접 확인합니다.
모바일 연동
STEP 1. 메이크샵에 로그인 합니다.
STEP 2. 모바일샵 > 모바일D4(개별디자인) > 디자인 편집하기를 클릭합니다.
이지팩 스킨을 사용 시, 코드 삽입이 불가능합니다. 따라서 개별디자인으로 생성된 페이지를 선택해 소스라이브 연동을 진행해주세요.
STEP 3. 상단 를 클릭하고 기본 상단 페이지 가장 아래에 코드를 추가합니다.
<!--/if_login/-->
<script>
const returnUrl= getCookie('saucelogin');
if (returnUrl) {
window.location.href =returnUrl;
}
</script>
<!--/end_if/-->
STEP 4. 페이지 추가 를 클릭 후 팝업 화면에서 화면 선택은 개별 페이지 로 선택합니다.
STEP 5. 추가한 개별페이지의 디자인 편집 영역에 아래의 코드를 붙여 넣은 후, 저장을 클릭합니다.
<div id="sauce_live"></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
// 생성된 페이지 주소를 확인해주세요.
// shop/page.html?id=1 와 같은 URL의 뒤에 &broadcastId={방송ID}를 추가하면 지정된 라이브 혹은 VOD 방송을 현재의
// 페이지에서 확인 가능합니다.
// 미입력 시 현재 가장 최신의 방송이 나오도록 세팅되어 있습니다. (방송 자체를 미등록 시에는 아무런 방송이 나오지 않음)
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)
}
const url = new URL(location.href);
const broadcastId = url.searchParams.get("broadcastId");
// shop_id는 소스라이브 가입 시에 설정한 파트너 ID와 같아야 합니다. (필수값)
const shopId = "";
(async () => {
if (broadcastId) {
// 로그인 시에 실행되는 코드입니다.
<!--/if_login/-->
let expire_date = new Date();
expire_date.setDate(expire_date.getDate() - 1);
document.cookie = 'saucelogin' + '=' + '; expires=' + expire_date.toGMTString() + '; path=/';
const userId = encodeURIComponent("<!--/user_id/-->");
const userName = "<!--/user_name/-->";
window.SauceLiveLib.setInit({ broadcastId });
await window.SauceLiveLib.setMemberObject({
memberId: userId,
nickName: userName,
});
window.SauceLiveLib.load();
// 비로그인 시 실행되는 코드입니다.
<!--/else/-->
window.SauceLiveLib.setInit({ broadcastId });
window.SauceLiveLib.setMemberToken(" ");
window.SauceLiveLib.load();
<!--/end_if/-->
} else {
const broadcastResponse = await fetch(
`https://api.sauceflex.com/V1/front/broadcast?partnerId=${shopId}` );
const broadcastData = await broadcastResponse.json();
const broadcast = broadcastData.response.items[0];
const defaultBroadcastId = broadcast.broadcastId;
window.SauceLiveLib.setInit({ broadcastId: defaultBroadcastId });
<!--/if_login/-->
const userId = encodeURIComponent("<!--/user_id/-->");
const userName = "<!--/user_name/-->";
await window.SauceLiveLib.setMemberObject({
memberId: userId,
nickName: userName,
});
<!--/else/-->
window.SauceLiveLib.setMemberToken(" ");
<!--/end_if/-->
window.SauceLiveLib.load();
}
// 상품 이동, 공유하기 등 전체 기능에 대해서 정의가 필요합니다.
window.addEventListener(
"message",
function (e) {
// 이곳에 처리
if (typeof e.data === "string") {
const jsonData = JSON.parse(e.data);
switch (jsonData.key) {
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;
case 'sauceflexOnShare':
copyToClipboard(window.location.href)
window.alert('URL이 복사되었습니다.')
break;
case "sauceflexMoveLogin":
setCookie('saucelogin',window.location.href,1);
// 별도의 로그인 페이지를 사용할 경우 아래의 링크를 변경해주세요
window.location.href = '/shop/member.html?type=login'
break;
}
}
},
false
);
})();
</script>
STEP 6. 페이지 주소 버튼을 클릭하여 현재 만든 페이지에서 직접 확인합니다.
성공적으로 회원 연동과 플레이어 설치를 완료 했다면 라이브 준비하기 에서 라이브를 준비하는 과정을 확인하고 실제 라이브 편성하기를 해볼 수 있습니다.
Updated 20 days ago