Paper Contacter le support | état du système L'état du système
Contenu de la page

    Mis en place pour Player Échantillons de gestion

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

    Introduction

    Dans l'étape par étape: Player Document de gestion que vous avez utilisé des instructions curl pour interagir avec l'API. Lors d'un appel d'API, vous avez été invité de manière interactive à saisir un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas possible lors de la création d'une application.

    Ici, vous apprendrez comment effectuer les demandes d'API à l'aide de JavaScript et XMLHttpRequest - également appelé AJAX - pour créer des clients Web pour player opérations de gestion

    Parce que le Player Management API is CORS activé et permet l'authentification de base à l'aide de vos informations de connexion Brightcove, il est possible de faire des demandes d'API directement à partir d'une page Web, comme nous le faisons dans Player Management API échantillons. 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 compatible CORS (ni les API elles-mêmes), vous devez effectuer des demandes via une application côté serveur. Voir Utilisation des API REST pour 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 la Player Management API en production également, car il est plus sécurisé, n'envoyant aucune information d'identification via des connexions HTTP.

    L'authentification de base

    Dans l'étape par étape: Player Document de gestion que vous avez utilisé des instructions curl pour interagir avec l'API. Lors d'un appel d'API, vous avez été invité de manière interactive à saisir un mot de passe. Bien que cela fonctionne bien pour curl, ce type d'authentification interactive n'est pas possible lors de la création 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, cryptées dans une chaîne ASCII encodée en base 64. Vous pouvez utiliser le JavaScript btoa() méthode pour faire l'encodage. En supposant account_username et account_password sont remplis à partir, par exemple d'un formulaire, l'en-tête Autorisation apparaît 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 envoyer la demande à l'API. Un exemple de requête 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
        });

    Associé 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 toutes les informations dans l'appel AJAX comme indiqué ci-dessus, il est donc logique de résumer l'appel réel à une fonction qui est 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: Player Document de gestion, vous savez que certains processus prennent plusieurs appels d'API, comme la création et la publication d'un player. En outre, la logique de certaines applications peut nécessiter plusieurs appels API, comme obtenir une liste de tous players à afficher, puis suppression players l'utilisateur a marqué. Dans ces cas, vous devrez très 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 de ces cas d'utilisation sera implémentée à l'aide d'une variable d'indicateur, callPurposeEt un case déclaration en utilisant ce drapeau, 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 aider à démarrer:

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

    Dernière mise à jour de la page le 12 juin 2020