Search code examples
angularoauth-2.0spring-security-oauth2

An application is implemented by Spring Boot + Angular and sign on with OAuth2 authorization code flow

I'm new in spring security and angular. We develop with spring boot and angular framework in our project. In order to deploy, we build by maven which do:

  • Step 1. ng build to build resources
  • Step 2. copy Step 1 resources to classpath:/static
  • Step 3. build a runnable jar

On deploy phase, browser will get web resources from spring boot webapp and sign on(OAuth2 Authorization Code flow) IdM server. In this situation, access token are stored on server side, and secure API by spring security. See Figure 1. Figure 1

But on development phase, there are three apps: spring boot webapp, angular webapp, and IdM server.(See Figure 2) Figure 2

Here are my questions:

  1. Does it a good way for angular webapp implements OAuth2 authorization code flow and get user info from IdM server? See Figure 2 (1.2)
  2. How to use secured api provided by spring boot webapp from angular webapp?(2), and in this situation, what should i do in spring boot webapp?(1.1)
Solution

  • There are to two different OAuth2 configuration options for JS application running in a browser:

    • use a BFF between the JS app and the resource server
    • make the JS app an OAuth2 public client

    The BFF pattern

    A Backend For Frontend is a middleware on your server configured as an OAuth2 client.

    Requests from the front-end to the BFF are secured with sessions (cookies) and request from the BFF to resource servers are secured with access tokens (Bearer Authorization header).

    The BFF is responsible for storing tokens in session and replacing the session cookie with the accès token in session before forwarding a request from the browser to REST APIs (resource servers).

    Spring Cloud Gateway can be configured as BFF. I wrote a tutorial for that on Baeldung.

    JS Application Configured as OAuth2 Public Client

    Use an OAuth2 / OIDC client library for tokens handling (redirection to the authorization-server, redirection back from authorization-server with authorization-code, exchange authorization-code for tokens, refresh tokens) and also requests authorization (add bearer authorization header to requests on secured resources). angular-auth-oidc-client is my favorite for Angular.

    Reousrce Server

    An application secured with OAuth2 access tokens is a resource server.

    Spring Boot has a spring-boot-starter-oauth2-reource-server and I wrote my own starters arround it to further push auto-configuration from properties.

    Tutorials for both Spring official starters and mine here: https://github.com/ch4mpy/spring-addons/tree/master/samples/tutorials.

    Those tutorials include role based access-control from most basic uses cases to quite advanced ones. Roles mapping is illustrated for Keycloak, all you have to change is the private claim used for roles. If you are not sure what this claim is for your authorization-server, refer to the doc or open an access-token in https://jwt.io