Introducción
En el paso a paso: Documento de gestión de jugadores que utilizó declaraciones curl para interactuar con la API. Cuando se realizó una llamada a la API, se le solicitó de forma interactiva una contraseña. Si bien esto funciona bien para curl, este tipo de autenticación interactiva no es factible cuando se crea una aplicación.
Aquí aprenderá cómo realiza las solicitudes de API utilizando JavaScript y XMLHttpRequest, también conocido como AJAX, para crear clientes web para operaciones de administración de jugadores.
Porque la API de administración de jugadores es Compatible con CORS y permite la autenticación básica con sus credenciales de inicio de sesión de Brightcove, es posible realizar solicitudes de API directamente desde una página web, como hacemos en las muestras de API de gestión de jugadores. Las otras API RESTful de Brightcove requieren autenticación a través de OAuth. Dado que la API utilizada para recuperar los tokens de acceso no está habilitada para CORS (ni las API mismas), debe realizar solicitudes a través de una aplicación del lado del servidor. Ver Usando las API REST para obtener una guía sobre cómo crear aplicaciones híbridas con una interfaz de usuario web y un proxy para acceder a las API REST. Este es el enfoque que recomendamos para las aplicaciones que utilizan Player Management API en producción también, porque es más seguro y no envía credenciales a través de conexiones HTTP.
Autenticación básica
En el paso a paso: Documento de gestión de jugadores que utilizó declaraciones curl para interactuar con la API. Cuando se realizó una llamada a la API, se le solicitó de forma interactiva una contraseña. Si bien esto funciona bien para curl, este tipo de autenticación interactiva no es factible cuando se crea una aplicación.
Puede utilizar la autenticación básica al crear una aplicación. En el encabezado, debe enviar las credenciales, cifradas en una cadena ASCII codificada en base 64. Puede utilizar JavaScript btoa() método para hacer la codificación. Asumiendo account_username y account_password se rellenan desde, por ejemplo, un formulario, el encabezado de Autorización aparecería de la siguiente manera:
"Authorization": "Basic " + btoa(account_username + ":" + account_password),
AJAX
En lugar de usar declaraciones curl, estas muestras usarán JavaScript para comunicarse con la API. Esto significa usar AJAX para emitir la solicitud a la API. Una solicitud de ejemplo específica podría verse así:
$.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
});
Asociado success y error los controladores podrían verse así:
var ajaxSuccess = function (data) {
document.getElementById("jsonResponse").innerHTML = JSON.stringify(data,null,2);
};
var ajaxError = function (data) {
console.log("error data: ");
console.log(data);
};
Por supuesto, no desea codificar toda la información en la llamada AJAX como se muestra arriba, por lo que tiene sentido abstraer la llamada real a una función que sea reutilizable, como se muestra aquí:
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
});
}
};
Entonces estará listo para llamar a la función. En el siguiente ejemplo el account_id , account_password y account_username todos los valores se extraen de un formulario.
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 ha completado el paso a paso: Player Management documenta que sabe que algunos procesos aceptan múltiples llamadas a la API, como crear y publicar un reproductor. Además, la lógica de algunas aplicaciones puede requerir múltiples llamadas a la API, como obtener una lista de todos los jugadores para mostrar y luego eliminar los jugadores que el usuario marcó. En estos casos, lo más probable es que deba modificar su success handler para realizar una lógica diferente en función de la llamada que se llevó a cabo con éxito. En estas aplicaciones de muestra, la lógica de implementación para estos casos de uso se implementará mediante una variable de marca, callPurpose y un case declaración usando esa bandera, como se muestra aquí:
var ajaxSuccess = function (data) {
switch (callPurpose) {
case "getPlayers":
createCheckboxes(data);
watchCheckboxes();
break;
case "deletePlayer":
document.getElementById("jsonResponse").textContent += data;
break;
}
};
AJAX sin jQuery
Si prefiere no usar jQuery, realizar solicitudes AJAX es un poco más complejo, pero no demasiado. Aquí hay un código de muestra, con comentarios, para comenzar:
/**
* 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();
}
}