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

Account Kit after 1 year

Account Kit after 1 year

Our experience using Facebook's Account Kit for authentication for 12+ months.

Shared at Facebook Developer Circle Taipei #7

Richard Lee

January 23, 2019
Tweet

More Decks by Richard Lee

Other Decks in Programming

Transcript

  1. Account Kit after 1 year
    By Richard @ Ѫྉཧ
    © Polydice, Inc. 2019 1

    View full-size slide

  2. © Polydice, Inc. 2019 2

    View full-size slide

  3. Account Kit lets people quickly
    register for and login to your app by
    using just their phone number or
    email address
    © Polydice, Inc. 2019 3

    View full-size slide

  4. © Polydice, Inc. 2019 4

    View full-size slide

  5. What's NOT Account Kit
    1. Not free SMS for arbitrary message
    2. No Facebook login integration
    3. No Database or MBaaS
    © Polydice, Inc. 2019 5

    View full-size slide

  6. That's more than SMS auth!
    © Polydice, Inc. 2019 6

    View full-size slide

  7. Backup plan
    1. Phone call — People can choose to receive a phone call with the
    SMS code. No Taiwan support!
    2. Facebook notification — If the phone number is linked to a
    Facebook account, people can choose to have a notification
    containing the SMS sent to that account.
    © Polydice, Inc. 2019 7

    View full-size slide

  8. WhatsApp
    • Same like SMS, but code can be sent
    via WhatsApp.
    • No code change required.
    • No way to turn it off.
    © Polydice, Inc. 2019 8

    View full-size slide

  9. Instant Verification
    Without typing anything!
    © Polydice, Inc. 2019 9

    View full-size slide

  10. © Polydice, Inc. 2019 10

    View full-size slide

  11. Instant verification
    Requirements:
    1. On Android / Web
    2. Have a Facebook account that includes the phone number or
    email they enter in Account Kit.
    © Polydice, Inc. 2019 11

    View full-size slide

  12. Integration guide
    © Polydice, Inc. 2019 12

    View full-size slide

  13. © Polydice, Inc. 2019 13

    View full-size slide

  14. JS setup
    <br/>// initialize Account Kit with CSRF protection<br/>AccountKit_OnInteractive = function(){<br/>AccountKit.init(<br/>{<br/>appId:"{{FACEBOOK_APP_ID}}",<br/>state:"{{csrf}}",<br/>version:"1.3"<br/>}<br/>);<br/>};<br/>
    © Polydice, Inc. 2019 14

    View full-size slide

  15. JS start flow
    <br/>// phone form submission handler<br/>function smsLogin() {<br/>AccountKit.login(<br/>'PHONE',<br/>{countryCode: {{countryCode}}, phoneNumber: {{phoneNumber}}},<br/>loginCallback<br/>);<br/>}<br/>
    © Polydice, Inc. 2019 15

    View full-size slide

  16. JS callback flow
    <br/>// login callback<br/>function loginCallback(response) {<br/>if (response.status === "PARTIALLY_AUTHENTICATED") {<br/>var code = response.code;<br/>var csrf = response.state;<br/>// Send code to server to exchange for access token<br/>}<br/>else if (response.status === "NOT_AUTHENTICATED") {<br/>// handle authentication failure<br/>}<br/>else if (response.status === "BAD_PARAMS") {<br/>// handle bad parameters<br/>}<br/>}<br/>
    © Polydice, Inc. 2019 16

    View full-size slide

  17. Account Kit Graph API
    GET https://graph.accountkit.com/v1.3/me/?
    access_token=
    {
    id: "1234512345123451",
    phone: {
    number: "+15551234567",
    country_prefix: "1",
    national_number: "5551234567"
    },
    application: {
    id: "5432154321543210"
    }
    }
    © Polydice, Inc. 2019 17

    View full-size slide

  18. Pros & Cons
    © Polydice, Inc. 2019 18

    View full-size slide

  19. Pros
    1. SMS deliverability is good as Facebook
    2. It's free (Actually monthly 100k SMS)
    3. No similar alternative to instant verification
    4. No need for Facebook App Review
    © Polydice, Inc. 2019 19

    View full-size slide

  20. Cons
    1. China and some edge cases
    2. Unremovable Facebook branding in SMS
    3. UI is super limited
    © Polydice, Inc. 2019 20

    View full-size slide

  21. Our Account Kit experience
    © Polydice, Inc. 2019 21

    View full-size slide

  22. © Polydice, Inc. 2019 22

    View full-size slide

  23. © Polydice, Inc. 2019 23

    View full-size slide

  24. SMS login for help!
    © Polydice, Inc. 2019 24

    View full-size slide

  25. UI/UX Tips
    1. Not only signup but also binding
    • Prompt if user become VIP
    • Prompt if user publishes recipes
    2. Pre-fill numbers if possible!
    © Polydice, Inc. 2019 25

    View full-size slide

  26. © Polydice, Inc. 2019 26

    View full-size slide

  27. Bonus 1: We made a Ruby library
    © Polydice, Inc. 2019 27

    View full-size slide

  28. © Polydice, Inc. 2019 28

    View full-size slide

  29. Bonus 2: Exit strategy
    © Polydice, Inc. 2019 29

    View full-size slide

  30. © Polydice, Inc. 2019 30

    View full-size slide

  31. Q&A
    © Polydice, Inc. 2019 31

    View full-size slide