y12studio · April 10, 2014 05:03
diff --git a/jsbin.hufar.html b/jsbin.hufar.html
 <!DOCTYPE html>
 <html>
  <head>
 <meta name="description" content="Dreamhost Object swift auth and CORS" />
    <title>Test DH Object Swift Auth</title>
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <link href="http://getbootstrap.com/dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <!-- ref https://gist.github.com/adrian/2571090 -->
    <script src="http://code.jquery.com/jquery.min.js"></script>
  </head>
  <body>
    <h3><a href="http://stackoverflow.com/questions/17333013/jquery-ajax-post-request-throws-405-method-not-allowed-on-restful-wcf">web services - jQuery .ajax() POST Request throws 405 (Method Not Allowed) on RESTful WCF - Stack Overflow</a></h3>
    <h3 class="bg-danger">RESULT: DH Object auth CORS not work</h3>
    
    <div style="border: thin solid grey; padding-left: 10px; width: 50%; margin-left: auto; margin-right: auto">
      <h2>Authentication</h2>
 
      <p>
        X-Auth-User:<br>
        <input id="userid" type="text" value="test:tester">
      </p>
    
      <p>
        X-Auth-Key:<br>
        <input id="password" type="text" value="testing">
        </p>
 
      <p>
        Auth URL:<br>
        <input id="auth_url" type="text" size="48" value="https://objects.dreamhost.com/auth">
      </p>
 
      <p>
        <input id="auth" type="button" value="Authenticate" onclick="authenticate()">
      </p>
    </div>
 
    <br>
 
    <div style="border: thin solid grey; padding-left: 10px; width: 50%; margin-left: auto; margin-right: auto">
      <h2>Authentication Results</h2>
 
      <p>
        <b>Result</b>: <span id="auth_result"></span>
      </p>
 
      <div id="auth-headers" style="margin-bottom: 10px">
        <b>Token</b>: <span id="auth_token"></span><br>
        <b>Storage URL</b>: <span id="service_url"></span>
      </div>
 
      <p>
        <input id="get_buckets" type="button" value="Get Buckets" onclick="getBuckets()" disabled="true">
      </p>
 
    </div>
 
    <br>
 
    <div style="border: thin solid grey; padding-left: 10px; width: 50%; margin-left: auto; margin-right: auto">
      <h2>Buckets</h2>
 
      <ul id="buckets">
      </ul>
 
    </div>
 
    <script type="text/javascript">
      var service_url;
      var auth_token;
 
      function authenticate() {
          var userid = document.getElementById('userid').value
          var password = document.getElementById('password').value
          var auth_url = document.getElementById('auth_url').value
 
          var request = new XMLHttpRequest();
          request.open('GET', auth_url);
          request.setRequestHeader('X-Auth-User', userid);
          request.setRequestHeader('X-Auth-Key', password);
          request.onreadystatechange = function (oEvent) {
              if (request.readyState === 4) {  
                  auth_result_elem = document.getElementById('auth_result')
                  if (request.status === 200) {
                      auth_result_elem.innerHTML = 'Successful';
                      auth_result_elem.style.color = 'green';
 
                      auth_token = request.getResponseHeader('X-Auth-Token')
                      auth_token_elem = document.getElementById('auth_token')
                      if (auth_token != null) {
                          auth_token_elem.innerHTML = auth_token
                          auth_token_elem.style.color = 'green';
                      } else {
                          auth_token_elem.innerHTML = "Either the header wasn't returned or the browser can't read it."
                          auth_token_elem.style.color = 'red';
                      }
 
                      service_url = request.getResponseHeader('X-Storage-Url')
                      service_url_elem = document.getElementById('service_url')
                      if (service_url != null) {
                          service_url_elem.innerHTML = service_url
                          service_url_elem.style.color = 'green';
                      } else {
                          service_url_elem.innerHTML = "Either the header wasn't returned or the browser can't read it."
                          service_url_elem.style.color = 'red';
                      }
 
                      document.getElementById('get_buckets').disabled = false;
                  } else {
                      auth_result_elem.innerHTML = 'Failed ' + request.responseText;
                      auth_result_elem.style.color = 'red';
                  }
              }  
          };
          request.send(null);
      };
 
      function getBuckets() {
          var request = new XMLHttpRequest();
          request.open('GET', service_url + "?format=json");
          request.setRequestHeader('X-Auth-Token', auth_token);
          request.onreadystatechange = function (oEvent) {
              if (request.readyState === 4) {
                  if (request.status === 200) {
                      // clear bucket list
                      var ul = document.getElementById('buckets')
                      while (ul.childNodes.length >= 1) {
                          ul.removeChild(ul.firstChild);
                      }
 
                      // populate the list of buckets
                      var buckets = jQuery.parseJSON(request.responseText)
                      for (var i = 0; i < buckets.length; i++) {
                          var bucket = buckets[i];
                          var li = document.createElement('li');
                          li.innerHTML = bucket.name + ", " + bucket.count + ", " + bucket.bytes;
                          ul.appendChild(li);
                      }
                  }
              }
          };
          request.send(null);
      };
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Dreamhost Object swift auth and CORS" />
	<title>Test DH Object Swift Auth</title>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="http://getbootstrap.com/dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
	<!-- ref https://gist.github.com/adrian/2571090 -->
	<script src="http://code.jquery.com/jquery.min.js"></script>
	</head>
	<body>
	<h3><a href="http://stackoverflow.com/questions/17333013/jquery-ajax-post-request-throws-405-method-not-allowed-on-restful-wcf">web services - jQuery .ajax() POST Request throws 405 (Method Not Allowed) on RESTful WCF - Stack Overflow</a></h3>
	<h3 class="bg-danger">RESULT: DH Object auth CORS not work</h3>

	<div style="border: thin solid grey; padding-left: 10px; width: 50%; margin-left: auto; margin-right: auto">
	<h2>Authentication</h2>

	<p>
	X-Auth-User:<br>
	<input id="userid" type="text" value="test:tester">
	</p>

	<p>
	X-Auth-Key:<br>
	<input id="password" type="text" value="testing">
	</p>

	<p>
	Auth URL:<br>
	<input id="auth_url" type="text" size="48" value="https://objects.dreamhost.com/auth">
	</p>

	<p>
	<input id="auth" type="button" value="Authenticate" onclick="authenticate()">
	</p>
	</div>

	<br>

	<div style="border: thin solid grey; padding-left: 10px; width: 50%; margin-left: auto; margin-right: auto">
	<h2>Authentication Results</h2>

	<p>
	<b>Result</b>: <span id="auth_result"></span>
	</p>

	<div id="auth-headers" style="margin-bottom: 10px">
	<b>Token</b>: <span id="auth_token"></span><br>
	<b>Storage URL</b>: <span id="service_url"></span>
	</div>

	<p>
	<input id="get_buckets" type="button" value="Get Buckets" onclick="getBuckets()" disabled="true">
	</p>

	</div>

	<br>

	<div style="border: thin solid grey; padding-left: 10px; width: 50%; margin-left: auto; margin-right: auto">
	<h2>Buckets</h2>

	<ul id="buckets">
	</ul>

	</div>

	<script type="text/javascript">
	var service_url;
	var auth_token;

	function authenticate() {
	var userid = document.getElementById('userid').value
	var password = document.getElementById('password').value
	var auth_url = document.getElementById('auth_url').value

	var request = new XMLHttpRequest();
	request.open('GET', auth_url);
	request.setRequestHeader('X-Auth-User', userid);
	request.setRequestHeader('X-Auth-Key', password);
	request.onreadystatechange = function (oEvent) {
	if (request.readyState === 4) {
	auth_result_elem = document.getElementById('auth_result')
	if (request.status === 200) {
	auth_result_elem.innerHTML = 'Successful';
	auth_result_elem.style.color = 'green';

	auth_token = request.getResponseHeader('X-Auth-Token')
	auth_token_elem = document.getElementById('auth_token')
	if (auth_token != null) {
	auth_token_elem.innerHTML = auth_token
	auth_token_elem.style.color = 'green';
	} else {
	auth_token_elem.innerHTML = "Either the header wasn't returned or the browser can't read it."
	auth_token_elem.style.color = 'red';
	}

	service_url = request.getResponseHeader('X-Storage-Url')
	service_url_elem = document.getElementById('service_url')
	if (service_url != null) {
	service_url_elem.innerHTML = service_url
	service_url_elem.style.color = 'green';
	} else {
	service_url_elem.innerHTML = "Either the header wasn't returned or the browser can't read it."
	service_url_elem.style.color = 'red';
	}

	document.getElementById('get_buckets').disabled = false;
	} else {
	auth_result_elem.innerHTML = 'Failed ' + request.responseText;
	auth_result_elem.style.color = 'red';
	}
	}
	};
	request.send(null);
	};

	function getBuckets() {
	var request = new XMLHttpRequest();
	request.open('GET', service_url + "?format=json");
	request.setRequestHeader('X-Auth-Token', auth_token);
	request.onreadystatechange = function (oEvent) {
	if (request.readyState === 4) {
	if (request.status === 200) {
	// clear bucket list
	var ul = document.getElementById('buckets')
	while (ul.childNodes.length >= 1) {
	ul.removeChild(ul.firstChild);
	}

	// populate the list of buckets
	var buckets = jQuery.parseJSON(request.responseText)
	for (var i = 0; i < buckets.length; i++) {
	var bucket = buckets[i];
	var li = document.createElement('li');
	li.innerHTML = bucket.name + ", " + bucket.count + ", " + bucket.bytes;
	ul.appendChild(li);
	}
	}
	}
	};
	request.send(null);
	};
	</script>
	</body>
	</html>