In this presentation, I talk about OAuth and OIDC. I explain what they are, and how they work. Then I show a JHipster app that uses Keycloak and allows user registration. Next, I turn it into a PWA, and deploy it to Heroku. Along the way, I show how to switch to Okta. Then I show how Okta allows user registration, as well as UI customization. Blog post: https://developer.okta.com/blog/2018/06/25/react-spring-boot-photo-gallery-pwa Screencast: https://youtu.be/GlJWUqy1SJM Source code on GitHub: https://github.com/oktadeveloper/okta-react-photo-gallery-example

1. Matt Raible | @mraible
Add SSO to Your JHipster Apps with OIDC
June 21, 2018 #jhipsterconf
https://www.flickr.com/photos/chriswaits/5720940652

2. Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate

6. developer.okta.com

7. What About You?
How many people ❤ Java?
What about JavaScript? … or TypeScript?
Who wants to be a Java Hipster?
…
Who likes Fortnite?

8. An open standard for authorization; anyone can implement it
Provides “secure delegated access” to client applications
Works over HTTPS and authorizes:
Devices
APIs
Servers
Applications
… with access tokens rather than credentials
What is OAuth?

9. OAuth 2.0
Enables apps to obtain limited access (scopes) to
a user’s data without giving away a user’s
password
Decouples authentication from authorization
Supports multiple use cases addressing different
client capabilities and deployment models
Server-to-server apps
Browser-based apps
Mobile/Native apps
Consoles/TVs
Web-scale delegated authorization framework for REST/APIs
Protecting APIs
Since
October 2012

10. Hotel Key Cards, but for Apps

11. Hotel Key Cards, but for Apps
OAuth Authorization Server Resource (API)Access Token

12. OAuth Simplified
App requests authorization from User1
User authorizes App and delivers proof2
App presents proof of authorization to server to get a Token3
Token is restricted to only access what the User authorized
for the specific App
4

13. JSON Web Token (JWT)
base64url(Header) + “.” + base64url(Claims) + “.” + base64url(Signature)
eyJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJodHRwczovL2
V4YW1wbGUub2t0YS5jb20iLCJzdWIiOiIwMHVncmVuT
WVxdllsYTRIVzBnMyIsImF1ZCI6IncyNTVIRVdpU1U0
QXVOeEVqZWlqIiwiaWF0IjoxNDQ2MzA1MjgyLCJleHA
iOjE0NDYzMDg4ODIsImFtciI6WyJwd2QiXSwiYXV0aF
90aW1lIjoxNDQ2MzA1MjgyLCJlbWFpbCI6ImthcmxAZ
XhhbXBsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1
ZX0.XcNXs4C7DqpR22LLti777AMMVCxM7FjEPKZQnd-
AS_Cc6R54wuQ5EApuY6GVFCkIlnfbNmYSbHMkO4H-
L3uoeXVOPQmcqhNPDLLEChj00jQwZDjhPD9uBoNwGyi
Z9_YKwsRpzbg9NEeY8xEwXJFIdk6SRktTFrVNHAOIhE
Qsgm8
{
"alg": "RS256”
"kid": "123456789"
}
{
"iss": "https://example.okta.com",
"sub": "00ugrenMeqvYla4HW0g3",
"aud": "w255HEWiSU4AuNxEjeij",
"iat": 1446305282,
"exp": 1446308882,
"amr": [
"pwd"
],
"auth_time": 1446305282,
"email": "karl@example.com",
"email_verified": true
}
Header Claims
Signature
Header
Claims

14. Validate ID
Token
Token Endpoint
Authorization Endpoint
/.well-known/
openid-configuration
JWKS Endpoint
UserInfo Endpoint
OAuth 2.0 Authorization Server &
OpenID Connect Provider (OP)
OAuth 2.0 Resource Server
Client
(Relying Party)
1
3
2
54
1 Discover OpenID Provider Metadata
2
Perform OAuth flow to obtain a ID
token and/or access token
3 Get JSON Web Key Set (JWKS) for
signature keys
4
Validate ID token
(JSON Web Token)
5
Get additional user attributes with
access token from UserInfo
endpoint
OpenID Connect

15. Authorization Code Flow (Web)
Authenticate via User Agent
1
User starts flow by visiting Web App
Client with User Agent
2
Client sends authentication request
with openid scope via browser
redirect to Authorize Endpoint on
Authorization Server
3
User authenticates and consents to
Client to access user’s identity
4
Authorization Code Grant and optionally
ID Token for Web App is returned to Client
via browser redirect
4
2
3
1
User
Web App
(Client)
Resource
Server (RS)
/UserInfo
Authorization
Server (AS)

16. Authorization Code Flow (Web)
Exchange Grant for Tokens
1b
1a
User
Web App
(Client)
Resource
Server (RS)
/UserInfo
Authorization
Server (AS)
2
2
Client optionally fetches additional
claims with Access Token from UserInfo
endpoint
Client authenticates & exchanges
Authorization Code Grant with token
endpoint on Authorization Server for an ID
Token, Access Token and optionally
Refresh Token
1

17. ⏩ Convert to PWA
🔑 Keycloak + Registration
$ Save User Snapshot
⛅ Okta + Registration
💜 Deploy to Heroku
🍿 Okta Customization
JHipster OIDC Demo

18. OAuth Specification
oauth.net
OAuth 2.0 Servers
oauth.com
Additional Resources

19. developer.okta.com/blog

20. Written with Asciidoctor
Quick and to the point, 162 pages
Developed a Real World App:
www.21-points.com
Free Download from
infoq.com/minibooks/jhipster-4-mini-book
The JHipster Mini-Book

21. Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper