JavaScriptからForce.com REST APIへアクセス
＊このエントリーは「外部のphpからREST APIでForce.comにアクセスすためのOAuth Toolkit」の続きです。
JavaScriptからForce.com REST APIを使うにはForce.com JavaScript REST API Toolkitを使うのが近道です。今回は前回の外部php環境にこのToolkitを組み込んでみます。
本来はブラウザにダウンロードされたJavaScriptから直接リソースサーバ（Force.comでAPIを受けつけてデータアクセスを提供しているサーバ）にRESTアクセスできれば良いのですが、ブラウザのセキュリティ上そのままでは実行できません。ひとつの解はphp実行環境をプロキシとして利用することです。この形態であれば問題なくAPIにアクセスすることができます。
Force.com JavaScript REST API Toolkitではこの形態をサポートするためのproxy.phpを提供しています。これはphp実行環境に置いておけばそれだけでプロキシとして動作してくれるというなんとも便利なシロモノです。
まずはこのファイルをGithubからダウンロードしてドキュメントルート直下に配置します。
$ export DOCUMENT_ROOT='/srv/nginx/html/test'
[なんらかの方法でproxy.phpをダウンロード]
$ ls ${DOCUMENT_ROOT}/
proxy.php
次にToolkitの本体であるforcetk.jsをダウンロードして同じくドキュメントルート直下に配置します。
[なんらかの方法でforcetk.jsをダウンロード]
$ ls ${DOCUMENT_ROOT}/
forcetk.js
proxy.php
次にHTMLを生成してその中でforcetk.jsを読み込みます。また、forcetk.jsはjQueryを使用しているためjQueryも同様に読み込ませます。そして今回はAccountレコードを作成するJavaScriptを実装します。これらのHTML生成からJavaScriptライブラリの読み込み、Accountレコード作成処理までをindex.phpの中に記述していきます。(OAuthによる認証部分は実装されているものとします）
$ vi ${DOCUMENT_ROOT}/index.php
<?php
session_start();
if (!isset($_SESSION['access_token']) || !isset($_SESSION['instance_url'])) {
$_SESSION['oauth_return'] = $_SERVER['PHP_SELF'];
header( 'Location: oauth/oauth.php' );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
</head>
<body>
<div id='account_form'>
<input type='text' name='account_name' />
<input type='button' value='create new account' />
</div>
<!--jQueryをロード-->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<!--forcetk.jsをロード-->
<script src="forcetk.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $client_id = "[あなたのConsumer ID]";
var $proxy_url = "https://[あなたのWebサーバ]/proxy.php?mode=native";
// REST APIアクセスを抽象化するWrapperを初期化
var client = new forcetk.Client($client_id, null, $proxy_url);
// セッション情報をセット
client.setSessionToken('<?php echo $_SESSION["access_token"]; ?>', null, '<?php echo $_SESSION["instance_url"]; ?>');
$('#account_form :button').click(function(){
var $account_name = $('#account_form :text').attr('value');
// createメソッドでAccountレコードを作成。第一引数はオブジェクト名。第二引数はフィールド。第三引数は成功時のコールバック。第四引数はエラー時のコールバック。
client.create(
"Account",
{"Name":$account_name},
function(response){ alert('Success!'); },
function(jqXHR){ alert(jqXHR.responseText); }
);
});
});
</script>
</body>
</html>
ブラウザでWebサーバにアクセスし、フォームにAccountの名前を入力してボタンを押せばAjaxでAccount Recordの作成が実行されます。成功すればアラートウィンドが開き”Success!”と表示されるはずです。
Force.comの組織にログインして実際にAccountが作成されているか確認してみてください。
このToolkitの詳細なリファレンスに関してはドキュメントは見当たらなかったのですが、forcetk.jsを覗けば大体見当はつくと思います。