2012-10-11 230 views
1

我試圖遵循本教程谷歌日曆API - JavaScript的

(http://googleappsdeveloper.blogspot.co.uk/2011/12/using-new-js-library-to-unlock-power- of.html)

實現谷歌日曆透過JavaScipt但我收到以下錯誤:

Error: origin_mismatch 

Request Details 
scope=https://www.googleapis.com/auth/calendar 
response_type=token 
access_type=online 
redirect_uri=postmessage 
proxy=oauth2relay874729177 
origin=http://localhost 
state=538915583 
display=page 
client_id=553681888475.apps.googleusercontent.com 
authuser=0 

我的JS文件:

var clientId = '553681888475.apps.googleusercontent.com'; 
var apiKey = 'AIzaSyCh86BTa79UfqU3I_Y0jiWv2g3eXvMh6XY'; 
var scopes = 'https://www.googleapis.com/auth/calendar'; 

function handleClientLoad() { 
    gapi.client.setApiKey(apiKey); 
    window.setTimeout(checkAuth,1); 
    checkAuth(); 
} 

function checkAuth() { 
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, 
     handleAuthResult); 
} 

function handleAuthResult(authResult) { 
    var authorizeButton = document.getElementById('authorize-button'); 
    if (authResult) { 
    authorizeButton.style.visibility = 'hidden'; 
    makeApiCall(); 
    } else { 
    authorizeButton.style.visibility = ''; 
    authorizeButton.onclick = handleAuthClick; 
    } 
} 

function handleAuthClick(event) { 
    gapi.auth.authorize(
     {client_id: clientId, scope: scopes, immediate: false}, 
     handleAuthResult); 
    return false; 
} 

function makeApiCall() { 
    gapi.client.load('calendar', 'v3', function() { 
    var request = gapi.client.calendar.events.list({ 
     'calendarId': 'primary' 
    }); 

    request.execute(function(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); 
     } 
    }); 
    }); 
} 

HTML:

<html> 
    <body> 
    <div id='content'> 
     <h1>Events</h1> 
     <ul id='events'></ul> 
    </div> 
    <a href='#' id='authorize-button' onclick='handleAuthClick();'>Login</a> 

    <script src="../Controller/Cal.js"> 
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script> 
    </body> 
</html> 
+0

您使用的clientI似乎不是本教程中所需的「Web應用程序的客戶端ID」。請證實。 – ngsiolei

+0

嗨,我想你的方法makeApiCall找到日曆「主」中的所有envent。我怎樣才能做到這一點,但只爲未來的事件,或爲特定的一天後發生的事件? – Desnoxav

回答

2

我必須清除「授權的重定向URI」框中的內容。 (使用JavaScript時,不要指定任何重定向。)

在「授權JavaScript起源」框中,您必須輸入您的站點的域名,在本例中,域名僅爲localhost,因爲我使用的是XAMPP。

+0

你還必須把港口嗎?因爲我在不同的計算機上運行本地主機,並且xampp isntallations使用不同的端口 –