Support Kontakt Support | Systemstatus Systemstatus

Eingerichtet für Player Management-Beispiele

Diese Seite beschreibt, wie die grundlegenden Beispiele für das neue player sind geschrieben. Dies beinhaltet Details zur Basisauthentifizierung und zur Verwendung von AJAX in der Player Management API Proben.

Einführung

Schritt für Schritt: Player Verwaltungsdokument Sie haben Curl-Anweisungen verwendet, 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 API-Anforderungen mithilfe von JavaScript und XMLHttpRequest - auch als AJAX bezeichnet - zum Erstellen von Webclients erstellen player Management-Operationen

Da die Player Management API is CORS-fähig und ermöglicht die grundlegende Authentifizierung mithilfe Ihrer Brightcove-Anmeldeinformationen. Es ist möglich, API-Anforderungen direkt von einer Webseite aus zu stellen, wie wir es in tun Player Management API Proben. Die anderen RESTful-APIs von Brightcove erfordern eine Authentifizierung über OAuth. Da die API, die zum Abrufen von Zugriffstoken verwendet wird, nicht CORS-fähig ist (und auch nicht die APIs selbst), müssen Sie Anfragen über eine serverseitige App stellen. Sehen Verwenden der REST-APIs eine Anleitung zum Erstellen hybrider Apps mit einer Webbenutzerschnittstelle und einem Proxy für den Zugriff auf die REST-APIs. Dies ist der Ansatz, den wir für Apps empfehlen, die den Player Management API auch in der Produktion, da es sicherer ist, keine Anmeldeinformationen über HTTP-Verbindungen zu senden.

Standardauthentifizierung

Schritt für Schritt: Player Verwaltungsdokument Sie haben Curl-Anweisungen verwendet, 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 Anmeldeinformationen senden, verschlüsselt in einer Base-64-codierten ASCII-Zeichenfolge. Sie können das JavaScript verwenden btoa() Methode, um die Codierung durchzuführen. Angenommen account_username und account_password B. aus einem Formular, würde der Berechtigungsheader wie folgt aussehen:

     "Authorization": "Basic " + btoa(account_username + ":" + account_password),

AJAX

Anstelle von curl-Anweisungen verwenden diese Beispiele JavaScript, um mit der API zu kommunizieren. Dies bedeutet, dass Sie AJAX verwenden, um die Anfrage an die API zu senden. Eine bestimmte Beispielanforderung 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 Behandler könnten in etwa 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 fest codieren, wie oben gezeigt. Daher ist es sinnvoll, den tatsächlichen Aufruf einer Funktion, die wiederverwendbar ist, wie hier gezeigt, zu abstrahieren:

    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
            });
        }
    };

Sie sind dann bereit, die Funktion aufzurufen. Im folgenden Beispiel account_id, account_password und account_username Werte werden 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 die Schritt-für-Schritt-Anleitung abgeschlossen haben: Player Verwaltungsdokument Sie wissen, dass einige Prozesse mehrere API-Aufrufe ausführen, z. B. das Erstellen und Veröffentlichen eines player. Außerdem erfordert die Logik einiger Apps möglicherweise mehrere API-Aufrufe, z. B. das Abrufen einer Liste aller players anzeigen und dann löschen players der Benutzer markiert. In diesen Fällen müssen Sie höchstwahrscheinlich Ihre ändern success Handler, um verschiedene Logik basierend darauf durchzuführen, welcher Anruf gerade erfolgreich ausgeführt wurde. In diesen Beispiel-Apps wird die Implementierungslogik für diese Anwendungsfälle mit einer Flag-Variable implementiert, callPurposeUnd eine 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 ein wenig komplexer, aber nicht zu viel. Hier ist ein Beispielcode mit Kommentaren, um Sie zu starten:

    /**
     * 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();
        }
    }

Seite zuletzt aktualisiert am 12. Juni 2020