入門
ステップバイステップで:API と対話するために curl ステートメントを使用したプレーヤー管理ドキュメント。API 呼び出しが行われると、対話的にパスワードの入力を求められました。これはカールにはうまく機能しますが、アプリケーションの構築時にはこのような対話型認証は実行できません。
ここでは、JavaScriptとXMLHttpRequest（AJAXとも呼ばれます）を使用してAPIリクエストを作成し、プレーヤー管理操作用のWebクライアントを構築する方法を学習します。
Player ManagementAPIはCORS対応また、Brightcoveログイン資格情報を使用した基本認証が可能であるため、Player Management APIサンプルの場合と同様に、Webページから直接APIリクエストを行うことができます。Brightcoveの他のRESTfulAPIには、 OAuth。アクセストークンの取得に使用されるAPIはCORS対応ではないため（API自体も対応していないため）、サーバー側のアプリを介してリクエストを行う必要があります。見るRESTAPIの使用 RESTAPIにアクセスするためのWebUIとプロキシを使用してハイブリッドアプリを構築するためのガイド。これは、本番環境でもPlayer Management APIを使用するアプリに推奨されるアプローチです。これは、HTTP接続を介して認証情報を送信しないため、より安全であるためです。
基本認証
ステップバイステップで:API と対話するために curl ステートメントを使用したプレーヤー管理ドキュメント。API 呼び出しが行われると、対話的にパスワードの入力を求められました。これはカールにはうまく機能しますが、アプリケーションの構築時にはこのような対話型認証は実行できません。
アプリを作成するときに基本認証を使用できます。ヘッダーでは、Base64でエンコードされたASCII文字列で暗号化された資格情報を送信する必要があります。JavaScriptを使用できますbtoa()エンコードを行う方法。仮定account_usernameそしてaccount_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
});
関連successそしてerrorハンドラーは次のようになります。
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_passwordそしてaccount_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);
};
ステップバイステップを完了した場合：プレーヤーの作成や公開など、一部のプロセスで複数のAPI呼び出しが必要になることを知っているプレーヤー管理ドキュメント。また、一部のアプリのロジックでは、表示するすべてのプレーヤーのリストを取得し、ユーザーがマークしたプレーヤーを削除するなど、複数のAPI呼び出しが必要になる場合があります。このような場合、おそらく変更する必要があります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();
}
}