Is it possible to access google api's (calendar v3) from a local html file (with javascript)? I want to open c:\temp\gsotto\gsotto.htm in my browser instead of serving the file through IIS.
It works if I serve my file from
http://localhost/
through a webserver. In the google api console i have a "Client ID for web applications" with:
Redirect URIs: http://localhost
JavaScript origins: http://localhost
and a "Simple api access" Key for browser apps (with referers)
Firebug shows me this when accessing through http://localhost/gsotto/gsotto.htm
GET http://localhost/gsotto/gsotto.htm
GET .js?onload=handleClientLoad
GET ....cb=gapi.loaded_0
GET /...-postmessagerelay.js
GET =.....&authuser=0
GET /....-postmessage.js
and this when access through c:\...
GET .js?onload=handleClientLoad
GET .....cb=gapi.loaded_0
GET /.....-postmessagerelay.js
and nothing more....
do i need to use other settings in the google api console for this to work?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
// google calendar id
var calId = "....";
var clientId = "..."; // oAuth2 webapp
var apiKey = "....";// Key for browser apps (with referers)
// google authentication scopes
var scopes = '';
//.readonly
// Use a button to handle authentication the first time.
function handleClientLoad() {
console.log('handleClientLoad');
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
console.log('checkAuth');
try {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
catch(e)
{
console.log('e');
console.log(e);
}
}
function handleAuthResult(authResult) {
console.log('handleAuthResult');
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
console.log('result ok');
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
console.log('authresult null or error');
console.log(authResult);
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
console.log('handleAuthClick');
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
function makeApiCall() {
console.log('makeApiCall');
gapi.client.load('calendar', 'v3', function() {
var request = gapi.client.calendar.events.list({
'calendarId': calId
});
request.execute(function(resp) {
console.log('result:');
console.log(resp);
for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(resp.items[i].summary));
document.getElementById('events').appendChild(li);
}
});
});
}
</script>
<script src=".js?onload=handleClientLoad"></script>
<div id="content">
<ul id="events"></ul>
</div>
</body>
</html>
Is it possible to access google api's (calendar v3) from a local html file (with javascript)? I want to open c:\temp\gsotto\gsotto.htm in my browser instead of serving the file through IIS.
It works if I serve my file from
http://localhost/
through a webserver. In the google api console i have a "Client ID for web applications" with:
Redirect URIs: http://localhost
JavaScript origins: http://localhost
and a "Simple api access" Key for browser apps (with referers)
Firebug shows me this when accessing through http://localhost/gsotto/gsotto.htm
GET http://localhost/gsotto/gsotto.htm
GET https://apis.google./js/client.js?onload=handleClientLoad
GET https://apis.google./_/apps-static/_/js/gapi/client....cb=gapi.loaded_0
GET https://ssl.gstatic./accounts/o/...-postmessagerelay.js
GET https://accounts.google./o/oauth2/auth?client_id=.....&authuser=0
GET https://ssl.gstatic./accounts/o/....-postmessage.js
and this when access through c:\...
GET https://apis.google./js/client.js?onload=handleClientLoad
GET https://apis.google./_/apps-static/_/js/gapi/client.....cb=gapi.loaded_0
GET https://ssl.gstatic./accounts/o/.....-postmessagerelay.js
and nothing more....
do i need to use other settings in the google api console for this to work?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
// google calendar id
var calId = "....";
var clientId = "..."; // oAuth2 webapp
var apiKey = "....";// Key for browser apps (with referers)
// google authentication scopes
var scopes = 'https://www.googleapis./auth/calendar';
//https://www.googleapis./auth/calendar.readonly
// Use a button to handle authentication the first time.
function handleClientLoad() {
console.log('handleClientLoad');
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
console.log('checkAuth');
try {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
catch(e)
{
console.log('e');
console.log(e);
}
}
function handleAuthResult(authResult) {
console.log('handleAuthResult');
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
console.log('result ok');
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
console.log('authresult null or error');
console.log(authResult);
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
console.log('handleAuthClick');
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
function makeApiCall() {
console.log('makeApiCall');
gapi.client.load('calendar', 'v3', function() {
var request = gapi.client.calendar.events.list({
'calendarId': calId
});
request.execute(function(resp) {
console.log('result:');
console.log(resp);
for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(resp.items[i].summary));
document.getElementById('events').appendChild(li);
}
});
});
}
</script>
<script src="https://apis.google./js/client.js?onload=handleClientLoad"></script>
<div id="content">
<ul id="events"></ul>
</div>
</body>
</html>
- "Is it possible?" - did you even try before asking? – Joseph Commented Aug 11, 2012 at 11:07
- It is possible, You may need to allow script execute in IE – Nhu Trinh Commented Aug 11, 2012 at 11:20
- i did try, but got no results. Edited the question to include the source and firebug NET-log result – sotto Commented Aug 11, 2012 at 14:54
1 Answer
Reset to default 5Depending on your browser you will find that no AJAX is possible when running from the file:// protocol for cross-site (or cross-protocol) reasons. The GETs you see working are not XHR/AJAX but <script> tags so the answer is No for most modern browsers. See the discussion here. You might get it working if you run Chrome with --allow-file-access-from-files and --disable-web-security (link).