Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implement Social Login with Flask & authomatic

Implement Social Login with Flask & authomatic

9b2c27c2123feb9b02865c44b86456d0?s=128

Patrick Wang

August 01, 2014
Tweet

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. 開發期的⼩小技巧 sudo /etc/hosts

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