2012-11-18 13 views
5

私はここで見つける簡単なJavaScriptコードに取り組んでいます:http://googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.htmlGoogleカレンダーAPI JavaScriptのエラー:起源の不一致

それは基本的にGoogleカレンダーへの認証を取得し、それに含まれているイベントのリストを取得します。私は自分のWebアプリケーションを登録し、クライアントIDとAPIキーを取得しました。

私はこのエラーに直面しています: "エラー:原点の不一致"、localhostを使用してローカルでjavascriptを実行していて、googleアプリケーション登録のホームページもlocalhostに設定しました。

非常に助かります。

コード:

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

    <script> 
    var clientId = '506979856128.apps.googleusercontent.com'; 
var apiKey = 'AIzaSyAGbQAZQU0YNL8hK5EU69exIg7_sOg3JoA'; 
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); 
     } 
    }); 
}); 
} 
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad">     </script> 
</body> 
</html> 

答えて

2

私は検索の同じエラー起源不一致today.afterビットを持って、私はその理由を得ました。

Googleのアピアクセスを作成している間、我々はリダイレクトURIのを認定と認定リダイレクトURIを指定する必要があります。あなたはFYI認定リダイレクトURIのerror:Unknown Origin is thrown

に指定された以外のURIからのログインを呼び出す場合

は今:私はあなたがローカルホストを使用してローカルでJavaScriptを実行していることを見てきました。 これは、認可リダイレクトURIにlocalhost URIを追加していないことを意味します。

あなたの時間を無駄にしないでください。許可されたリダイレクトURIはlocalhost URIを受け入れません。これはChromeの同じ発信元ポリシーによるものです。また、chromeをdisable-web-securityフラグで実行すると、あまりにも。

+0

合理的ですが... '' 'cd"/Applications/Google Chrome Canary.app/Contents/MacOS/ "' '' - > '' './Google \ Chrome \ Canary --disable- 「Google Chromeは予期せず終了しました。」 ' –

+0

Firefoxで実行...正常に動作します –

+0

@CraigMorgan:chrome FFでの拡張? –

1

起源のミスマッチの問題は、GoogleのデベロッパーコンソールクライアントIDを作成するときにリダイレクトURIのJavascriptの起源のための世話をすることによって解決することができます。 /

Javascriptの起源

はすべきではない 終了。

http://example.com/->正しい形式はhttp://example.comです。