hellojs-xiaotian
Version:
A clientside Javascript library for standardizing requests to OAuth2 web services (and OAuth1 - with a shim)
105 lines (85 loc) • 2.89 kB
HTML
<link rel="stylesheet" href="/adorn/adorn.css"/>
<script src="/adorn/adorn.js" async></script>
<script src="client_ids.js"></script>
<h1>Upload Photo w/ hello.js</h1>
<h2>Please signin to gather a list of Albums you already have created</h2>
<button id="windows" onclick="hello.login('windows');">Login Windows</button>
<button id="facebook" onclick="hello.login('facebook');">Login Facebook</button>
<button id="google" onclick="hello.login('google');">Login Google</button>
<h2>Upload form</h2>
<form>
<label>Please select an album from the dropdown<select id="albums"></select></label>
<input type="file" id="file"/>
<button type="button" onclick="upload()">Upload</button>
</form>
<div id="result"></div>
<p>Include hello.js + modules</p>
<script class="pre" src="../src/hello.js"></script>
<script class="pre" src="../src/modules/windows.js"></script>
<script class="pre" src="../src/modules/facebook.js"></script>
<script class="pre" src="../src/modules/google.js"></script>
<p>Add event listeners for the login completed event and make a request for the users profile. Once that's loaded push it to the page. </p>
<script class="pre">
// Windows Live
hello.on('auth.login', function(auth){
// Get Profile
var hi = hello(auth.network);
hi.api('me').then(function(r){
document.getElementById(auth.network).innerHTML = "Connected to "+auth.network+" as " + r.name;
}, function(e){
console.error(e);
});
// Get albums
hi.api('me/albums').then(function(r){
var grp = document.createElement('optgroup');
grp.label = auth.network;
document.getElementById('albums').appendChild(grp);
for(var i=0;i<r.data.length;i++){
var o = document.createElement('option');
o.value = auth.network+","+ ( r.data[i].upload_location || r.data[i].id );
o.innerHTML = r.data[i].name;
grp.appendChild(o);
}
}, function(){
console.error("Could not open albums from "+auth.network+", try resigning in");
});
});
</script>
<script class="pre">
function upload(){
var a = document.getElementById('albums').value.split(',');
var network = a[0];
var path = a[1];
hello(network).api(path, 'post', {
file: document.getElementById('file')
}).then(function(r){
if(r.source){
// Windows we get a reference
var a = document.createElement('a');
a.href = r.source;
a.innerHTML = r.name;
}
else{
// Facebook we dont get a response.
var a = document.createElement('a');
a.innerHTML = "Uploaded "+document.getElementById('file').value;
if(r.picture){
a.href = r.picture;
}
}
a.target = "_blank";
document.getElementById('result').appendChild(a);
}, function(r) {
alert(r.error.message);
});
}
</script>
<p>Plug the app keys (client_id') and voila</p>
<script class="pre">
// Initiate hellojs
hello.init( CLIENT_IDS, {
scope: "publish_files, photos",
redirect_uri : "../redirect.html"
});
</script>