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

Aa0358f6740f1bf02911e5300e08e800?s=128

Richard Lee

January 23, 2019
Tweet

Transcript

  1. Account Kit after 1 year By Richard @ Ѫྉཧ ©

    Polydice, Inc. 2019 1
  2. © Polydice, Inc. 2019 2

  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
  4. © Polydice, Inc. 2019 4

  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
  6. That's more than SMS auth! © Polydice, Inc. 2019 6

  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
  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
  9. Instant Verification Without typing anything! © Polydice, Inc. 2019 9

  10. © Polydice, Inc. 2019 10

  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
  12. Integration guide © Polydice, Inc. 2019 12

  13. © Polydice, Inc. 2019 13

  14. JS setup <script> // initialize Account Kit with CSRF protection

    AccountKit_OnInteractive = function(){ AccountKit.init( { appId:"{{FACEBOOK_APP_ID}}", state:"{{csrf}}", version:"1.3" } ); }; </script> © Polydice, Inc. 2019 14
  15. JS start flow <script> // phone form submission handler function

    smsLogin() { AccountKit.login( 'PHONE', {countryCode: {{countryCode}}, phoneNumber: {{phoneNumber}}}, loginCallback ); } </script> © Polydice, Inc. 2019 15
  16. JS callback flow <script> // login callback function loginCallback(response) {

    if (response.status === "PARTIALLY_AUTHENTICATED") { var code = response.code; var csrf = response.state; // Send code to server to exchange for access token } else if (response.status === "NOT_AUTHENTICATED") { // handle authentication failure } else if (response.status === "BAD_PARAMS") { // handle bad parameters } } </script> © Polydice, Inc. 2019 16
  17. Account Kit Graph API GET https://graph.accountkit.com/v1.3/me/? access_token=<access_token> { id: "1234512345123451",

    phone: { number: "+15551234567", country_prefix: "1", national_number: "5551234567" }, application: { id: "5432154321543210" } } © Polydice, Inc. 2019 17
  18. Pros & Cons © Polydice, Inc. 2019 18

  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
  20. Cons 1. China and some edge cases 2. Unremovable Facebook

    branding in SMS 3. UI is super limited © Polydice, Inc. 2019 20
  21. Our Account Kit experience © Polydice, Inc. 2019 21

  22. © Polydice, Inc. 2019 22

  23. © Polydice, Inc. 2019 23

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

  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
  26. © Polydice, Inc. 2019 26

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

    2019 27
  28. © Polydice, Inc. 2019 28

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

  30. © Polydice, Inc. 2019 30

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