모아보기 페이지 설치하기 v1.1.0
소스라이브 모아보기란 자사몰 웹에 라이브를 진행했던 영상(VOD) 및 편성표를 보여주는 서비스입니다. 이 챕터는 서비스 시스템을 내부 웹에서 보여주도록 구현하기 위한 가이드 입니다.
게스트(비로그인) 사용자로 사용하기
자바 스크립트와 스타일을 페이지에서 불러오기 위해서는 아래의 코드의 적용이 필요합니다.
<div id='sauce_collect'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.load('sauce_live')
</script>
// optional
<div id='sauce_collect'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
window.SauceWebLib.setInit({
// 담당 AM을 통해 전달 받으신 partnerId 를 입력해주세요. 필수값입니다.
partnerId: 'service1234',
/* type boolean (defaultValue:true)*/
broadcast: true,
//라이브 미리보기 영역의 노출여부를 설정할 수 있습니다.
/* type boolean (defaultValue:true)*/
schedule: true,
//파트너사 라이브 방송 스타일에 맞게 라이브 미리보기 형식을 "이미지형" "피드형" "리스트형"으로 설정할 수 있습니다.
/* type image | feed | list (defaultValue image) */
scheduleType: "feed",
//큐레이션 카테고리 영역의 노출여부를 설정할 수 있습니다.
/* type boolean (defaultValue:true)*/
curation: true,
//큐레이션 영역의 노출 여부를 설정할 수 있습니다.
/* type boolean (defaultValue:true)*/
curationDetail: true,
//비디오 썸네일 자동재생 여부
/* type boolen (defaultValue:false)*/
autoPlay:false,
// 검색바 노출여부
/* type boolen (defaultValue:true)*/
searchBar:true,
// 방송카드 리스트 새창이동 설정
// 기본은 현재창 이동이며, 새창이동을 webview,pc,mobile값에 따라 설정할 수 있습니다.
/* type string (defaultVlaue:'') */
broadcastOpenLink:"webview,pc,mobile",
});
window.SauceWebLib.load('sauce_live')
</script>
최초 연동 시에는 편성표나 라이브가 등록되어 있지 않기 때문에, 빈 화면이 출력 됩니다.
라이브나 편성표 등록을 하고 테스트를 진행해 보세요.
간편 인증 사용하기 (일반 텍스트 형식의 nickName 및 memberId)
비회원, 간편 인증, JWT 인증 방식을 지원합니다.
<div id='sauce_collect'></div>
<script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.setMemberObject({
memberId: 'saucelive',
nickName: '소스라이브***',
age: '10',
gender: 'm'
});
window.SauceWebLib.load()
</script>
JWT 인증 사용하기
간편 인증과 JWT 인증으로 사용자 정보를 연동할 수 있습니다.
간편 인증은 빠르고 간편하게 인증 사용을 할 수 있지만, 보안 강화와 임의의 사용자 ID가 어뷰징 되는 것을 방지하기 위해 JWT 인증을 할 수 있습니다. JWT Token 생성
<div id='sauce_collect'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.setMemberToken(JWT:string)
window.SauceWebLib.load() //default 'sauce_collect'
</script>
적용 예
<html>
<head>
<title>sauce live example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #333;
}
// 필요한 css 는 추가적으로 세팅해도 무관합니다.
</style>
</head>
<body>
<div id='sauce_collect'></div>
</body>
<script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.setMemberObject({
memberId: 'saucelive',
nickName: '소스라이브***',
age: '10',
gender: 'm'
});
window.SauceWebLib.load()
</script>
</html>
연동방법 (Webview)
Bridge & Message
아래와 같은 Bridge로 메시지가 전달됩니다. 각 메시지는 JSON 객체가 stringify 되어 전달됩니다.
- flexCollectEnter(Void) - 페이지 진입 시 자동으로 호출
// 파라미터 없음
- flexCollectMoveProduct(Void) - 상품 클릭시 호출
// Stringified JSON
{
productId: String,//상품ID
productUrl: String, //상품등록URL
broadcastUrl: String, //라이브 OR VOD플레이어URL
}
- flexCollectMoveBroadcast(Void) - 라이브,VOD 클릭시 호출
// Stringified JSON
{
broadcastUrl: String, //라이브 OR VOD플레이어URL
}
- flexCollectMoveTopBanner(Void) - TOP 배너 클릭시 호출
// Stringified JSON
{
bannerLinkUrl: String, //배너링크URL
}
- flexCollectMoveContentBanner(message: String) - 컨텐츠 배너 클릭시 호출
// Stringified JSON
{
bannerLinkUrl: String, //컨텐츠배너링크URL
}
- flexCollectApplyForNotification(message: String) - 추가 예정 ( 알림 신청 동의 버튼 클릭시 호출)
// Stringified JSON
{
memberId: String, // 고객 ID
programmingStartDt:String, // 방송 시작시간 ex(UTC"2022-02-01T06:34:00.000Z")
programmingEndDt:String,// 방송 종료시간 ex(UTC"2022-02-02T06:34:00.000Z")
broadcastId: String, // 방송ID
accessToken: String // JWT TOKEN
}
Updated 9 months ago