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, ...
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