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>
Updated 14 days ago