Learning the OAuth Dance (Without Stepping on Anyone's Toes) Anabella Spinelli, Former QA & Future Developer, Typeform Apply to be a speaker here - https://apidays.typeform.com/to/J1snsg

1. @deutschevita
Learning the
OAuth dance
without stepping on anyone's toes

2. Bonjour!
@deutschevita
Anabella Spinelli
Software Engineer

3. @deutschevita
How did I get here?

4. @deutschevita
My first OAuth
experience

5. @deutschevita
What is OAuth?

6. @deutschevita
OAuth stands for Open Authorization. It's a
framework that enables a third-party application
to obtain limited access to an HTTP service on
behalf of a resource owner by orchestrating an
approval interaction between the resource owner
and the HTTP service.
Smart definition

7. @deutschevita
Easy definition
It's a set of instructions for two apps to
interact with the purpose of granting access
to protected user data.

8. @deutschevita
2 use cases

9. @deutschevita
Authentication

10. @deutschevita
Feature
Integration

11. @deutschevita
OAuth apps
(clients)

12. @deutschevita
Redirect URI

13. @deutschevita
Client ID
&
Client Secret

14. @deutschevita
The simplest OAuth app
that I could think of

15. @deutschevita
The simplest OAuth app
@deutschevita

16. @deutschevita
The simplest OAuth app
@deutschevita

17. @deutschevita
Blessings
Pain points

18. @deutschevita

19. @deutschevita
Pain points

20. @deutschevita
Blessings
Pain points

21. @deutschevita
Register a client
First step...
with Typeform

22. Pain points in client registration
@deutschevita

23. @deutschevita
Asking for a lot of
non-crucial information
Pain points in client registration

24. @deutschevita
Not having view or edit screens
Pain points in client registration
@deutschevita

25. @deutschevita
Not showing redirect URIs
Pain points in client registration
@deutschevita

26. @deutschevita
The OAuth dance
What is...
anyway?

27. Typeform's dev docs
Next stop
@deutschevita

28. Dev docs blessings

29. @deutschevita
Basic information
to get started
Dev docs blessings

30. @deutschevita
A map for the
OAuth dance
Client App User TypeformDev docs blessings

31. Pain points in dev docs
@deutschevita

32. @deutschevita
Not referencing the map diagram
Pain points in dev docs

33. @deutschevita
More technical than practical info
vs.
Pain points in dev docs

34. @deutschevita
No troubleshooting section
Pain points in dev docs

35. @deutschevita
OAuth definition
Client Registration
Developer guide
Half-way summary

36. @deutschevita
Let's dance!

37. @deutschevita
4 steps in the OAuth dance
1. Authorize
2. Consent
3. Redirection
4. Token

38. @deutschevita
The
authorize
request
Client app User Typeform
@deutschevita

39. @deutschevita
api.typeform.com/oauth/authorize?
client_id={myId}
&scope=scope1+scope2...
&redirect_uri={myRedirectUri}
My app
Authorize

40. @deutschevita
Hey Typeform, it's me! I want to access this
information on this user's account, can you
ask them for me? Then let me know at this
address. Thanks!
My app
Authorize

41. @deutschevita
[
accounts:read,
forms:read,
themes:write
]
Authorize Scopes
Scopes are just permissions

42. @deutschevita
api.typeform.com/oauth/authorize?
client_id={myId}
&scope=scope1+scope2...
&redirect_uri={myRedirectUri}
My app
Authorize

43. @deutschevita
The
consent
screen
User TypeformClient app
@deutschevita

44. @deutschevita
Consent
Basic
info
Requested
scopes
CTAs
Valid

45. @deutschevita
Consent
Error

46. @deutschevita
Consent
Valid

47. @deutschevita
@deutschevita
The
redirection
User TypeformClient app

48. @deutschevita
localhost:9000/redirect
?code=cz9x8v7z9x6vza0s9d
Typeform
Redirect

49. @deutschevita
The
token
request
User TypeformClient app
@deutschevita

50. api.typeform.com/oauth/token?
client_secret={mySecret}
&code=cz9x8v7z9x6vza0s9d
&redirect_uri={myRedirectUri}
My app
Token
@deutschevita

51. Ok! Here's my client secret and that code you
just sent me, also my redirect URI so you
know I'm 100% legit.
My app
Token
Can I have a token now?
@deutschevita

52. @deutschevita
{
"token": "as98dn98vna9sdan7s..."
}
Typeform
Token

53. @deutschevita
Our
token
is here!
User TypeformClient app
@deutschevita

54. @deutschevita
9j4VmCjKt6UAuoE5XAkjaayt
LFFRdfdnzhdxwob69QWZ
User Client application Scopes

55. @deutschevita
Wrapping up

56. @deutschevita
Client app User Typeform
Authorize
Consent
Redirect
Token

57. @deutschevita
My app knows my user's name! Yay!
@deutschevita

58. @deutschevita
Our learnings

59. @deutschevita
Our learnings
Testing our guides with junior devs

60. @deutschevita
Our learnings
Having descriptive error states

61. @deutschevita
Our learnings
Give people a map they can follow

62. @deutschevita
Our learnings
Providing well-finished dev tools

63. @deutschevita
Our learnings
Providing well-finished dev tools

64. @deutschevita
Our learnings
Providing well-finished dev tools

65. @deutschevita
This got me thinking...

66. @deutschevita

67. @deutschevita
Our pain points are someone else's advantage

68. @deutschevita
Blessings

69. @deutschevita
● The OAuth 2.0 specification
● Typeform's OAuth docs
● The beginner's guide to OAuth dancing
● The most basic OAuth app repo
● The Net Ninja's OAuth tutorial with PassportJS
Useful resources to read on

70. @deutschevita
Anabella Spinelli
@anabella
@deutschevitaMerci!