Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Add SSO to Your JHipster Apps with OIDC - JHipsterConf 2018

218 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Add SSO to Your JHipster Apps with OIDC - JHipsterConf 2018

  1. 1. Matt Raible | @mraible Add SSO to Your JHipster Apps with OIDC June 21, 2018 #jhipsterconf https://www.flickr.com/photos/chriswaits/5720940652
  2. 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
  3. 3. developer.okta.com
  4. 4. What About You? How many people ❤ Java? What about JavaScript? … or TypeScript? Who wants to be a Java Hipster? … Who likes Fortnite?
  5. 5. 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?
  6. 6. 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
  7. 7. Hotel Key Cards, but for Apps
  8. 8. Hotel Key Cards, but for Apps OAuth Authorization Server Resource (API)Access Token
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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)
  13. 13. 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
  14. 14. ⏩ Convert to PWA 🔑 Keycloak + Registration $ Save User Snapshot ⛅ Okta + Registration 💜 Deploy to Heroku 🍿 Okta Customization JHipster OIDC Demo
  15. 15. OAuth Specification oauth.net OAuth 2.0 Servers oauth.com Additional Resources
  16. 16. developer.okta.com/blog
  17. 17. 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
  18. 18. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper

×