개발자 가이드 안내

Shoplive 개발자 가이드는 Shoplive Player를 PC/Mobile 웹페이지 또는 모바일 애플리케이션에 설치할 수 있는 방법을 안내합니다. 라이브 화면 채팅에 표시되는 사용자 이름을 고객사 시스템과 연동하기 위한 인증 방식과 Shoplive iOS/Android SDK를 사용하여 모바일 애플리케이션에서 PIP(Picture-in-Picture) 모드를 구현하는 방식 등을 안내합니다. 또한 방송 정보를 조회하거나 Shoplive 서버 상태를 체크하는 등의 서버 API에 대해서도 소개합니다.

요약

  • 간단한 자바스크립트 삽입만으로 여러분의 웹사이트에서 라이브 방송을 즉시 실행할 수 있습니다.
  • Shoplive에서 제공하는 iOS/Android SDK를 이용하여 여러분의 모바일 애플리케이션에서 라이브 방송을 실행할 수 있으며 웹보다 개선된 사용자 인터렉션과 PIP 등의 다양한 기능을 사용할 수 있습니다.
  • 간단한 사용자ID/사용자이름 기반의 인증 또는 강력한 보안을 기반으로 한 JWT 인증까지 다양한 방식의 인증을 지원합니다.
  • Shoplive 서버 API를 통해 개별 방송의 정보를 조회할 수 있습니다.

Javascript 기반의 Shoplive Player 설치

Shoplive 웹클라이언트가 삽입될 영역에 id를 지정하고 몇 가지의 옵션과 함께 스크립트를 호출하면 연동이 마무리됩니다.

<html>
<head>
  <!-- viewport를 반드시 명시해야 의도하지 않은 확대나 축소를 방지할 수 있습니다. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
</head>
<body>
  <div id="{your-div-id}"></div>
</body>
</html>
<!-- SHOPLIVE Player Code --> 
<script> 
  (function (s,h,o,p,l,i,v,e) {s["ShoplivePlayer"]=l;(s[l]=s[l]||function(){
  (s[l].q=s[l].q||[]).push(arguments);}),(i=h.createElement(o)),
  (v=h.getElementsByTagName(o)[0]);i.async=1;i.src=p;v.parentNode.insertBefore(i,v);
  })(window,document,"script","https://static.shoplive.cloud/live.js","mplayer");
  mplayer("init", "{access_key}", "{campaign_key}", "{user_authorization}", {options});
  mplayer("run", "{your-div-id}");
</script>

자세한 사항은 웹페이지에 설치하기를 참고하시기 바랍니다.

iOS/Android SDK를 이용한 Mobile Application과의 연동

Shoplive에서는 iOS와 Android를 위한 SDK를 제공합니다. 의존성을 추가하고 몇 줄의 코드만 추가하세요. 즉시 여러분의 모바일 어플리케이션과 통합된 라이브 방송 서비스를 이용할 수 있습니다. 보다 자세한 내용은 Shoplive iOS/Android SDK 개발 가이드를 참고하시기 바랍니다.

사용자 인증

라이브 커머스가 실행될 때 채팅과 다양한 통계 정보 기록을 위해 사용자의 정보(userId, userName)가 필요합니다. 별도의 인증 토큰이 필요하지 않은 간편 인증과 JWT(JSON Web Token)를 사용한 보안 인증을 사용할 수 있습니다.

인증 방식연동 데이터특징
간편 인증userId: 사용자 ID, userName: 사용자 이름빠르게 인증을 구현할 수 있음
JWT 인증xxxx.yyyy.zzzz (JSON Web Token)발급받은 비밀키로 sign한 JWT를 생성하여 전달하는 방식

보다 자세한 내용은 사용자 인증하기 문서를 확인하시기 바랍니다.