Overview
Keeping digital content in control is a challenge that organizations commonly face. A mechanism that enables the media managers to only let authorized users have access to their digital content is a dire need. VIDIZMO's widgets solve this problem by allowing its customers to only let the authenticated users playback the protected media.
Before you start
Before you can use any authentication methods to play protected media in widgets, you need to configure a widget app in VIDIZMO Portal. Refer to this article to see how you can configure Widgets App in VIDIZMO Portal: Getting Started
Authentication Methods for Widgets
All VIDIZMO widgets are reliant on the widgets.js file, which requires an access token to load authorized media, therefore, the widgetContext variable must be present in DOM's window before loading widgets.js in your website. Following are the available authentication methods:
- Client Secret
- User Credentials
Client Secret
This method authenticates the widget's consumers using their email address and application's client secret, application ID, and whitelisted domain(s) configured in the Widgets App.
Code Snippet
<script type="text/javascript">
window.widgetContext = {
appLoginInfo: {
appId: "{application-id}",
emailAddress: "{email-address}",
clientSecret: "{client-secret}"
}
}
</script>Note: {email-address} is your portal's registered email address where {application-id} and {client-secret} are your VIDIZMO widget app's application id and client secret.Authentication Flow
User Credentials
This method generates an access token based on the user's email address and password along with widgets app's application id .
Code Snippet
<script type="text/javascript">
var authInfo = {
emailAddress: "{email-address}",
password: "{password}"
};
<!-- where portal address can be either https://{portal-address} or http://{portal-address} -->
fetch(
'{portal-address}/api/v1/user/authenticate',
{ method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(authInfo) }
)
.then(response => response.text())
.then(data => {
// access token is returned as response
console.log(data)
window.widgetContext = { authenticationInfo: { accessToken: data }, appLoginInfo: { appId: "{app-id}" } }
});
</script>Note: {email-address} and {password} are your portal's registered email address and password respectively. Where {app-id} is your configured widgets app application id.Read Next
Use the following links to read more about what more widgets VIDIZMO is offering:
How to use the Most Popular Media Widget
How to playback video from a widget
How to playback an audio from a widget