지원 지원 문의 | 시스템 상태 시스템 상태

설정 Player 관리 샘플

이 페이지는 새로운 예제의 기본 샘플을 설명합니다 player 작성되었습니다. 여기에는 기본 인증 및 AJAX 사용 방법에 대한 세부 정보가 포함됩니다. Player Management API 견본.

소개

단계별로 : Player curl 문을 사용하여 API와 상호 작용하는 관리 문서 API 호출이 완료되면 대화식으로 비밀번호를 입력하라는 프롬프트가 표시됩니다. 이것은 컬에 효과적이지만, 이러한 종류의 대화 형 인증은 응용 프로그램을 빌드 할 때 실현 가능하지 않습니다.

여기에서는 JavaScript 및 XMLHttpRequest (AJAX라고도 함)를 사용하여 웹 클라이언트를 빌드하는 API 요청을 작성하는 방법에 대해 학습합니다. player 관리 운영

때문에 Player Management API is CORS 지원 Brightcove 로그인 자격 증명을 사용하여 기본 인증을 허용하므로 웹 페이지에서 직접 API 요청을 할 수 있습니다. Player Management API 견본. Brightcove의 다른 RESTful API를 통해 인증이 필요합니다 OAuth를. 액세스 토큰을 검색하는 데 사용 된 API는 CORS를 사용할 수 없으며 API 자체이기 때문에 서버 측 응용 프로그램을 통해 요청해야합니다. 만나다 REST API 사용 REST API에 액세스하기 위해 웹 UI와 프록시를 사용하여 하이브리드 응용 프로그램을 작성하는 방법에 대한 안내서입니다. 이는 Google에서 권장하는 접근 방식입니다. Player Management API 프로덕션 환경에서도 HTTP 연결을 통해 자격 증명을 보내지 않는 것이 더 안전하기 때문에

기본 인증

단계별로 : Player curl 문을 사용하여 API와 상호 작용하는 관리 문서 API 호출이 완료되면 대화식으로 비밀번호를 입력하라는 프롬프트가 표시됩니다. 이것은 컬에 효과적이지만, 이러한 종류의 대화 형 인증은 응용 프로그램을 빌드 할 때 실현 가능하지 않습니다.

앱을 만들 때 기본 인증을 사용할 수 있습니다. 헤더에서 기본 64 인코딩 ASCII 문자열로 암호화 된 자격 증명을 보내야합니다. 자바 스크립트를 사용할 수 있습니다. btoa() 메서드를 사용하여 인코딩을 수행합니다. 가정 account_usernameaccount_password 예를 들어 양식에서 채워지면 인증 헤더는 다음과 같이 나타납니다.

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

AJAX

curl 문을 사용하는 대신이 샘플은 API와 통신하기 위해 JavaScript를 사용합니다. 이것은 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 호출이 필요할 수 있습니다. players 표시 후 삭제 player사용자가 표시했습니다. 이 경우 대부분 변경해야 할 것입니다 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 일에 마지막으로 업데이트 된 페이지