Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Add SSO to Your JHipster Apps with OIDC - JHipsterConf 2018

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

Matt Raible
PRO

June 21, 2018
Tweet

More Decks by Matt Raible

Other Decks in Programming

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": "[email protected]",
    "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