Google日历API javascript错误：源不匹配_Javascript_Oauth_Google Calendar Api

Google日历API javascript错误：源不匹配

javascript oauth google-calendar-api

Google日历API javascript错误：源不匹配,javascript,oauth,google-calendar-api,Javascript,Oauth,Google Calendar Api,我正在编写一个在这里找到的简单javascript代码：它基本上获得了对谷歌日历的认证，并检索其中包含的事件列表。我已经注册了我的web应用程序，并获得了客户端ID和API密钥我面临着这个错误：“错误：源代码不匹配”，我使用localhost在本地运行javascript，并将我在google应用程序注册中的主页设置为localhost 任何帮助都将不胜感激守则： <html> <body> <div id='content'>

我正在编写一个在这里找到的简单javascript代码：

它基本上获得了对谷歌日历的认证，并检索其中包含的事件列表。我已经注册了我的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>


事件

var clientId='506979856128.apps.googleusercontent.com'；
var apiKey='AIzaSyAGbQAZQU0YNL8hK5EU69exIg7_sOg3JoA'；
var作用域https://www.googleapis.com/auth/calendar';
函数handleClientLoad（）{
gapi.client.setApiKey（apiKey）；
setTimeout（checkAuth，1）；
checkAuth（）；
}
函数checkAuth（）{
gapi.auth.authorize（{client_id:clientId，scope:scopes，immediate:true}，
手工（结果）；
}
函数handleAuthResult（authResult）{
var authorizeButton=document.getElementById（'authorized-button'）；
如果（authResult）{
authorizeButton.style.visibility='hidden'；
makeApiCall（）；
}否则{
authorizeButton.style.visibility=''；
authorizeButton.onclick=handleAuthClick；
}
}
函数handleAuthClick（事件）{
gapi.auth.authorize(
{client_id:clientId，scope:scopes，immediate:false}，
手工（结果）；
返回false；
}
函数makeApiCall（）{
load（'calendar'，'v3'，function（）{
var请求=gapi.client.calendar.events.list({
“日历ID”：“主要”
});
请求执行（功能（resp）{
对于（变量i=0；i

我今天得到了相同的错误源不匹配。经过一点搜索，我找到了原因

在创建Google Api访问时，我们必须指定授权重定向URI和授权重定向URI

现在，如果您从未在授权重定向URI中指定的URI调用登录，则会抛出
错误：未知来源
FYI：我看到您正在使用localhost在本地运行javascript。这意味着您尚未将本地主机uri添加到授权重定向uri

但不要浪费时间这样做。授权重定向uri将不接受本地主机uri。这是由于Chrome的同源策略。如果使用禁用web安全标志运行Chrome，它也可以在本地工作。
在谷歌开发者控制台中创建客户端ID时，注意重定向URI和Javascript源代码可以解决源代码不匹配的问题
Javascript源代码不应以
/
结尾

示例：
http://example.com/
-->正确的格式为
http://example.com
听起来很合理，但
cd“/Applications/Google-Chrome-Canary.app/Contents/MacOS/”
-->/Google\Chrome\Canary--禁用网络安全-->
跟踪/BPT陷阱：5
-->
谷歌浏览器意外退出。
@CraigMorgan:FF中的Chrome扩展？？不-只是普通的旧FF