[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에 액세스합니다.

실행

우선 1회째의 기동으로 이하와 같은 화면이 됩니다. token API에 액세스하여 로컬 스토리지에 토큰이 저장되어 있는 모습을 알 수 있습니다.



한 번 다시 로드하면 다음과 같은 화면이 됩니다. 서버 정보를 얻을 수 있습니다!



작동하는 샘플 코드는 여기에 있습니다.

개선점

한 번 다시로드하지 않으면 서버 목록이 나타나지 않는 것이 불편합니다. 또한 토큰이 만료되거나 잘못된 값이 들어 버렸을 때 삭제하는 기능도 필요합니다.

다음 번에는 이 근처를 수정하려고 합니다.