[Javascript] 利用Google Calendar api 存取 Google 行事曆

因為接的案子有需要用到Google Api 輸入資料至Google Calendar，花了一天多的時間總算搞定了。花了一些時間整理手中的資料，方便記錄也希望可以幫到看到同樣有這個問題的同儕。

Google Api 其實很安全，所以他的認證方式也很麻煩，而且中文的相關資料也比較少，對於沒有接觸過嚴禁認證方式的新手來說是很痛苦的過程。以我目前了解的部分，帶領大家來了解Google Api 的實戰做法。

---

走起

首先，當你第一次了解Google Api一定要從這裡開始：

Google Calendar Api (行事曆的Api)

目前Google 使用OAuth 2.0來進行驗證，而官方說明如下：

Using OAuth 2.0 to Access Google APIs

這邊有空在看個仔細，底下也會再度提到，想要進入實戰可以往下。

搭配自己使用的環境，底下提供的Api大都有提供官方的Library包，

首先先帶大家看javascript的流程：

Javascript

開始之前，請些擁有一個Google帳號，請依照Step 1的Wizard去做。

完成後，請記住兩個主要的字串：

1.用戶端 ID(Cliend_id)

2. 用戶端密碼(Api_key)

接著可以直接從Step 2複製貼上來測試看看，請把

var CLIENT_ID = '';

改成你上面記錄的Cliend_id即可。

接著說明一下這個樣版程式的內容：

驗面上有一個驗證按鈕，當你按下去時，他會顯示以當前時間為基準，後面十項活動。

依照執行的流程，我一個個解釋他在做什麼：

handleAuthClick(event) -> handleAuthResult(authResult) -> loadCalendarApi() -> gapi.client.load('calendar', 'v3', listUpcomingEvents) -> listUpcomingEvents()

handleAuthClick(event)

當你點擊按鈕後，會將你的驗證資料和內容帶入Google提供的Api驗證函式中，必要有三項：

client_id： 你剛剛紀錄的那個。

scope：這是一個陣列，裡面儲存的是你想要申請的權限，以這個範例為例，我們用["https://www.googleapis.com/auth/calendar.readonly"] 也就是申請Calendar的唯讀權限。

immediate: 當此項為True的時候，認證回傳回的token會在後面刷新，這裡建議使用false，後面會解釋。

想要更了解這一部分可以看這裡：

Authentication using the Google APIs Client Library for JavaScript

Methods and Classes

handleAuthResult(authResult)

理論上這回傳值內會包含Token，只需要驗證是否驗證成功，其他不重要跳過。

loadCalendarApi()

參考上面提過的Methods and Classes，這是固定用法。

listUpcomingEvents()

範例使用了Google Lib提供的函式，需要包含的資訊可以參考這裡：

Events: list

如果你會使用的話，也可以直接使用HttpRequest來做存取(我是屬於不太會用的那邊)。

新增活動

可以參考我我的程式碼：

function insertSchoolEventToGoogleCalendar() {
    // 導入資料
    for ( var i = 0, isize = gOrderSchool.length ; i < isize ; i++ ) {
      alert(gOrderSchool[i].date);
      var event = {
        'summary': gOrderSchool[i].title,
        'location': "",
        'description': gOrderSchool[i].description,
        'start': {
          'date': gOrderSchool[i].date,
          'timeZone': 'Asia/Taipei'
        },
        'end': {
          'date': gOrderSchool[i].date,
          'timeZone': 'Asia/Taipei'
        },
        'reminders': {
          'useDefault': false,
          'overrides': [
            {'method': 'email', 'minutes': 24 * 60},
            {'method': 'popup', 'minutes': 10}
          ]
        }
      };

      var request = gapi.client.calendar.events.insert({
        'calendarId': 'primary',
        'resource': event
      });

      request.execute();
    }

  }

基本上到這裡為止，補充其他東西。

---

在修改範例的過程中，你可能會遇到跳出的驗證視窗被當作快顯擋掉了，

首先你要先了解，只有以下情況，開啟的新視窗才會被允許：

• 使用者點擊連結(link)
• 本機端執行的程式(非網頁Script)開啟(含廣告軟體)
• 透過ActiveX元件，經由使用者的操作觸發
• 網頁位於信任的網站(Trusted Sites)或近端內部網路(Local Intranet)
• 使用者在快顯封鎖程式設定所列舉"允許的網站"
• 透過window.createPopup建立子視窗(但createPopup不能指向現成網頁的URL，要透過Javascript建構內容)

為了讓使用者一定能看到並使用驗證畫面，最好的方式就是透過onClick來觸發handleAuthClick這個函式。

你可能會想，如果帳號使用這個服務，就由誰來驗證，那我總不能讓其他人都需要開啟Google api吧。其實你的Cliend_id只是用來驗證你是合法開發者，並且計算紀錄你的流量或資訊，等到驗證完成後，Cliend_id就可以使用「primary」這個字串取代。

---

你可以利用這個服務了解整個流程：

OAuth 2.0 Playground

針對Javascript提供的Api教學指南：

Getting Started

Google Api Scope表：

OAuth 2.0 Scopes for Google APIs

等我比較了解後，我應該會開一篇新的再說明。