(Legacy) JavaScript SDK Overview
- Topics:
- Authentication
NOTE
IMPORTANTIntroduction
Adobe highly recommends that you migrate to the latest JS v4.x of the AccessEnabler library.
The Adobe Pass Authentication JavaScript integration offers Programmers a TV-Everywhere solution in the familiar JS web application development environment. The main components of the integration are your “high-level” application (user interaction, video presentation), and the Adobe-provided “low-level” AccessEnabler library that provides your entry to the entitlement flows, and handles communication with Adobe Pass Authentication servers.
The following sections provide descriptions and samples specific to the JavaScript AccessEnabler integration.
IMPORTANTCreating the MVPD Selection Dialog
For a user to log in to their MVPD and become authenticated, your page or player must provide a way for the user to identify their MVPD. A default version of a MVPD selection dialog is provided for development. For production use, you must implement your own MVPD selector.
If you already know who the customer’s provider is, you can set the MVPD programmatically, without user interaction. The technique is the same, but bypasses the step of invoking the Provider Selector dialog and asking the customer to select their MVPD.
Displaying the Service Provider
The following code sample demonstrates how to discover and display the service provider for the current customer:
HTML - This page adds a section to the page that displays the customer’s chosen provider, if they are already logged in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Get the distributor that is used for the authentication</title>
<script type="text/javascript" src="libs/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="libs/swfobject.js"></script>
<script type="text/javascript" src="scripts/sample6.js"></script>
</head>
<body>
<div id="alternative">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player"/> </a>
</div>
<div id="user_authenticated">Please wait while we verify your authentication status</div>
<div id="control">
<button id="sign_in" style="display:none;">Sign in</button>
<button id="sign_out" style="display:none;">Sign out</button>
</div>
<div id="distributor"></div>
<div id="provider_selector" style="display:none;">
<select id="provider_list"></select>
<button id="login">Login</button>
<button id="cancel">Cancel</button>
</div>
<div id="video_player">This is a video player showing an image as a preview. You are not yet authorized to see this content. Make sure that you first sign in.
</div>
<div id="get_authorization">
<button id="request_access" style="display:none;">Request access</button>
</div>
</body>
</html>
JavaScript This JavaScript file queries the Access Enabler for the current provider if the user is already logged in, and displays the result in the page section reserved for it. It also implements an MVPD selector dialog:
$(function() {
embedAE();
});
function embedAE() {
var flashvars = {};
var params = {
bgcolor: "#869ca7",
quality: "high",
allowscriptaccess: "always"
};
var attributes = {
id: "ae_swf",
align: "middle",
name: "ae_swf"
};
swfobject.embedSWF(
"https://entitlement.auth-staging.adobe.com/entitlement/AccessEnabler.swf",
"alternative", "1", "1", "10.1.53", "", flashvars, params, attributes);
}
function getAE() {
return document.getElementById("ae_swf");
}
function swfLoaded() {
var swf = getAE();
initBindings();
// don't load the default provider-selection dialog
swf.setProviderDialogURL("none");
// identify yourself
swf.setRequestor("sample_requestor_Id");
swf.checkAuthentication();
}
// Define the button actions for the provider dialog
function initBindings() {
var provider_selector = $('#provider_selector');
var sign_in = $('#sign_in');
var sign_out = $('#sign_out');
var login = $('#login');
var cancel = $('#cancel');
var request_access = $('#request_access');
sign_out.click(function() {
getAE().logout();
});
sign_in.click(function() {
getAE().getAuthentication();
});
login.click(function() {
var selected_mvpd_id = $("#provider_list option:selected").val();
getAE().setSelectedProvider(selected_mvpd_id);
});
cancel.click(function() {
getAE().setSelectedProvider(null);
provider_selector.hide();
});
request_access.click(function(){
getAE().getAuthorization("sample_requestor_Id");
});
}
// Called if user is already authenticated; queries AE to find the current user's MVPD,
// Adds the result to the UI
function setDistributor() {
var distributor = $("#distributor");
var selectedProvider = getAE().getSelectedProvider();
distributor.replaceWith('<div id="distributor">' +
'Courtesy of ' +
selectedProvider.MVPD +
'</div>');
}
// Adjust the contents of the provider dialog, based on authentication status
// Adds the call to check and display the current distributor, if the user is already
// logged in.
function setAuthenticationStatus(isAuthenticated, errorCode) {
var user_authenticated = $("#user_authenticated");
var video_player = $("#video_player");
var sign_in = $('#sign_in');
var sign_out = $('#sign_out');
var request_access = $('#request_access');
if (isAuthenticated == 1) {
setDistributor();
user_authenticated.replaceWith('<div id="user_authenticated">
You are authenticated - if you wish you can sign out
</div>');
sign_out.show();
sign_in.hide();
video_player.replaceWith('<div id="video_player">Now you can ask for access.</div>');
request_access.show();
} else {
user_authenticated.replaceWith('<div id="user_authenticated">
You are not authenticated please sign in
</div>');
sign_in.show();
sign_out.hide();
}
}
// Allow user to choose a provider
function displayProviderDialog(providers) {
var provider_list = $("#provider_list");
var options = provider_list.attr('options');
for (var index in providers) {
options[index] = new Option(providers[index].displayName,
providers[index].ID);
}
//select the first one by default
if (!$("#provider_list option:selected").length)
$("#provider_list option[0]").attr('selected', 'selected');
$('#provider_selector').show();
}
// Handle the authorization response by sending token to video player
function setToken(requested_resource_id, token) {
var video_player = $("#video_player");
var request_access = $("#request_access");
video_player.replaceWith('<div id="video_player">Now you are authorized to ' +
requested_resource_id +
' content with ' + token + ' . </div>');
}
Logging Out
Call logout() to initiate the logout process. This method takes no arguments. It logs out the current user, clearing all authentication and authorization information for that user and deleting all AuthN and AuthZ tokens from the local system.
There are some cases where your player is not responsible for handling user logouts:
- When the logout is initiated from a site that isn’t integrated with Adobe Pass Authentication. In this case the MVPD can invoke the Adobe Pass Authentication Single Logout service through a browser redirect. (Invoking SLO via a backchannel call is not currently supported.)
NOTEThe following JavaScript code demonstrates logging out (deauthenticating) a currently authenticated user:
[...]
/*
* @param isAuthenticated authentication status: 1 - Authenticated, 0 - not authenticated
* @param errorCode Any error that occurred when determining the authentication status.
* An empty string if no error occurred.
*/
function setAuthenticationStatus(isAuthenticated, errorCode) {
if (isAuthenticated == 1 ) {
/* User is authenticated – we can logout / deauthenticate */
accessEnablerObject.logout();
/* Logs out the current user, clearing all authentication
* and authorization information for that user. Deletes
* all authN and authZ tokens from the user's system.
*/
} else {
/*
* User is NOT authenticated – we do not need to logout;
* Show the log-in image/button/message
*/
}
}