Ember and OAuth - Speaker Deck

Slide 1

Slide 1 text

Ember & OAuth Matthew Rudy Jacobs Wednesday 15th January 2014 @ EmberLondon

Slide 2

Slide 2 text

@matthewrudy

Slide 3

Slide 3 text

cronycle.com

Slide 4

Slide 4 text

The Goal

Slide 5

Slide 5 text

Authenticate via a 3rd party

Slide 6

Slide 6 text

Obtain access to a 3rd party API

Slide 7

Slide 7 text

The Tool

Slide 8

Slide 8 text

OAuth2 http://tools.ietf.org/html/rfc6749

Slide 9

Slide 9 text

“The Road to Hell”?

Slide 10

Slide 10 text

Actually it’s alright

Slide 11

Slide 11 text

4 Different Flows otherwise known as “grant types”

Slide 12

Slide 12 text

4 Grant Types • Authorization Code • Implicit • Resource Owner Password Credentials • Client Credentials

Slide 13

Slide 13 text

Authorization Code

Slide 14

Slide 14 text

Authorization Code

Slide 15

Slide 15 text

Authorization Code auth code access token /auth?code=abc123

Slide 16

Slide 16 text

Implicit

Slide 17

Slide 17 text

Implicit S3

Slide 18

Slide 18 text

Implicit S3 access token /auth#access_token=abc123

Slide 19

Slide 19 text

Password

Slide 20

Slide 20 text

Password

Slide 21

Slide 21 text

Password access token { access_token: “abc123” }

Slide 22

Slide 22 text

Client Credentials

Slide 23

Slide 23 text

Client Credentials

Slide 24

Slide 24 text

Implicit Grant Flow this is what we want!

Slide 25

Slide 25 text

ember-oauth2

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Initiate the Auth

Slide 28

Slide 28 text

Slide 29

Slide 29 text

We have a token

Slide 30

Slide 30 text

Except we don’t!

Slide 31

Slide 31 text

This is not Implicit!

Slide 32

Slide 32 text

This is not Implicit! /callback?code=…

Slide 33

Slide 33 text

This is not Implicit! /callback?code=… /callback#access_token=…

Slide 34

Slide 34 text

Github doesn’t do Implicit Grant!

Slide 35

Slide 35 text

Github suggests you use passwords

Slide 36

Slide 36 text

TLDR; pure client-side OAuth is poorly supported

Slide 37

Slide 37 text

But what about a hybrid approach?

Slide 38

Slide 38 text

Authorization Code Flow (as an API) ❤️

Slide 39

Slide 39 text

Stick Ember in the middle

Slide 40

Slide 40 text

The Concept

Slide 41

Slide 41 text

GET /oauths/new {url: “https://github.com/auth?…”} https://github.com/auth?…

Slide 42

Slide 42 text

GET /oauths/new {url: “https://github.com/auth?…”} https://github.com/auth?… callback POST /oauths {access_token: “abc123”}

Slide 43

Slide 43 text

GET /oauths/new {url: “https://github.com/auth?…”} https://github.com/auth?… callback POST /oauths {access_token: “abc123”}