assistance Contacter le support | Étatétat du système du système
Contenu de la page

    Configuration des exemples de gestion des joueurs

    Cette page décrit comment les exemples de base pour le nouveau lecteur sont écrits. Cela inclut des détails sur l'authentification de base et la façon dont AJAX est utilisé dans les exemples d'API Player Management.

    Introduction

    Dans l'étape étape par étape : Document de gestion du lecteur que vous avez utilisé des instructions curl pour interagir avec l'API. Lorsqu'un appel d'API a été effectué, vous avez été invité de manière interactive à entrer un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas réalisable lors de la construction d'une application.

    Ici, vous apprendrez comment effectuer les requêtes API en utilisant JavaScript et XMLHttpRequest - également connu sous le nom AJAX - pour créer des clients web pour les opérations de gestion des lecteurs

    Étant donné que l'API Player Management est compatible CORS et permet une authentification de base à l'aide de vos identifiants de connexion Brightcove, il est possible de faire des requêtes d'API directement à partir d'une page Web, comme nous le faisons dans les exemples d'API Player Management. Les autres API RESTful de Brightcove nécessitent une authentification via OAuth. Étant donné que l'API utilisée pour récupérer les jetons d'accès n'est pas activée par CORS (ni les API elles-mêmes), vous devez effectuer des requêtes via une application côté serveur. Reportez-vous à la section Utilisation des API REST pour obtenir un guide sur la création d'applications hybrides avec une interface utilisateur Web et un proxy pour accéder aux API REST. C'est l'approche que nous recommandons pour les applications utilisant l'API Player Management en production, car elle est plus sécurisée, car elle n'envoie pas d'informations d'identification via des connexions HTTP.

    L'authentification de base

    Dans l'étape étape par étape : Document de gestion du lecteur que vous avez utilisé des instructions curl pour interagir avec l'API. Lorsqu'un appel d'API a été effectué, vous avez été invité de manière interactive à entrer un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas réalisable lors de la construction d'une application.

    Vous pouvez utiliser l'authentification de base lors de la création d'une application. Dans l'en-tête, vous devez envoyer les informations d'identification, chiffrées dans une chaîne ASCII codée en base 64. Vous pouvez utiliser la btoa() méthode JavaScript pour effectuer l'encodage. En supposant account_username et account_password sont remplis, par exemple, à partir d'un formulaire, l'en-tête Authorization apparaîtrait comme suit:

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

    AJAX

    Au lieu d'utiliser des instructions curl, ces exemples utiliseront JavaScript pour communiquer avec l'API. Cela signifie utiliser AJAX pour émettre la requête à l'API. Un exemple de demande spécifique peut ressembler à ceci :

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

    Les associés success et error les gestionnaires pourraient ressembler à ceci :

        var ajaxSuccess = function (data) {
            document.getElementById("jsonResponse").innerHTML = JSON.stringify(data,null,2);
            };
        
            var ajaxError = function (data) {
            console.log("error data: ");
            console.log(data);
        };

    Bien sûr, vous ne voulez pas coder en dur toutes les informations dans l'appel AJAX comme indiqué ci-dessus, il est donc logique de résumer l'appel réel à une fonction réutilisable, comme indiqué ici :

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

    Vous êtes alors prêt à appeler la fonction. Dans l'exemple suivant, le account_id , account_password et account_username les valeurs sont toutes extraites d'un formulaire.

        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 vous avez terminé l'étape par étape : Document de gestion du lecteur, vous savez que certains processus prennent plusieurs appels d'API, comme la création et la publication d'un lecteur. En outre, la logique de certaines applications peut nécessiter plusieurs appels d'API, comme obtenir une liste de tous les joueurs à afficher, puis supprimer les joueurs marqués par l'utilisateur. Dans ces cas, vous devrez probablement modifier votre success gestionnaire pour effectuer une logique différente en fonction de l'appel qui vient d'être effectué avec succès. Dans ces exemples d'applications, la logique d'implémentation pour ces cas d'utilisation sera implémentée à l'aide d'une variable d'indicateur callPurpose, et d'une case instruction utilisant cet indicateur, comme indiqué ici :

        var ajaxSuccess = function (data) {
            switch (callPurpose) {
                case "getPlayers":
                    createCheckboxes(data);
                    watchCheckboxes();
                    break;
                case "deletePlayer":
                    document.getElementById("jsonResponse").textContent += data;
                    break;
            }
        };

    AJAX sans jQuery

    Si vous préférez ne pas utiliser jQuery, faire des requêtes AJAX est un peu plus complexe, mais pas trop. Voici un exemple de code, avec des commentaires, pour vous permettre de commencer :

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