Guides

Authentication with the Player Library

Saucelive supports three authentication types:

  • Guest access (no login)
  • Simple authentication
  • JWT authentication

You can pass user information using either Simple authentication or JWT authentication.
While Simple authentication offers a quick and easy setup, JWT authentication is recommended for enhanced security and to prevent abuse of arbitrary memberId values. Generate JWT Token

Guest Access (Unauthenticated User)

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.SauceLiveLib.setInit({ broadcastId: 'Please enter the broadcast ID.' });
   // The rest of the settings remain the same, but if the broadcast is a stage broadcast, please use the code below for testing.
   // window.SauceLiveLib.setInit({ broadcastId: 'stage Please enter the broadcast ID.',env:'stage' });
  window.SauceLiveLib.load('sauce_live')
</script>

or

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.SauceLiveLib.setInit({ broadcastId: 'Please enter the broadcast ID.' });
  window.SauceLiveLib.load() //default 'sauce_live'
</script>

Using Simple Authentication (Pass basic user information such as nickName and memberId in plain text.)

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
   window.SauceLiveLib.setInit({ broadcastId: 'Please enter the broadcast ID.' });
   window.SauceLiveLib.setMemberObject({
    memberId: string,
    nickName: string,
    age?: string, //Option ex) 10, 20, 30 - age
    gender?: string, //Option ex) m, w  - gender man(m), woman(w)
   });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

Example: Simple Authentication (Client Integration)

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
    // Use the partner’s API to check whether the user is currently logged in.
   const response  = await fetch(`YOUR API`);
    // From the partner’s API, extract the user’s ID and name or nickname to identify the actual user.
   const { memberId,nickName,name } = await response.json();
   // Below is a sample code to retrieve the broadcast ID from the URL.
   const params  =new URLSearchParams(window.location.search);
   const broadcastId  = params.get('broadcastId');
    if(memberId && broadcastId ){
     window.SauceLiveLib.setInit({ broadcastId: broadcastId });
     window.SauceLiveLib.setMemberObject({
      memberId: memberId,
      // Add the nickname to be displayed in the chat window.To display the nickName, please provide a value for it.
      nickName: nickName,
   });
    window.SauceLiveLib.load();
     // If values such as memberId are not provided, the player will run in guest mode.
  } else if (broadcastId) {
     window.SauceLiveLib.setInit({ broadcastId: broadcastId });
     // This setting indicates guest login.
     window.SauceLiveLib.setMemberToken(" ");
     window.SauceLiveLib.load();
   }
</script>