1 / 26

Web Box

Web Box. Hsin -I,WU 、 CHANG-NING,TSAI 、 JING-YEU,CHEN 、 CHUNG-LIN,CHAN. OUTLINE. Motivation Dropbox API Chrome extension. Motivation. Motivation. 在 dropbox 內聽音樂無法使用播放清單. Dropbox API. OAuth 2.0 是什麼？. OAuth 2.0. 全名 The Oauth 2.0 Authorization Framework. OAuth 2.0.

gafna
Download Presentation

Web Box

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Box Hsin-I,WU、CHANG-NING,TSAI、 JING-YEU,CHEN、CHUNG-LIN,CHAN

  2. OUTLINE • Motivation • Dropbox API • Chrome extension

  3. Motivation

  4. Motivation • 在dropbox內聽音樂無法使用播放清單

  5. Dropbox API

  6. OAuth 2.0 是什麼？

  7. OAuth 2.0 • 全名 The Oauth 2.0 Authorization Framework

  8. OAuth 2.0

  9. Old-School way • App要求輸入帳號密碼並且聲明不會亂搞 • 自己要去信任App • 就算App沒有亂搞但是漏洞一堆，密碼被幹走一樣GG

  10. OAuth的方式 • 網站提供官方的interface，讓你可以授權程式使用資料 • 程式存的是官方給的Token非帳號密碼 • Token可規定存取範圍 • Token有期限而且可以隨時撤銷

  11. OAuth 2.0的角色 • Resource Owner-資料擁有者(user) • Client-即App，要存取User資料的程式 • Authorization Server-總管一切授權的server • Resource Server-Client從這個server撈資料(API)

  12. OAuth 2.0

  13. Client需要註冊 • Client ID • Client Secret(視為密碼) • Redirect URI

  14. OAuth 2.0 Flowchart

  15. OAuth 2.0 Flowchart

  16. OAuth 2.0 Flowchart

  17. OAuth 2.0 Flowchart

  18. OAuth 2.0 Flowchart

  19. OAuth 2.0 Flowchart

  20. Our App • Write by python-using flask web framework and dropbox SDK • Flow OAuth 2.0 protocol • Get Music from your dropbox directory • Web based Music player

  21. Chrome extension

  22. Background Pages • There are two types of background pages: persistent background pages, and event pages.

  23. Extension UIs • Browser Action • Page Action • Content Script

  24. Extension UIs • icon in the toolbar,icon in the address bar,when clicked, shows a popup. Chrome App

  25. Demo

  26. Q&A

More Related