Implement Social Login with Flask & authomatic

Transcript

1. 1.

   Implementing Social Login with Flask & authomatic patw / Front-End

   Engineer 原始背景圖⽚片出處：Jason A. Howie @ flickr https://www.flickr.com/photos/jasonahowie/8583949219/ Gogolook Developers meet up ╳
2. 2.

   MISSION 聽說卡關很久的 LINE whoscall 官網 之後要加上 Social Login 功能

3. 3.

   MISSION • Facebook, Google and Twitter ! • 最好可以取得 User

   的 E-mail & 電話 ! • 更好的話可以取得 User 朋友的這些資訊
4. 4.

   SOLUTION 不會⼟土砲 ! 尋找現成 Extension 解決⽅方案 http://peterhudec.github.io/authomatic/

5. 5.

   POC 安裝 pip install authomatic 程式碼參考 flask 範例： http://peterhudec.github.io/authomatic/examples/flask-simple.html

6. 6.

   POC 先設定 config.py： 要填⼊入 key 資訊 得申請 Apps/API 先 …晚點說

7. 7.

   POC 主要的 views.py：

8. 8.

   POC login.html： ⺫⽬目前結果會像這樣：

9. 9.

   POC 要進⼀一步取得其他資訊，查⼀一下各 provider 的⽂文件。 Facebook Google Twitter E-mail ✔ scope:

   email 無法取得朋友的 ✔ scope: https:// www.googleapis.com/ auth/ plus.profile.emails.read ✘ 朋友名單 ✘ 2014/4/30 之後新開的應 ⽤用程式強制使⽤用 v2.0，僅 能取回同樣使⽤用此應⽤用程 式的朋友 ✔ scope: https:// www.google.com/m8/ feeds/ ✔ 你關注的⼈人 ⼿手機號碼 ✘ 查⽂文件 2011 年曾有過 user_mobile_phone ✔ 可以取得 Google Contacts 中的聯絡⼈人⼿手 機號碼 ✘ OpenCloseGraph?
10. 10.

    POC views.py 稍作修改： Facebook 的部份 twitter 的部份

11. 11.

    POC views.py 稍作修改： Google 的部份 取得聯絡⼈人的 名稱、E-mail、電話

12. 12.

    POC 結果會像這樣：

13. 13.

    應⽤用程式 API 申請⽅方法整理 ! " 

14. 14.

    $

15. 15.

    ! https://developers.facebook.com/apps/

16. 16.

    !

17. 17.

    !

18. 18.

    %

19. 19.

    " https://apps.twitter.com/

20. 20.

    "

21. 21.

    "

22. 22.

    

23. 23.

    

24. 24.

    

25. 25.

    

26. 26.

    開發期的⼩小技巧 sudo /etc/hosts

27. 27.

    Thank you https://github.com/patw0929/flask-social-login-demo