Implement Social Login with Flask & authomatic

Transcript

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. MISSION 聽說卡關很久的 LINE whoscall 官網 之後要加上 Social Login 功能

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

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

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

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

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

7. POC 主要的 views.py：

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

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. POC views.py 稍作修改： Facebook 的部份 twitter 的部份

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

12. POC 結果會像這樣：

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

14. $

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

16. !

17. !

18. %

19. " https://apps.twitter.com/

20. "

21. "

22. 

23. 

24. 

25. 

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

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