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

Implement Social Login with Flask & authomatic

Implement Social Login with Flask & authomatic

Patrick Wang

August 01, 2014
Tweet

More Decks by Patrick Wang

Other Decks in Programming

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