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