Introduction
Dans la section Étape par étape : Player Management document 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 à saisir un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas réalisable lors de la création d'une application.
Vous apprendrez ici comment effectuer les demandes d'API en utilisant JavaScript et XMLHttpRequest, également connu sous le nom d'AJAX, pour créer des clients Web pour les opérations de gestion des joueurs.
Parce que l'API de gestion des joueurs est Compatible CORS et permet une authentification de base à l'aide de vos identifiants de connexion Brightcove, il est possible de faire des demandes 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 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 également l'approche que nous recommandons pour les applications utilisant l'API Player Management en production, car elle est plus sécurisée et n'envoie aucune information d'identification via des connexions HTTP.
Authentification de base
Dans la section Étape par étape : Player Management document 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 à saisir un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas réalisable 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, chiffrées dans une chaîne ASCII codée en base 64. Vous pouvez utiliser le JavaScript btoa() méthode pour faire l'encodage. En supposant account_username et account_password sont renseignés à partir, par exemple, d'un formulaire, l'en-tête d'autorisation 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 envoyer la demande à l'API. Un exemple de requête spécifique pourrait 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ée 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 de l'appel AJAX comme indiqué ci-dessus, il est donc logique d'abstraire 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 : Player Management document vous savez que certains processus nécessitent plusieurs appels d'API, comme la création et la publication d'un lecteur. De plus, 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 que l'utilisateur a marqués. Dans ces cas, vous devrez probablement modifier votre success gestionnaire pour exécuter 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, callPurpose , et un case déclaration 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();
}
}