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
   

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. developer.okta.com
   

   View Slide

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

   View Slide

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?
   

   View Slide

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
   

   View Slide

10. Hotel Key Cards, but for Apps
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

19. developer.okta.com/blog
    

    View Slide

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
    

    View Slide

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

    View Slide