サポート サポート問い合わせ先 | システムステータス システムステータス

セットアップ Player 管理サンプル

このページでは、新しい player 書かれています。 これには、基本認証の詳細と、AJAXが Player Management API 。)

概要

ステップバイステップ: Player curlステートメントを使用してAPIを操作する管理ドキュメント。 API呼び出しが行われたときに、パスワードを対話的に求められました。 これはcurlには有効ですが、この種のインタラクティブな認証は、アプリケーションを構築する場合には実行できません。

ここでは、JavaScriptとXMLHttpRequest(AJAXとも呼ばれる)を使用してAPIリクエストを作成し、Webクライアントを構築する方法を学びます player 管理業務

から Player Management API is CORS対応 また、Brightcoveのログイン認証情報を使用して基本認証を行うことができるため、Webページから直接APIリクエストを行うことができます。 Player Management API サンプル。 ブライトコーブの他のRESTful APIは、 OAuth。 アクセストークンを取得するために使用されるAPIはCORS対応ではなく(API自体でもないため)、サーバー側のアプリケーションから要求を行う必要があります。 見る REST APIの使用 REST APIにアクセスするためのWeb UIとプロキシを使用してハイブリッドアプリケーションを構築するためのガイドです。 これは、Googleが推奨するアプローチです 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

curlステートメントを使用する代わりに、これらのサンプルはJavaScriptを使用してAPIと通信します。 これは、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表示してから削除 playersマークされたユーザー。 これらのインスタンスでは、ほとんどの場合、 success ハンドラを使用して、どのコールが正常に実行されたかに基づいて異なるロジックを実行します。 これらのサンプルアプリケーションでは、これらのユースケースの実装ロジックはフラグ変数を使用して実装されますが、 callPurpose、と case 次のように、そのフラグを使用します。

    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日