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
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
User Agent
Client
(my-app.ovo.com)
Authorization Server
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
Resource Server
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Client
Authorization Server
Resource Server
GET /
(not logged in)
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
Client
303 SEE_OTHER
http://my-app.ovo.com/callback?
code=xyxyxyxyxyx&
state=asdfqwer
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
Client
GET
http://my-app.ovo.com/callback?
code=xyxyxyxyxyx&
state=asdfqwer
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
Client
Check
state
![](https://media.slid.es/uploads/201663/images/3925422/isolated-1052504_640.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
GET
http://my-app.ovo.com/callback?
code=xyxyxyxyxyx&
state=asdfqwer
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Client
access_token and id_token
(JWT containing user ID and email address)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Client
GET
https://www.googleapis.com/oauth2/v3/userinfo
Authorization: Bearer <access token>
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Web server app
Authorization Code Grant flow
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Client
User profile including given name, family name, profile picture, gender, ...
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Authorization Server
Resource Server
Phew!
Single page app
- Authorization Code Grant flow w/ public client
- Implicit Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Single page app
Implicit Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
GET /
(not logged in)
Single page app
Implicit Grant flow
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
HTML and JS (includes client_id)
JS
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3925422/isolated-1052504_640.png)
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
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
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Implicit Grant flow
JSON response including
client_id and user_id
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Implicit Grant flow
JSON response including
client_id and user_id
Check
client_id
![](https://media.slid.es/uploads/201663/images/3925422/isolated-1052504_640.png)
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Implicit Grant flow
GET
/payments/history
Authorization: Bearer <access token>
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Implicit Grant flow
Validate access token
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Implicit Grant flow
JSON response including
client_id and user_id
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
Your app's API
Authorization Server
Resource Server
CDN
JS
Implicit Grant flow
JSON response including
client_id and user_id
Check
client_id
![](https://media.slid.es/uploads/201663/images/3925422/isolated-1052504_640.png)
Single page app
![](https://media.slid.es/uploads/201663/images/3894625/Gnome-computer.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894631/240px-Gnome-stock_person.svg.png)
Resource Owner
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
![](https://media.slid.es/uploads/201663/images/3894630/Google_-G-_Logo.svg.png)
![](https://media.slid.es/uploads/201663/images/3894627/Server-database.svg.png)
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
Google auth
By Chris Birchall
Google auth
- 2,669