2017-09-28 102 views
0

我使用官方教程代码:谷歌日历API JS不工作

<html> 
<head> 
    <title>Google Calendar API Quickstart</title> 
    <meta charset='utf-8' /> 
</head> 
<body> 
<!--Add buttons to initiate auth sequence and sign out--> 
<button id="authorize-button" style="display: none;">Authorize</button> 
<button id="signout-button" style="display: none;">Sign Out</button> 
<pre id="content"></pre> 
<script type="text/javascript"> 
    // Client ID and API key from the Developer Console 
    var CLIENT_ID = '930775442242-5dutsv4pa4ibr23c650rcs4upo3v7qad.apps.googleusercontent.com'; 
    // Array of API discovery doc URLs for APIs used by the quickstart 
    var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]; 
    // Authorization scopes required by the API; multiple scopes can be 
    // included, separated by spaces. 
    var SCOPES = "https://www.googleapis.com/auth/calendar.readonly"; 
    var authorizeButton = document.getElementById('authorize-button'); 
    var signoutButton = document.getElementById('signout-button'); 
    /** 
    * On load, called to load the auth2 library and API client library. 
    */ 
    function handleClientLoad() { 
     gapi.load('client:auth2', initClient); 
    } 
    /** 
    * Initializes the API client library and sets up sign-in state 
    * listeners. 
    */ 
    function initClient() { 
     gapi.client.init({ 
      discoveryDocs: DISCOVERY_DOCS, 
      clientId: CLIENT_ID, 
      scope: SCOPES 
     }).then(function() { 
      // Listen for sign-in state changes. 
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); 
      // Handle the initial sign-in state. 
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); 
      authorizeButton.onclick = handleAuthClick; 
      signoutButton.onclick = handleSignoutClick; 
     }); 
    } 

    /** 
    * Called when the signed in status changes, to update the UI 
    * appropriately. After a sign-in, the API is called. 
    */ 
    function updateSigninStatus(isSignedIn) { 
     if (isSignedIn) { 
      authorizeButton.style.display = 'none'; 
      signoutButton.style.display = 'block'; 
      listUpcomingEvents(); 
     } else { 
      authorizeButton.style.display = 'block'; 
      signoutButton.style.display = 'none'; 
     } 
    } 

    /** 
    * Sign in the user upon button click. 
    */ 
    function handleAuthClick(event) { 
     gapi.auth2.getAuthInstance().signIn(); 
    } 
    /** 
    * Sign out the user upon button click. 
    */ 
    function handleSignoutClick(event) { 
     gapi.auth2.getAuthInstance().signOut(); 
    } 
    /** 
    * Append a pre element to the body containing the given message 
    * as its text node. Used to display the results of the API call. 
    * 
    * @param {string} message Text to be placed in pre element. 
    */ 
    function appendPre(message) { 
     var pre = document.getElementById('content'); 
     var textContent = document.createTextNode(message + '\n'); 
     pre.appendChild(textContent); 
    } 

    /** 
    * Print the summary and start datetime/date of the next ten events in 
    * the authorized user's calendar. If no events are found an 
    * appropriate message is printed. 
    */ 
    function listUpcomingEvents() { 
     gapi.client.calendar.events.list({ 
      'calendarId': 'primary', 
      'timeMin': (new Date()).toISOString(), 
      'showDeleted': false, 
      'singleEvents': true, 
      'maxResults': 10, 
      'orderBy': 'startTime' 
     }).then(function(response) { 
      var events = response.result.items; 
      appendPre('Upcoming events:'); 

      if (events.length > 0) { 
       for (i = 0; i < events.length; i++) { 
        var event = events[i]; 
        var when = event.start.dateTime; 
        if (!when) { 
         when = event.start.date; 
        } 
        appendPre(event.summary + ' (' + when + ')') 
       } 
      } else { 
       appendPre('No upcoming events found.'); 
      } 
     }); 
    } 

</script> 
<script async defer src="https://apis.google.com/js/api.js" 
     onload="this.onload=function(){};handleClientLoad()" 
     onreadystatechange="if (this.readyState === 'complete') this.onload()"> 
</script> 
</body> 
</html> 

Therea在和登出的迹象两个按钮。 问题:此代码在firefox中无效(当我点击授权按钮,选择谷歌帐户,然后没有任何反应),并在铬(我不能注销)。 也许在这段代码中有任何错误? 我该如何解决这个问题? 在我的控制台中没有任何错误。 谢谢,

+0

“不起作用”不是错误消息或问题描述。使用浏览器的开发人员工具调试代码,发现所发生的任何错误消息,意外行为等,然后使用更详细的信息更新您的问题。这些工具不仅仅是控制台 - 因为这一切都应该与谷歌沟通,看网络选项卡,看看什么请求(或不)作出应该是至关重要的。 – ADyson

+0

谢谢,但我没有看到控制台和其他工具中的任何问题 我想也许api需要API密钥,但不知道我必须在哪里设置 –

+0

如果它不在演示代码中,那么它不太可能需要它,重新执行相同的操作。很难相信没有任何错误,除非代码只是不执行。如果服务中存在如此明显的错误,那么没有人会使用它。您对原始演示进行了哪些更改?你自己的客户ID等我猜,还有其他的吗? – ADyson

回答

0

对于注销过程尝试使用GoogleAuth.disconnect();撤销提到的令牌here

日历API示例在我的目标上按预期工作。确保它已在您的Google开发人员控制台中启用,并且您的客户端ID中指示了本地主机端口