Support Kontaktieren Sie Support | Systemstatus Systemstatus
Inhalt der Seite

    Setup für Spielermanagement-Beispiele

    Diese Seite beschreibt, wie die Basisbeispiele für den neuen Player geschrieben werden. Dies umfasst Details zur Standardauthentifizierung und zur Verwendung von AJAX in den Player-Management-API-Beispielen.

    Einführung

    Im Schritt-für-Schritt: Spielerverwaltungsdokument Sie haben Curl-Anweisungen verwendet, um mit der API zu interagieren. Wenn ein API-Aufruf getätigt wurde, wurden Sie interaktiv nach einem Passwort gefragt. 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 - stellen, um Webclients für Player-Verwaltungsvorgänge zu erstellen

    Weil die Player Management API ist 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 dies in den Beispielen der Player Management-API der Fall ist. Die anderen RESTful-APIs von Brightcove erfordern eine Authentifizierung über OAuth. Da die zum Abrufen von Zugriffstoken verwendete API weder CORS-fähig ist (noch die APIs selbst), müssen Sie Anforderungen über eine serverseitige App stellen. Sehen Verwenden der REST-APIs Hier finden Sie eine Anleitung zum Erstellen von Hybrid-Apps mit einer Web-Benutzeroberfläche und einem Proxy für den Zugriff auf die REST-APIs. Dies ist der Ansatz, den wir auch für Apps empfehlen, die die Player Management-API in der Produktion verwenden, da diese sicherer ist und keine Anmeldeinformationen über HTTP-Verbindungen sendet.

    Grundlegende Authentifizierung

    Im Schritt-für-Schritt: Spielerverwaltungsdokument Sie haben Curl-Anweisungen verwendet, um mit der API zu interagieren. Wenn ein API-Aufruf getätigt wurde, wurden Sie interaktiv nach einem Passwort gefragt. 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 Basisauthentifizierung verwenden. Im Header müssen Sie die Anmeldeinformationen senden, die in einer Base-64-codierten ASCII-Zeichenfolge verschlüsselt sind. Sie können das JavaScript verwenden btoa() Methode zur Codierung. Vorausgesetzt account_username und account_password Wenn beispielsweise ein Formular ausgefüllt wird, sieht der Autorisierungsheader wie folgt aus:

         "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 Anforderung an die API zu senden. Eine bestimmte Beispielanforderung könnte ungefähr 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 ungefähr 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 fest codieren. Daher ist es sinnvoll, den tatsächlichen Aufruf auf eine wiederverwendbare 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
                });
            }
        };

    Sie können dann die Funktion aufrufen. Im folgenden Beispiel die 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 erfordern, z. B. das Erstellen und Veröffentlichen eines Players. Außerdem erfordert die Logik einiger Apps möglicherweise mehrere API-Aufrufe, z. B. das Anzeigen einer Liste aller Player zum Anzeigen und das Löschen der vom Benutzer markierten Player. In diesen Fällen müssen Sie höchstwahrscheinlich Ihre ändern success Handler, um eine andere Logik auszuführen, basierend darauf, 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-Anforderungen 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();
            }
        }

    Seite zuletzt aktualisiert am 28 Sep 2020