2014年5月27日

Dropbox Datastore API for JavaScript 教學 (3) - 使用 OAuth 2 驗證部分 ( Use Dropbox Datastore JavaScript API )

繼上一篇 Dropbox Datastore 介紹的工作流程與環境建立,接著要來開始實際地使用 Datastore API。本篇是使用 Dropbox Datastore JavaScript SDK 與 Web App 來作為範例。



建立 Dropbox Client 物件:
開始使用 Datastore API 之前必須先初始 Client 物件,這時候需要讓 Dropbox 知道是哪一個 App 要使用服務,因此我們需要 App Key 。還記得上一篇教學中建立的 App,於 App Console 中進入 App 設定畫面就可以找到 Key,以我的 Web App 為例參考下圖:



將範例程式中的 App Key 替換成自己的 ( 參考 Task Tracking App 範例程式中的 tutorial.js ),接著建立 Client 物件,參考下圖:



驗證 User 並確認 User 是否要啟用 Datastore 服務:
此部份為啟用 Datastore 重要部分,透過 clinet.authenticate( ) 函式來跟 Dropbox Server 端取得 Token 之後才能真正開始使用 Datastore 的資料,程式碼參考如下:


此函式有選擇性的參數可使用,如上面 interactive : false 代表進行此步驟時不顯示是否啟動 Datastore 權限的詢問畫面,也就是直接允許啟用 Datastore 服務。若 interactive : true 時會出現以下畫面:


允許後 Dropbox  Server 端會進行相關動作並導向一個你指定的頁面,而這個頁面你必須要先設定好。以我的範例來說,因本 Web App 只有一個頁面 ( index.html ),所以驗證完後我想要導向到同一個頁面,設定參考如下:


若沒有設定驗證完的導向頁面,則會出現 Error 400 的錯誤畫面。


確認是否有取得 Token:
透過 client.isAuthenticated( ) 來驗證是否已取得 Token,確認後即可以開始使用 Datastore 資料操作的 API,程式部分參考如下:


以上即為 Datastore API 使用 OAuth 2 驗證部分的步驟,希望有幫助到需要的朋友。