FROM PCCU 第20組 電子商務報告 Fb api使用與資料庫安全 組員：施禹安、蘇敬仁、林郁翔

1. 電子商務報告之
簡易FB API使用與資料庫安全
第20組
組員：施禹安、蘇敬仁、林郁翔

2. 為什麼要介紹ＦＢ ＡＰＩ？
因為各大網站幾乎都有一個第三方登入，在台灣最廣
泛的就是ＦＢ了。假如你做的是網站，那麼沒一個第
三方登入，就會覺得是不是上個世紀的東西，似乎已
經成為必然。

3. 成為一個ＦＢ開發者：

4. 開發者頁面，登入帳號

5. 進入後，點擊 Add a New App

6. 這邊，介紹網站的申請，選擇www

7. 下面是你已經建立的App
右上角，選擇Skip and Create APP ID 建立新的應用

8. APP 名稱
APP 的命名空間(namespce)

9. 選幾隻老虎

10. 進入開發者DashBoard，可以開始進行設定

11. 打localhost (本機)
你的信箱（一定要）
新增一個網站的平台，也是用localhost

12. Status& Review - > 開啟此APP
點選YES

13. 目前的可以取得的權限如下：

14. 恭喜～
目前開發者及開發者的好友都能夠使用這APP

15. BTW …. 其他的70億的廣大群眾呢？

16. 事實是殘酷的.... 請把下面的表格填完
◢▆▅▄▃-崩╰(〒皿〒)╯潰-▃▄▅▆◣

17. 進入正題，來使用FB 的 API 吧！

18. 選擇 Graph API Explorer

19. 下好 Command 點選Submit 個資就出現了！
這是一個JSON格式，所以麻煩自己Google一下什麼
是JSON，不然request到了不能用XD

20. 我們可以選擇一堆的...? 但是......

21. 朕不給，你不能搶！
(PS . 此階段FB會去審核你的App 才會給你權限)

22. 實作：
結合網頁做一個一登入就把你
姓名 、Email 、 ID 丟到網頁的程式 ??!

24. 登入 -> 取得token -> Ajax(非同步的JavaScript與
XML技術) -> 加入到資料庫 ->把所有登入資料拉出
來
理想中的流程：

25. 著手來寫HTML 與 Javascript 的Code
後面的所有程式碼放在 Github：
https://github.com/unromanticman/FBLoginDemo

26. FB相關程式碼可以到這裏找喔
https://developers.facebook.com/docs/facebook-login/web
填好appId

27. FB相關程式可以到這裏找喔
https://developers.facebook.com/docs/facebook-login/web
要求取得的權限

28. FB相關程式可以到這裏找喔
https://developers.facebook.com/docs/facebook-login/web
假如成功登入，會執行函式 testAPI();

29. testAPI

31. 快結束了….
最後的SQL 比較安全的寫法

32. 請使用PDO 或 mysqli 別再用mysql
因為會被SQL Injection

33. 密碼請不要明碼儲存，加密的模組
好好利用

34. 記得使用Bindvalue的方式來下SQL
指令（PHP或ASP.NET都有相關的
教學）

35. ㄏ
把資料寫入資料庫 INSERT

36. ㄏ
使用ＰＤＯ
做加入資料
使用BindValue的方式
然後加密儲存
（這邊加兩層）
POST過來先檢查資料存在

37. ㄏ
把資料讀取出來 SELECT

38. 使用ＰＤＯ
做查詢資料
POST過來先檢查資料存在
這邊用意是當作Token使用
主要防止陌生人看到資料
解密並且輸出
（這邊解兩層）

39. ＤＥＭＯ