Account Kit after 1 year

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

Shared at Facebook Developer Circle Taipei #7

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