hellojs-xiaotian
Version:
A clientside Javascript library for standardizing requests to OAuth2 web services (and OAuth1 - with a shim)
630 lines (527 loc) • 15.7 kB
HTML
<link rel="stylesheet" href="/adorn/adorn.css"/>
<script src="/adorn/adorn.js" async></script>
<script src="client_ids.js"></script>
<title>Simple SkyDrive Demo</title>
<style>
img{
position: fixed;
top:0;
left:50%;
width:200px;
border:1px solid #ccc;
padding:10px;
}
img:nth-child(2n){
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}
img:nth-child(3n){
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}
</style>
<h1>Simple Skydrive demo</h1>
<blockquote>
<p>This demo uses OAuth2 and CORS (or JSONP) to make some REST calls which navigate the Windows Live Graph API to get some photos out of Skydrive. It is PLUGIN-FREE!</p>
<p>If running locally, <a href="http://manage.dev.live.com/">register your development domain</a> and replace WINDOWS_CLIENT_ID (below) with the client_id you are assigned</p>
</blockquote>
<p>Start by logging in <button onclick="login()">Login</button></p>
<blockquote>
<b>1. Create an Album</b>
<form>
<label>Album name </label>
<input type="text" id="new_name" name="name" value="New Album Name"/>
<br />
<label>Album description </label>
<textarea id="new_description" name="description">This is a test album</textarea>
<button type="button" onclick="createAlbum(this.form)">Upload</button>
</form>
<b>2. Select a file</b>
<form>
<input type="file" name="file" id="file"/>
</form>
</br>
<b>pick an album as the destination</b>
<select id="select"></select>
</br>
<button onclick="postPhoto( select.value, document.getElementById('file').form )">Upload</button>
<button onclick="xhrUpload( select.value, document.getElementById('file').files[0] )">Upload XHR</button>
<div id="result"></div>
</blockquote>
<script>
function login(){
window.location = 'https://oauth.live.com/authorize'+
'?client_id='+WINDOWS_CLIENT_ID+
'&scope=wl.skydrive_update'+
'&response_type=token'+
'&redirect_uri='+encodeURIComponent(window.location.href);
}
var access_token = (window.location.hash||window.location.search).match(/access_token=([^&]+)/);
if(access_token){
// Save the first match
localStorage.setItem("access_token", decodeURIComponent(access_token[1]));
}
var json_counter=0;
function jsonp(path,callback){
// Make the anonymous function. not anonymous
var callback_name = 'jsonp_' + json_counter++;
window[callback_name] = callback;
// Add the callback name to the path
path = path.replace(/\=\?/, '='+callback_name);
// find a place to insert the script tag
var sibling = document.getElementsByTagName('script')[0];
// Create the script tag
var script = document.createElement('script');
script.src = path;
sibling.parentNode.insertBefore(script,sibling);
}
//
// Param
// Explode/Encode the parameters of an URL string/object
// @param string s, String to decode
//
function _param(s){
var b,
a = {},
m;
if(typeof(s)==='string'){
m = s.replace(/^[\#\?]/,'').match(/([^=\/\&]+)=([^\&]+)/g);
if(m){
for(var i=0;i<m.length;i++){
b = m[i].split('=');
a[b[0]] = decodeURIComponent( b[1] );
}
}
return a;
}
else {
var o = s;
a = [];
for( var x in o ){if(o.hasOwnProperty(x)){
if( o.hasOwnProperty(x) ){
a.push( [x, o[x] === '?' ? '?' : encodeURIComponent(o[x]) ].join('=') );
}
}}
return a.join('&');
}
}
</script>
<p>This is the crux of what this demo is showing. postPhoto uploads the file selected in the file input element to the path of the album. It then creates an anchor tag to the uploaded file.</p>
<script>
function createAlbum(form){
var token = localStorage.getItem("access_token");
if(token){
httpRequest( "POST", 'https://apis.live.net/v5.0/me/albums?access_token='+token,
{
name: form.elements['name'].value,
description: form.elements['description'].value
},
function(r){
if(!r||r.error){
alert(r.error.message);
return;
}
var opt = document.createElement('option');
opt.value=this.upload_location;
opt.innerHTML = this.name;
document.getElementById('select').appendChild(opt);
});
}
else{
alert("Please click the login button first");
}
}
</script>
<script class="pre">
function postPhoto(path, fileInputElement){
var token = localStorage.getItem("access_token");
if(token){
// Post a photo up
httpRequest( "POST", path + '?access_token=' + token, {
file : fileInputElement
}, function(r){
console.log(r);
var a = document.createElement('a');
a.href = r.source;
a.innerHTML = r.name;
a.target = "_blank";
document.getElementById('result').appendChild(a);
}, function(e){
console.log("PROGRESS");
console.log(e);
});
}
else{
alert("Please click the login button first");
}
}
</script>
<script>
function xhrUpload(path, file){
var token = localStorage.getItem("access_token");
// Initiate XML Instance
var xhr = new XMLHttpRequest();
xhr.onload = xhr.onerror = function(e){
var text = xhr.responseText;
console.log(text?JSON.parse(text):{error:{message:"Post Failed"}});
};
xhr.open("POST", path + '?access_token=' + token, true);
var fd = new FormData();
fd.append('file', file);
xhr.send( fd );
}
</script>
<script class="pre">
function xhrRequest(method, url, data, complete, progress){
var xhr = new XMLHttpRequest();
// xhr.responseType = "json"; // is not widely supported as yet
xhr.onload = function(e){
var text = xhr.responseText;
complete(text?JSON.parse(text):{error:{message:"Could not get resource"}});
};
xhr.onerror = function(e){
var text = xhr.responseText;
complete(text?JSON.parse(text):{error:{message:"Post failed"}})
};
xhr.onprogress = progress;
xhr.open(method, url, true);
if(data){
// Windows unique, convert to a JSON string if this contains binary data
if(!has_binary(data)){
data = JSON.stringify(data);
xhr.setRequestHeader("Content-Type", 'application/json');
}
// Create FormData
else if(!(data instanceof FormData)){
// Loop through and add formData
var f = new FormData();
for( var x in data )if(data.hasOwnProperty(x)){
f.append(x, data[x]);
}
data = f;
}
}
xhr.send( data || null );
}
</script>
<script class="pre">
function httpRequest(method, url, data, complete, progress){
var p = {
data : data
}
if( p.data && !_dataToJSON(p) ){
iframeHack(url, p.data, callback);
return;
}
data = p.data;
// IE10, FF, Chrome
if('withCredentials' in new XMLHttpRequest()){
xhrRequest( method, url, data, complete, progress );
}
else{
// windows convert POST to GET
// This perhaps isn't that great
var qs;
if( data ){
data.method = 'post';
qs = data;
data=null;
}
// Else add the callback on to the URL
if(!data){
jsonp(url+(qs?'&'+_param(qs):'')+"&callback=?", complete);
}
else{
iframeHack(url, data, complete);
}
}
}
//
// Some of the providers require that only MultiPart is used with non-binary forms.
// This function checks whether the form contains binary data
function has_binary(data){
if(("FormData" in window && data instanceof FormData)||
("File" in window && data instanceof File)||
("Blob" in window && data instanceof Blob)
){
return true;
}
for(var x in data ) if(data.hasOwnProperty(x)){
if( data[x] instanceof HTMLElement && data[x].type === 'file' ){
return true;
}
}
return false;
}
</script>
<p>IFrameHack</p>
<script class="pre">
// user out little helped function to read the parameters
var qs = _param(window.location.hash);
// If there exists a state and a result in the hashtag then we need to call these on the parent.
// Result is serialized JSON string.
if(qs&&qs.state&&qs.result){
// trigger a function in the parent
window.parent[qs.state](JSON.parse(qs.result));
}
</script>
<p>This Form+iFrame+hash hack lets us attach a number of different data types to be posted.</p>
<ul>
<li>InputElement: Post a single input element within a form
<li>InputForm: Post an entire form and all its values
<li>JSON: Turn a JSON key=>value or a key=>InputElement hash into a form post
</ul>
<script class="pre">
function iframeHack(url, data, callback){
// This hack needs a form
var form = null,
reenableAfterSubmit = [],
newform;
// What is the name of the callback to contain
// We'll also use this to name the iFrame
var state = "ifrmhack_"+parseInt(Math.random()*1e6).toString(16);
// Save the callback to the window
window[state] = function(r){
try{
// remove the iframe from the page.
win.parentNode.removeChild(win);
// remove the form
if(newform){
newform.parentNode.removeChild(newform);
}
}
catch(e){console.error("could not remove iframe")}
// reenable the disabled form
for(var i=0;i<reenableAfterSubmit.length;i++){
if(reenableAfterSubmit[i]){
reenableAfterSubmit[i].setAttribute('disabled', false);
}
}
// fire the callback
callback(r);
}
// Build the iframe window
var win = document.createElement('iframe');
win.id = state;
win.name = state;
win.height = "1px";
win.width = "1px";
document.body.appendChild(win);
// Add some additional query parameters to the URL
url += "&suppress_response_codes=true&redirect_uri="+encodeURIComponent(window.location.href.replace(/#.*$/,'')) +"&state="+state;
// if we are just posting a single item
if(data instanceof HTMLInputElement){
// get the parent form
var form = data.form;
// Loop through and disable all of its siblings
for( var i = 0; i < form.elements.length; i++ ){
if(form.elements[i] !== data){
form.elements[i].setAttribute('disabled',true);
}
}
// Move the focus to the form
data = form;
}
// Posting a form
if(data instanceof HTMLFormElement){
// This is a form element
var form = data;
// Does this form need to be a multipart form?
for( var i = 0; i < form.elements.length; i++ ){
if(!form.elements[i].disabled && form.elements[i].type === 'file'){
form.setAttribute('enctype', 'multipart/form-data');
form.elements[i].setAttribute('name', 'file');
}
}
}
else{
// Its not a form element,
// Therefore it must be a JSON object of Key=>Value or Key=>Element
// If anyone of those values are a input type=file we shall shall insert its siblings into the form for which it belongs.
for(var x in data) if(data.hasOwnProperty(x)){
// is this an input Element?
if( data[x] instanceof HTMLInputElement && data[x].type === 'file' ){
form = data[x].form;
form.setAttribute('enctype', 'multipart/form-data');
}
}
// Do If there is no defined form element, lets create one.
if(!form){
// Build form
form = document.createElement('form');
form.height = "1px";
form.width = "1px";
document.body.appendChild(form);
newform = form;
}
// Add elements to the form if they dont exist
for(var x in data) if(data.hasOwnProperty(x)){
// Is this an element?
var el = ( data[x] instanceof HTMLInputElement || data[x] instanceof HTMLTextAreaElement || data[x] instanceof HTMLSelectElement );
// is this not an input element, or one that exists outside the form.
if( !el || data[x].form !== form ){
// Does an element have the same name?
if(form.elements[x]){
// Remove it.
form.elements[x].parentNode.removeChild(form.elements[x]);
}
// Create an input element
var input = document.createElement('input');
input.setAttribute('name', x);
input.value = data[x];
// Does it have a value attribute?
if(el){
input.value = data[x].value;
}
else if(el instanceof HTMLElement){
input.value = data[x].innerHTML || data[x].innerText;
}
form.appendChild(input);
}
// it is an element, which exists within the form, but the name is wrong
else if( el && data[x].name !== x){
data[x].setAttribute('name', x);
data[x].name = x;
}
}
// Disable elements from within the form if they weren't specified
for(var i=0;i<form.children.length;i++){
// Does the same name and value exist in the parent
if( !( form.children[i].name in data ) && form.children[i].getAttribute('disabled') !== true ) {
// disable
form.children[i].setAttribute('disabled',true);
// add re-enable to callback
reenableAfterSubmit.push(form.children[i]);
}
}
}
// Set the target of the form
form.setAttribute('method', 'post');
form.setAttribute('action', url);
form.setAttribute('target', state);
// Submit the form
setTimeout(function(){
form.submit();
},30);
}
</script>
<script>
//
//
//
function _dataToJSON(p){
var data = p.data;
// Is data a form object
if( data instanceof HTMLFormElement ){
// Get the first FormElement Item if its an type=file
var kids = data.children;
var json = {};
// Create a data string
for(var i=0;i<kids.length;i++){
// Is this a file, does the browser not support 'files' and 'FormData'?
if( kids[i].type === 'file' ){
// the browser does not XHR2
if("FormData" in window){
json = new FormData(data);
break;
}
else if( !("files" in kids[i]) ){
return false;
}
}
else{
json[ kids[i].name ] = kids[i].value || kids[i].innerHTML;
}
}
// Convert to a postable querystring
data = json;
}
// Is this a form input element?
if( data instanceof HTMLInputElement ){
// Get the Input Element
// Do we have a Blob data?
if("files" in data){
var o = {};
o[ data.name ] = data.files;
// Turn it into a FileList
data = o;
}
else{
// This is old school, we have to perform the FORM + IFRAME + HASHTAG hack
return false;
}
}
// Is data a blob, File, FileList?
if( ("File" in window && data instanceof File)
|| ("Blob" in window && data instanceof Blob)
|| ("FileList" in window && data instanceof FileList) ){
// Convert to a JSON object
data = {'file' : data};
}
// Loop through data if its not FormData it must now be a JSON object
if( !( "FormData" in window && data instanceof FormData ) ){
// Loop through the object
for(var x in data) if(data.hasOwnProperty(x)){
// FileList Object?
if("FileList" in window && data[x] instanceof FileList){
// Get first record only
if(data[x].length===1){
data[x] = data[x][0];
}
else{
console.error("We were expecting the FileList to contain one file");
}
}
else if( data[x] instanceof HTMLInputElement && data[x].type === 'file' ){
if( ("files" in data[x] ) ){
data[x] = data[x].files[0];
}
else{
// this does not support HTML5 forms FileList
return false;
}
}
else if( data[x] instanceof HTMLInputElement
&& data[x] instanceof HTMLSelectElement
&& data[x] instanceof HTMLTextAreaElement
){
data[x] = data[x].value;
}
else if( data[x] instanceof Element ){
data[x] = data[x].innerHTML || data[x].innerText;
}
}
}
p.data = data;
return true;
}
</script>
<script>
if(localStorage.getItem("access_token")){
// Token
var token = localStorage.getItem("access_token");
// Make httpRequest
// Retrieve all albums in SkyDrive
httpRequest("GET", 'https://apis.live.net/v5.0/me/albums?access_token='+token, null, function(r){
// Valid
if(!r||r.error){
alert("You have an error: "+r.error.message);
localStorage.removeItem("access_token");
return;
}
// Loop through the results
for(var i=0;i<r.data.length;i++){
var obj = r.data[i];
var opt = document.createElement('option');
opt.value = obj.upload_location;
opt.innerHTML = obj.name;
document.getElementById('select').appendChild(opt);
}
});
}
</script>