Contactar con asistencia técnica
Estado del SistemaIntroducción
En el paso a paso: Player Documento de administración que utilizó declaraciones curl para interactuar con la API. Cuando se realizó una llamada a la API, se le solicitó interactivamente una contraseña. Si bien esto funciona bien para curl, este tipo de autenticación interactiva no es factible al crear una aplicación.
Aquí aprenderá cómo realizar las solicitudes de API utilizando JavaScript y XMLHttpRequest, también conocido como AJAX, para crear clientes web para player operaciones de gestión
Debido a que el Player Management API is CORS habilitado 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 lo hacemos en Player Management API muestras 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 son las propias API), debe realizar las solicitudes a través de una aplicación del lado del servidor. Ver Uso de las API REST para obtener una guía para 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 el Player Management API También en producción, porque es más seguro, no envía credenciales a través de conexiones HTTP.
La autenticación básica
En el paso a paso: Player Documento de administración que utilizó declaraciones curl para interactuar con la API. Cuando se realizó una llamada a la API, se le solicitó interactivamente una contraseña. Si bien esto funciona bien para curl, este tipo de autenticación interactiva no es factible al crear una aplicación.
Puede usar la autenticación básica al compilar una aplicación. En el encabezado debe enviar las credenciales, cifradas en una cadena ASCII codificada con 64 base. Puedes usar el JavaScript btoa() método para hacer la codificación. Asumiendo account_username y account_password se completan desde, por ejemplo, un formulario, el encabezado Autorización aparecerá de la siguiente manera:
"Authorization": "Basic " + btoa(account_username + ":" + account_password),
AJAX
En lugar de utilizar 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 más o menos 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 manejadores podrían verse más o menos 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 es 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 estás listo para llamar a la función. En el siguiente ejemplo, 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 En el documento de administración, sabe que algunos procesos toman múltiples llamadas a la API, como crear y publicar un player. Además, la lógica de algunas aplicaciones puede requerir múltiples llamadas API, como obtener una lista de todas players para mostrar, luego eliminar players el usuario marcado. En estos casos, lo más probable es que necesite modificar su success controlador para realizar diferentes lógica en función de qué llamada se llevó a cabo con éxito. En estas aplicaciones de muestra, la lógica de implementación para estos casos de uso se implementará utilizando una variable de indicador, 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, hacer solicitudes AJAX es un poco más complejo, pero no demasiado. Aquí hay algunos ejemplos de código, con comentarios, para que comiences:
/**
* 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();
}
}