Learning to dance the OAuth (without stepping on anyone's toes)

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

Bonjour! @deutschevita Anabella Spinelli Software Engineer

@deutschevita How did I get here?

@deutschevita My first OAuth experience

@deutschevita What is OAuth?

@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

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

@deutschevita 2 use cases

@deutschevita Authentication

@deutschevita Feature Integration

@deutschevita OAuth apps (clients)

@deutschevita Redirect URI

@deutschevita Client ID & Client Secret

@deutschevita The simplest OAuth app that I could think of

@deutschevita The simplest OAuth app @deutschevita

@deutschevita Blessings Pain points

@deutschevita

@deutschevita Pain points

@deutschevita Blessings Pain points

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

Pain points in client registration @deutschevita

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

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

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

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

Typeform's dev docs Next stop @deutschevita

Dev docs blessings

@deutschevita Basic information to get started Dev docs blessings

@deutschevita A map for the OAuth dance Client App User
Typeform Dev docs blessings

Pain points in dev docs @deutschevita

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

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

@deutschevita No troubleshooting section Pain points in dev docs

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

@deutschevita Let's dance!

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

@deutschevita The authorize request Client app User Typeform @deutschevita

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

@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

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

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

@deutschevita The consent screen User Typeform Client app @deutschevita

@deutschevita Consent Basic info Requested scopes CTAs Valid

@deutschevita Consent Error

@deutschevita Consent Valid

@deutschevita @deutschevita The redirection User Typeform Client app

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

@deutschevita The token request User Typeform Client app @deutschevita

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

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

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

@deutschevita Our token is here! User Typeform Client app @deutschevita

@deutschevita 9j4VmCjKt6UAuoE5XAkjaayt LFFRdfdnzhdxwob69QWZ User Client application Scopes

@deutschevita Wrapping up

@deutschevita Client app User Typeform Authorize Consent Redirect Token

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

@deutschevita Our learnings

@deutschevita Our learnings Testing our guides with junior devs

@deutschevita Our learnings Having descriptive error states

@deutschevita Our learnings Give people a map they can follow

@deutschevita Our learnings Providing well-finished dev tools

@deutschevita This got me thinking...

@deutschevita

@deutschevita Our pain points are someone else's advantage

@deutschevita Blessings

@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

@deutschevita Anabella Spinelli @anabella @deutschevita Merci!

Learning to dance the OAuth (without stepping o...

Learning to dance the OAuth (without stepping on anyone's toes)

Other Decks in Technology

Featured

Transcript