Contacter le support
du système
Introduction
Dans l'étape étape par étape : Document de gestion du lecteur que vous avez utilisé des instructions curl pour interagir avec l'API. Lorsqu'un appel d'API a été effectué, vous avez été invité de manière interactive à entrer un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas réalisable lors de la construction d'une application.
Ici, vous apprendrez comment effectuer les requêtes API en utilisant JavaScript et XMLHttpRequest - également connu sous le nom AJAX - pour créer des clients web pour les opérations de gestion des lecteurs
Étant donné que l'API Player Management est compatible CORS et permet une authentification de base à l'aide de vos identifiants de connexion Brightcove, il est possible de faire des requêtes d'API directement à partir d'une page Web, comme nous le faisons dans les exemples d'API Player Management. Les autres API RESTful de Brightcove nécessitent une authentification via OAuth. Étant donné que l'API utilisée pour récupérer les jetons d'accès n'est pas activée par CORS (ni les API elles-mêmes), vous devez effectuer des requêtes via une application côté serveur. Reportez-vous à la section Utilisation des API REST pour obtenir un guide sur la création d'applications hybrides avec une interface utilisateur Web et un proxy pour accéder aux API REST. C'est l'approche que nous recommandons pour les applications utilisant l'API Player Management en production, car elle est plus sécurisée, car elle n'envoie pas d'informations d'identification via des connexions HTTP.
L'authentification de base
Dans l'étape étape par étape : Document de gestion du lecteur que vous avez utilisé des instructions curl pour interagir avec l'API. Lorsqu'un appel d'API a été effectué, vous avez été invité de manière interactive à entrer un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas réalisable lors de la construction d'une application.
Vous pouvez utiliser l'authentification de base lors de la création d'une application. Dans l'en-tête, vous devez envoyer les informations d'identification, chiffrées dans une chaîne ASCII codée en base 64. Vous pouvez utiliser la btoa() méthode JavaScript pour effectuer l'encodage. En supposant account_username et account_password sont remplis, par exemple, à partir d'un formulaire, l'en-tête Authorization apparaîtrait comme suit:
"Authorization": "Basic " + btoa(account_username + ":" + account_password),
AJAX
Au lieu d'utiliser des instructions curl, ces exemples utiliseront JavaScript pour communiquer avec l'API. Cela signifie utiliser AJAX pour émettre la requête à l'API. Un exemple de demande spécifique peut ressembler à ceci :
$.ajax({
type: "DELETE",
headers: {
"Authorization": "Basic " + btoa("username:password"),
"Content-Type": "application/json"
},
url: "https://players.api.brightcove.com/v2/accounts/123456789/players/478772a5-a2f2-44c6-a26b-2d7234bd97f5",
success: ajaxSuccess,
error: ajaxError
});
Les associés success et error les gestionnaires pourraient ressembler à ceci :
var ajaxSuccess = function (data) {
document.getElementById("jsonResponse").innerHTML = JSON.stringify(data,null,2);
};
var ajaxError = function (data) {
console.log("error data: ");
console.log(data);
};
Bien sûr, vous ne voulez pas coder en dur toutes les informations dans l'appel AJAX comme indiqué ci-dessus, il est donc logique de résumer l'appel réel à une fonction réutilisable, comme indiqué ici :
var makeAjaxCall = function (callURL, callType, callData) {
if (callData) {
$.ajax({
type: callType,
headers: {
"Authorization": "Basic " + btoa(account_username + ":" + account_password),
"Content-Type": "application/json"
},
url: callURL,
data: JSON.stringify(callData),
success: ajaxSuccess,
error: ajaxError
});
} else {
$.ajax({
type: callType,
headers: {
"Authorization": "Basic " + btoa(account_username + ":" + account_password),
"Content-Type": "application/json"
},
url: callURL,
success: ajaxSuccess,
error: ajaxError
});
}
};
Vous êtes alors prêt à appeler la fonction. Dans l'exemple suivant, le account_id , account_password et account_username les valeurs sont toutes extraites d'un formulaire.
var getPlayerInfo = function () {
account_id = document.getElementById("account_id").value,
account_password = document.getElementById("account_password").value,
account_username = document.getElementById("account_username").value;
call_url = "https://players.api.brightcove.com/v2/accounts/" + account_id + "/players";
makeAjaxCall(call_url, "GET", null);
};
Si vous avez terminé l'étape par étape : Document de gestion du lecteur, vous savez que certains processus prennent plusieurs appels d'API, comme la création et la publication d'un lecteur. En outre, la logique de certaines applications peut nécessiter plusieurs appels d'API, comme obtenir une liste de tous les joueurs à afficher, puis supprimer les joueurs marqués par l'utilisateur. Dans ces cas, vous devrez probablement modifier votre success gestionnaire pour effectuer une logique différente en fonction de l'appel qui vient d'être effectué avec succès. Dans ces exemples d'applications, la logique d'implémentation pour ces cas d'utilisation sera implémentée à l'aide d'une variable d'indicateur callPurpose, et d'une case instruction utilisant cet indicateur, comme indiqué ici :
var ajaxSuccess = function (data) {
switch (callPurpose) {
case "getPlayers":
createCheckboxes(data);
watchCheckboxes();
break;
case "deletePlayer":
document.getElementById("jsonResponse").textContent += data;
break;
}
};
AJAX sans jQuery
Si vous préférez ne pas utiliser jQuery, faire des requêtes AJAX est un peu plus complexe, mais pas trop. Voici un exemple de code, avec des commentaires, pour vous permettre de commencer :
/**
* createRequest sets up requests, send them to makeRequest(), and handles responses
* @param {string} type the request type
*/
function createRequest(type) {
var options = {},
baseURL = 'https://players.api.brightcove.com/v2/accounts/',
account_id = '1234567890',
// would be better to get these from form fields
// and not hardcode them
username = 'jane@myplace.com',
password = 'mypassword',
responseDecoded;
// set credentials
options.client_id = cid.value;
options.client_secret = secret.value;
switch (type) {
case 'getPlayers':
options.url = ipBaseURL + account_id + '/players';
options.requestType = 'GET';
options.username = username;
options.password = password;
makeRequest(options, function(response) {
// use try catch in case something went wrong
try {
responseDecoded = JSON.parse(response);
// now do whatever you want with the response
}
catch (e) {
console.log('something went wrong - this was the JSON.parse error: ' + e);
}
});
break;
// additional cases
default:
console.log('Should not be getting to the default case - bad request type sent');
break;
}
}
/**
* send API request
* @param {Object} options for the request
* @param {String} options.url the full API request URL
* @param {String="GET","POST","PATCH","PUT","DELETE"} requestData [options.requestType="GET"] HTTP type for the request
* @param {String} options.username username for the account
* @param {String} options.password password for the account
* @param {JSON} [options.requestBody] Data (if any) to be sent in the request body in the form of a JSON string
* @param {Function} [callback] callback function that will process the response
*/
function makeRequest(options, callback) {
var httpRequest = new XMLHttpRequest(),
response,
requestParams,
dataString,
// response handler
getResponse = function() {
try {
if (httpRequest.readyState === 4) {
// don't just check for status = 200
// some requests return other 2xx codes
if (httpRequest.status >= 200 && httpRequest.status < 300) {
response = httpRequest.responseText;
// return the response to the callback
callback(response);
} else {
alert('There was a problem with the request. Request returned ' + httpRequest.status);
}
}
} catch (e) {
alert('Caught Exception: ' + e);
}
};
/**
* set up request data
*/
// set response handler
httpRequest.onreadystatechange = getResponse;
// open the request
httpRequest.open(options.requestType, options.url);
// set headers
httpRequest.setRequestHeader("Content-Type", "application/json");
httpRequest.setRequestHeader("Authorization", "Basic " + btoa(options.username + ":" + options.password));
// open and send request
if (options.requestBody) {
httpRequest.send(options.requestBody)
} else {
httpRequest.send();
}
}