Google auth

Problem

"I have an admin tool/dashboard/whatevs.

I want to make sure only OVO employees can access it."

Solution?

Network (layer 3) security

i.e. restrict access to only the

office and VPN IP ranges

Problems

  • Painful to maintain
    • Copies of the IP range list all over the place
  • No defence in depth
    • Anyone who gets onto the office network can access everything
  • Your app has no idea who the user is
    • Can't do any useful audit logging
    • Can't personalise the app for each user

We need authentication!

Authentication

i.e. making the user prove their identity

Many ways to do this:

  • App stores list of usernames and passwords
  • LDAP/Active Directory
  • OAuth
    • Google, Facebook, Twitter, GitHub, ...

Google

We all have Google accounts, so let's use them for auth

Authentication

via authorisation

  • User authorises the app to access a Google profile
  • Google only allows users to do this for their own profile
  • As a side-effect, the user has authenticated herself

OAuth 2.0/OIDC

OAuth 2.0

Terminology

Resource Owner

User Agent

Client

(my-app.ovo.com)

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Resource Owner

Client

Authorization Server

Resource Server

GET /

(not logged in)

Web server app

Authorization Code Grant flow

Resource Owner

Client

303 SEE_OTHER

https://accounts.google.com/o/oauth2/v2/auth?

response_type=code&

client_id=...&

scope=openid email profile&

state=asdfqwer&

redirect_uri=http://my-app.ovo.com/callback

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Resource Owner

Client

GET

https://accounts.google.com/o/oauth2/v2/auth?

response_type=code&

client_id=...&

scope=openid email profile&

state=asdfqwer&

redirect_uri=http://my-app.ovo.com/callback

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Resource Owner

Client

303 SEE_OTHER

http://my-app.ovo.com/callback?

code=xyxyxyxyxyx&

state=asdfqwer

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Resource Owner

Client

GET

http://my-app.ovo.com/callback?

code=xyxyxyxyxyx&

state=asdfqwer

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Resource Owner

Client

Check

state

Authorization Server

Resource Server

GET

http://my-app.ovo.com/callback?

code=xyxyxyxyxyx&

state=asdfqwer

Web server app

Authorization Code Grant flow

Client

GET

https://www.googleapis.com/oauth2/v4/token?

code=xyxyxyxyxyx&

client_id=...&

client_secret=...&

grant_type=authorization_code&

redirect_uri=http://my-app.ovo.com/callback
 

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Client

access_token and id_token

(JWT containing user ID and email address)

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Client

GET

https://www.googleapis.com/oauth2/v3/userinfo

Authorization: Bearer <access token>

Authorization Server

Resource Server

Web server app

Authorization Code Grant flow

Client

User profile including given name, family name, profile picture, gender, ...

Authorization Server

Resource Server

Phew!

Single page app

  • Authorization Code Grant flow w/ public client
  • Implicit Grant flow

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Single page app

Implicit Grant flow

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

GET /

(not logged in)

Single page app

Implicit Grant flow

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

HTML and JS (includes client_id)

JS

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

GET

https://accounts.google.com/o/oauth2/v2/auth?

response_type=token&

client_id=...&

scope=openid email profile&

state=asdfqwer&

redirect_uri=http://my-app.ovo.com/callback

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

303 SEE_OTHER

https://my-app.ovo.com/callback#

state=asdfqwer&

access_token=yoloyolo&

token_type=Bearer&

expires_in=3600

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

303 SEE_OTHER

https://my-app.ovo.com/callback#

state=asdfqwer&

access_token=yoloyolo&

token_type=Bearer&

expires_in=3600

Check

state

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

GET

https://www.googleapis.com/oauth2/v3/tokeninfo?

access_token=asdfasdf

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

JSON response including

client_id and user_id

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

JSON response including

client_id and user_id

Check

client_id

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

GET

/payments/history

Authorization: Bearer <access token>

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

Validate access token

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

JSON response including

client_id and user_id

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

JSON response including

client_id and user_id

Check

client_id

Single page app

Resource Owner

Your app's API

Authorization Server

Resource Server

CDN

JS

Implicit Grant flow

Respond with payments history

Phew!

Implementation demo

Bonus content!

Authorisation using

Google group membership

Bonus content!

Google Sign-In for Websites

 

The official Getting Started guide is good

https://developers.google.com/identity/sign-in/web/

Made with Slides.com