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

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


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







走起


首先,當你第一次了解Google Api一定要從這裡開始:
Google Calendar Api (行事曆的Api)


目前Google 使用OAuth 2.0來進行驗證,而官方說明如下:
這邊有空在看個仔細,底下也會再度提到,想要進入實戰可以往下。


搭配自己使用的環境,底下提供的Api大都有提供官方的Library包,
首先先帶大家看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,後面會解釋。
想要更了解這一部分可以看這裡:


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


loadCalendarApi()
參考上面提過的Methods and Classes,這是固定用法。


listUpcomingEvents()
範例使用了Google Lib提供的函式,需要包含的資訊可以參考這裡:
如果你會使用的話,也可以直接使用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」這個字串取代。




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


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


Google Api Scope表:

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

留言

這個網誌中的熱門文章

[滑鼠] 羅技G402 換微動

[閒聊] 盲打&轉換輸入法