Contacter le support
L'état du système
Introduction
Dans l'étape par étape: Player Document de gestion que vous avez utilisé des instructions curl pour interagir avec l'API. Lors d'un appel d'API, vous avez été invité de manière interactive à saisir un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas possible lors de la création d'une application.
Ici, vous apprendrez comment effectuer les demandes d'API à l'aide de JavaScript et XMLHttpRequest - également appelé AJAX - pour créer des clients Web pour player opérations de gestion
Parce que le Player Management API is CORS activé et permet l'authentification de base à l'aide de vos informations de connexion Brightcove, il est possible de faire des demandes d'API directement à partir d'une page Web, comme nous le faisons dans Player Management API échantillons. 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 compatible CORS (ni les API elles-mêmes), vous devez effectuer des demandes via une application côté serveur. Voir Utilisation des API REST pour 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 la Player Management API en production également, car il est plus sécurisé, n'envoyant aucune information d'identification via des connexions HTTP.
L'authentification de base
Dans l'étape par étape: Player Document de gestion que vous avez utilisé des instructions curl pour interagir avec l'API. Lors d'un appel d'API, vous avez été invité de manière interactive à saisir un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas possible lors de la création 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, cryptées dans une chaîne ASCII encodée en base 64. Vous pouvez utiliser le JavaScript btoa() méthode pour faire l'encodage. En supposant account_username et account_password sont remplis à partir, par exemple d'un formulaire, l'en-tête Autorisation apparaît 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 envoyer la demande à l'API. Un exemple de requête 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
});
Associé 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 toutes les informations dans l'appel AJAX comme indiqué ci-dessus, il est donc logique de résumer l'appel réel à une fonction qui est 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: Player Document de gestion, vous savez que certains processus prennent plusieurs appels d'API, comme la création et la publication d'un player. En outre, la logique de certaines applications peut nécessiter plusieurs appels API, comme obtenir une liste de tous players à afficher, puis suppression players l'utilisateur a marqué. Dans ces cas, vous devrez très 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 de ces cas d'utilisation sera implémentée à l'aide d'une variable d'indicateur, callPurposeEt un case déclaration en utilisant ce drapeau, 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 aider à démarrer:
/**
* 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();
}
}