Add SSO to Your JHipster Apps with OIDC - JHipsterConf 2018

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

Transcript

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 User 1 User authorizes App and delivers proof 2 App presents proof of authorization to server to get a Token 3 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 5 4 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