Einleitung
Im Schritt-für-Schritt: Player Management-Dokument, in dem Sie curl-Anweisungen verwendet haben, um mit der API zu interagieren. Bei einem API-Aufruf wurden Sie interaktiv zur Eingabe eines Kennworts aufgefordert. Während dies für curl gut funktioniert, ist diese Art der interaktiven Authentifizierung beim Erstellen einer Anwendung nicht möglich.
Hier erfahren Sie, wie Sie die API-Anfragen mit JavaScript und XMLHttpRequest – auch bekannt als AJAX – stellen, um Webclients für Spielerverwaltungsvorgänge zu erstellen
Weil die Spielerverwaltungs-API CORS-fähig und ermöglicht die grundlegende Authentifizierung mit Ihren Brightcove-Anmeldedaten. Es ist möglich, API-Anforderungen direkt von einer Webseite aus zu stellen, wie wir es in Player Management API-Beispielen tun. Die anderen RESTful-APIs von Brightcove erfordern eine Authentifizierung über OAuth. Da die zum Abrufen von Zugriffstoken verwendete API nicht CORS-fähig ist (und die APIs selbst auch nicht), müssen Sie Anfragen über eine serverseitige App stellen. Sehen Verwenden der REST-APIs für eine Anleitung zum Erstellen von Hybrid-Apps mit einer Web-Benutzeroberfläche und einem Proxy für den Zugriff auf die REST-APIs. Diesen Ansatz empfehlen wir auch für Apps, die die Player Management API in der Produktion verwenden, da sie sicherer ist und keine Anmeldeinformationen über HTTP-Verbindungen sendet.
Basisauthentifizierung
Im Schritt-für-Schritt: Player Management-Dokument, in dem Sie curl-Anweisungen verwendet haben, um mit der API zu interagieren. Bei einem API-Aufruf wurden Sie interaktiv zur Eingabe eines Kennworts aufgefordert. Während dies für curl gut funktioniert, ist diese Art der interaktiven Authentifizierung beim Erstellen einer Anwendung nicht möglich.
Sie können beim Erstellen einer App die Standardauthentifizierung verwenden. In der Kopfzeile müssen Sie die Zugangsdaten, verschlüsselt in einer Base-64-codierten ASCII-Zeichenfolge, senden. Sie können das JavaScript verwenden btoa() Methode für die Codierung. Angenommen account_username und account_password B. aus einem Formular aufgefüllt werden, würde die Kopfzeile Autorisierung wie folgt aussehen:
"Authorization": "Basic " + btoa(account_username + ":" + account_password),
AJAX
Anstatt curl-Anweisungen zu verwenden, verwenden diese Beispiele JavaScript, um mit der API zu kommunizieren. Dies bedeutet, dass AJAX verwendet wird, um die Anfrage an die API auszugeben. Eine konkrete Beispielanfrage könnte etwa so aussehen:
$.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
});
Damit verbundenen success und error Handler könnten so aussehen:
var ajaxSuccess = function (data) {
document.getElementById("jsonResponse").innerHTML = JSON.stringify(data,null,2);
};
var ajaxError = function (data) {
console.log("error data: ");
console.log(data);
};
Natürlich möchten Sie nicht alle Informationen im AJAX-Aufruf wie oben gezeigt hartcodieren, daher ist es sinnvoll, den eigentlichen Aufruf zu einer wiederverwendbaren Funktion zu abstrahieren, wie hier gezeigt:
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
});
}
};
Anschließend können Sie die Funktion aufrufen. Im folgenden Beispiel werden die account_id account_password und account_username- Werte alle aus einem Formular extrahiert.
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);
};
Wenn Sie den Schritt für Schritt abgeschlossen haben: Player Management-Dokument wissen Sie, dass einige Prozesse mehrere API-Aufrufe benötigen, z. B. das Erstellen und Veröffentlichen eines Players. Außerdem erfordert die Logik einiger Apps möglicherweise mehrere API-Aufrufe, z. In diesen Fällen müssen Sie höchstwahrscheinlich Ihre success -Handler, um eine andere Logik auszuführen, je nachdem, welcher Aufruf gerade erfolgreich ausgeführt wurde. In diesen Beispiel-Apps wird die Implementierungslogik für diese Anwendungsfälle mithilfe einer Flag-Variablen implementiert. callPurpose , und ein case Anweisung mit diesem Flag, wie hier gezeigt:
var ajaxSuccess = function (data) {
switch (callPurpose) {
case "getPlayers":
createCheckboxes(data);
watchCheckboxes();
break;
case "deletePlayer":
document.getElementById("jsonResponse").textContent += data;
break;
}
};
AJAX ohne jQuery
Wenn Sie jQuery lieber nicht verwenden möchten, ist das Erstellen von AJAX-Anfragen etwas komplexer, aber nicht zu viel. Hier ist ein Beispielcode mit Kommentaren, um Ihnen den Einstieg zu erleichtern:
/**
* 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();
}
}