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.


Use the following links to read more about what more widgets VIDIZMO is offering:

How to Use VIDIZMO Widgets

How to use the Most Popular Media Widget

How to playback video from a widget

How to playback an audio from a widget

How to use Transcription Widget

How to use AI Insights Widget