Knowledge Base Community
Sign Up for Free

Restrict Vidyard players to your secure site using JSON Web Tokens

Avatar
Brendan O'Driscoll
  • Updated

Important: this article requires some web development knowledge. The following steps are designed to be executed by a programmer.

With JSON Web Tokens, you can secure individual players to a secure site so that they can only be viewed by authorized audiences. Any players you secure using this method will play only on the secure pages that you set up. If a viewer attempts to view or embed the player on any other site, the player will not load.

How does it work?

With this method, the web page where your secured Vidyard player is embedded will receive a unique JWT informing it that the viewer who loaded the page is authorized to view that video content.

The Vidyard player on the page will then check for that token. If the token is located,  the player will pass it to the Vidyard platform to validate. If validated, Vidyard will send the video to your player for playback. If it does not find a token, playback will be restricted.

This is a great solution for any secure communication platforms or intranet-type sites that require authentication to access. Securing players in this way on your site ensures that the video content will not be shareable outside of the authenticated platform.

Step 1: Generate the JWT 

Create a backend application to listen for a call from your webpage requesting a JWT. This application must:

  1. Receive the request
  2. Generate a JWT based on the specifications listed in Step 2
  3. Post the generated token back to your web page

Step 2: Add a script to your webpage to request a JWT

Add a script to your webpage that calls a backend application requesting a JSON Web Token with the following specifications:

//header
{
 "alg": "HS256",
 "typ": "JWT"
}

. . .

//payload
{
 "iss": "api_token",
 "exp": "1515164623",
 "role_id": "67890",
 "player_uuid": "X34Z4h6QcGHfJJ45VMJ6R5"
}
  1. In the payload, do not change "api_token"
  2. Replace "1515164623" with an expiry value in the form of POSIX time code (UNIX time). This value determines at what point in time Vidyard will no longer accept the JWT as valid.
    • While not required as part of the JWT payload, an expiry value is recommended as a security best practice.
  3. Replace "67890" with your Role ID.
    • To find the correct Role ID: from the Vidyard dashboard, select Admin > Groups and Users, then click on Manage next to the appropriate group.
      Note: If you are on the new Teams UI, please contact support@vidyard.com or your CSM to get this information and continue to point 4.
    • Select Options > Edit Permissions next to the role to which the API token belongs.
    • The Role_id is the 5 or 6-digit numerical code at the end of the URLExample of where to find your Role ID in the Vidyard URL
    • For example: https://secure.vidyard.com/organizations/12345/groups/12345/roles/67890/edit
  4. Replace X34Z4h6QcGHfJJ45VMJ6R5 with the UUID of the player you want to load on this page.
    • To find the player UUID, hover over the player in the Vidyard dashboard. Select Settings > General, then scroll down to the Player UUID field.
  5. In the signature, replace "Vidyard API token" with the API token for your group
    • To find the API token: first ensure you are in the correct group. If necessary, select Group > Change Group
    • Once in the correct group, select Group > Integrations
    • Insert the API token associated to the Role ID provided above.
      //signature
      HMACSHA256(
 base64UrlEncode(header) + "." +
 base64UrlEncode(payload),
 Vidyard API token
)

For example: if the ID provided is for the role "user", insert the User API Token.

Vidyard API tokens provided within the Integrations interface

Important: Ensure that the API token relates to the group/folder that the player belongs to. It cannot be from the parent folder if the player is in a subfolder.

Here is what a script to make a JWT request and build a Vidyard Player might look like:

<head>
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
</head>
<body>
<script type="text/javascript">
// call web app to create the JWT
function generateJWT (uuid) {
  // your code goes here
  return jwt;
}
let playerUUID = 'PLAYERUUIDHERE';
let playerJWT = generateJWT(playerUUID);
window['onVidyardAPI'] = (vidyardEmbed) => {
  vidyardEmbed.api.renderPlayer({
    uuid: playerUUID,
    container: document.querySelector('.player'),
    type: 'inline',
    jwt: playerJWT
  });
};
</script>

<div class='player'>
</div>
</body>

Note: If you want to test this out, you can access a test JSON Web Token here.

Step 3: Enable JWT security on any players you wish to embed

  • Within the security settings for a Vidyard player, click Secure Platform Whitelist to enable JWT security for that player.Restrict to Secure Platforms checkbox
  • When a JWT secured player is loaded on your secured page, the Vidyard player will search for a JWT token.
  • If the player does not find a JWT or the token is invalid, the player will not load your content.
  • If the player finds a JWT, it will send the token to Vidyard for validation. If validated, the Vidyard platform will send the video to your player.
    Note: Players can be secured individually or as a default setting for all players within a group

Articles in this section

Related articles