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
   ╳
   

   View Slide

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

   View Slide

3. MISSION
   • Facebook, Google and Twitter
   !
   • 最好可以取得 User 的 E-mail & 電話
   !
   • 更好的話可以取得 User 朋友的這些資訊
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. POC
   主要的 views.py：
   

   View Slide

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

   View Slide

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?
   

   View Slide

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

    View Slide

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

    View Slide

12. POC
    結果會像這樣：
    
    

    View Slide

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

    View Slide

14. $
    

    View Slide

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

    View Slide

16. !
    

    View Slide

17. !
    

    View Slide

18. %
    

    View Slide

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

    View Slide

20. "
    

    View Slide

21. "
    

    View Slide

22. 
    

    View Slide

23. 
    

    View Slide

24. 
    

    View Slide

25. 
    

    View Slide

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

    View Slide

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

    View Slide