Configuración de ejemplos de administración de reproductores

Introducción

En el paso a paso: Documento de administración de reproductores que utilizó instrucciones 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 cuando se construye una aplicación.

Aquí aprenderá cómo realizar las solicitudes API usando JavaScript y XMLHttpRequest, también conocido como AJAX, para crear clientes web para operaciones de administración de jugadores

Dado que la API de administración de Player está habilitada para CORS y permite la autenticación básica mediante 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 ejemplos de API de Player Management. Las otras API RESTful de Brightcove requieren autenticación a través de OAuth. Dado que la API utilizada para recuperar tokens de acceso no está habilitada para CORS (ni las API en sí mismas), debe realizar solicitudes a través de una aplicación del lado del servidor. Consulte Uso de las API de 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 la API de administración de Player también en producción, ya que es más seguro, ya que no envía credenciales a través de conexiones HTTP.

Autentificación básica

En el paso a paso: Documento de administración de reproductores que utilizó instrucciones 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 cuando se construye una aplicación.

Puede usar 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 usar el btoa() método JavaScript para hacer la codificación. Suponiendo account_username y account_password se rellenan 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 usar sentencias 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 algo como esto:

    $.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 anteriormente, 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á 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: El documento de administración de reproductores sabe que algunos procesos toman varias llamadas API, como crear y publicar un reproductor. Además, la lógica de algunas aplicaciones puede requerir varias llamadas API, como obtener una lista de todos los reproductores para mostrar y, a continuación, eliminar los reproductores marcados por el usuario. En estos casos, lo más probable es que necesite alterar su success controlador para realizar una lógica diferente basada en qué llamada se llevó a cabo con éxito. En estas aplicaciones de ejemplo, la lógica de implementación para estos casos de uso se implementará utilizando una variable de bandera callPurpose, y una case declaración que use ese indicador, 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 un código de ejemplo, 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();
        }
    }