Google plus API using OAuth.io
HTML
<script src="https://oauth.io/auth/download/latest/oauth.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<input type="button" id="saveBtn" onclick="ShowDriveFileList();" value="Print file list">
CSS
#connect {
text-align: center;
padding-top: 15px
}
#connect p {
color: #AAA;
margin-top: 20px
}
#res {
display: none
}
.panel {
width: 500px;
margin: 10px auto;
}
#info, .activity-author-info {
position: relative;
left: 10px;
width: calc(100% - 45px);
}
#info p, .activity-author-info p {
font-size: 0.9em
}
/* spinner by @tobiasahlin: http://tobiasahlin.com/spinkit/ */
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 20px auto;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes bounce {
0%, 100% {
transform: scale(0.0)
}
50% {
transform: scale(1.0)
}
}
JavaScript
// This only works because we're set to "No wrap - in <head>"
function ShowDriveFileList() {
var accessToken;
// Initialize OAuth with our key
OAuth.initialize('lmGlb8BaftfF4Y5en_c8XYOSq2A');
// Connect to google drive, and print out file list
OAuth.popup('google_drive').done(function (result) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "https://www.googleapis.com/drive/v2/files", false);
xmlHttp.setRequestHeader("Authorization", "Bearer " + result.access_token);
xmlHttp.send(null);
alert(xmlHttp.responseText);
}).fail(function (err) {
alert(err);
});;
}