지원 지원 문의 | 시스템 상태 시스템 상태
페이지 내용

    설정 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 일에 마지막으로 업데이트 된 페이지