[ConoHa API] JavaScriptでサーバ一覧を取得する

方針

トークンは一度発行すると15時間有効です。なので、トークンが必要なAPIを使用するたびに発行するのではなく、一度発行したらそれを保存して再利用します。

保存先は以下のローカルストレージとします。

window.localStorage['token']

JSONアクセス

JSONにアクセスする部分は以下ような関数にまとめてしまいます。

//
// JSON access
//
var access = function(url, data, type, onSuccess) {
    $.ajax({
      url: url,
      data: JSON.stringify(data),
      type: type,
      headers: {
        'X-Auth-Token' : window.localStorage['token']
      },
      success: onSuccess,
      error: function() {
        console.log('$.ajax error');
      }
    });
}

引数でAPIごとに異なる情報 (url, POSTデータ, POST/GET, 成功時の処理)を渡します。また、トークンはローカルストレージから読み込んでいます。

ローカルストレージに値がないとき、X-Auth-Tokenが空となってしまいますが、APIは正常に処理されるようです。

token API

access関数に以下の情報を渡すことでトークンを発行します。

//
// token API information
//
var token_url = "https://identity.tyo1.conoha.io/v2.0/tokens";
var token_data = {
  "auth": {
    "passwordCredentials": {
      "username": user_id,
      "password": password,
  },
  "tenantId": tenant_id
  }
};
var token_type = "POST";
var tokenOnSuccess = function(data) {
  $('#output').text(JSON.stringify(data));
  window.localStorage['token'] = data.access.token.id;
}

渡し方はこんなかんじです。

access(token_url, token_data, token_type, tokenOnSuccess);

servers API

tokenと同様に実装していきます。

//
// servers API information
//
var servers_url = "https://compute.tyo1.conoha.io/v2/" + tenant_id + "/servers";var servers_data = {};
var servers_type = "GET";
var serversOnSuccess = function(data) {
  $('#output').text(JSON.stringify(data));
}

同様にこんな風にアクセスします。

access(servers_url, servers_data, servers_type, serversOnSuccess);  

ロード時に情報取得

html起動時にtokenおよびservers APIにアクセスし、情報を取得します。

//
// Run on load
//
$(function(){
  if (window.localStorage['token'] === undefined) {
    access(token_url, token_data, token_type, tokenOnSuccess);
  } else {
    access(servers_url, servers_data, servers_type, serversOnSuccess);  
  }
});

ローカルストレージにトークンが入っていないときはtoken API、入っているときはservers APIにアクセスします。

実行

まず一回目の起動で以下の様な画面になります。token APIにアクセスしてローカルストレージにトークンが保存されている様子がわかります。

一度リロードすると以下の様な画面になります。サーバ情報が取得できていますね！

動作するサンプルコードはここにあります。

改善点

一度リロードしないとサーバ一覧が出ないのは不便です。また、トークンが期限切れしたり、誤った値が入ってしまった時に削除する機能も必要です。

次回はこの辺りを修正しようと思います。