支持 聯繫支持 | 系統狀況 系統狀態

設置為 Player 管理樣本

本頁介紹了新產品的基本示例 player 被寫。 這包括有關基本身份驗證的詳細信息以及如何在AJAX中使用AJAX Player Management API 樣本。

簡介

在分步中: Player 您使用curl語句與API進行交互的管理文檔。 進行API調用後,系統會提示您輸入密碼。 儘管這對於curl非常有效,但是在構建應用程序時這種交互式身份驗證是不可行的。

在這裡,您將學習如何使用JavaScript和XMLHttpRequest(也稱為AJAX)發出API請求,以構建用於 player 管理運作

因為 Player Management API is 啟用CORS 並允許使用您的Brightcove登錄憑據進行基本身份驗證,就像我們在Windows中一樣,可以直接從網頁發出API請求 Player Management API 樣品。 Brightcove的其他RESTful API需要通過以下方式進行身份驗證 OAuth的。 由於用於檢索訪問令牌的API未啟用CORS(API本身也未啟用),因此您必須通過服務器端應用程序發出請求。 看到 使用REST API 以獲得使用Web UI和代理訪問REST API來構建混合應用程序的指南。 這是我們建議使用以下方法的應用的方法 Player Management API 在生產環境中也是如此,因為它更安全,因此不會通過HTTP連接發送任何憑據。

基本身份驗證

在分步中: Player 您使用curl語句與API進行交互的管理文檔。 進行API調用後,系統會提示您輸入密碼。 儘管這對於curl非常有效,但是在構建應用程序時這種交互式身份驗證是不可行的。

您可以在構建應用程序時使用基本身份驗證。 在標頭中,您需要發送憑據,並以64位編碼的ASCII字符串加密。 您可以使用JavaScript btoa() 進行編碼的方法。 假設 account_usernameaccount_password 從(例如)表單填充時,Authorization標頭將顯示如下:

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

AJAX的

這些示例將使用JavaScript與API通信,而不是使用curl語句。 這意味著使用AJAX將請求發佈到API。 一個特定的示例請求可能看起來像這樣:

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

關聯的 successerror 處理程序可能看起來像這樣:

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

當然,您不想像上面所示那樣對AJAX調用中的所有信息進行硬編碼,因此有意義的是將實際調用抽象為可重用的函數,如下所示:

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

然後您就可以調用該函數了。 在以下示例中 account_id, account_passwordaccount_username 值都是從表單中提取的。

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

如果您已完成分步操作: Player 您知道管理文檔中某些流程需要多個API調用,例如創建和發布 player。 另外,某些應用程序的邏輯可能需要多個API調用,例如獲取所有列表 player顯示,然後刪除 players被標記的用戶。 在這些情況下,您很可能需要更改您的 success 處理程序根據剛剛成功執行的調用執行不同的邏輯。 在這些示例應用中,將使用標誌變量來實現這些用例的實現邏輯, callPurposecase 使用該標誌的語句,如下所示:

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

沒有jQuery的AJAX

如果您不想使用jQuery,則進行AJAX請求會稍微複雜一點,但不會太多。 這是一些示例代碼,帶有註釋,可以幫助您入門:

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

頁面最後更新於12年2020月XNUMX日