Spring Boot + Javascript app

Questions
1

Hi! I have a spring boot application with javascript frontend and I want to integrate okta security. For this i have added related dependecies (okta v. 0.6.0) and configuration in application.properties. ( okta.oauth2.issuer={}/oauth2/default
okta.oauth2.clientId={}
okta.oauth2.clientSecret={}.
I have added @EnableOAuth2Sso annotation. When I run the application, it redirect me to okta Login page, and then back to my application. The problem is, I am not able to save acces token for future use ( ajax call to my backend). In my javascript code I have integrated okta-sign-in widget but it doesn’t help because hasTokensInUrl method is called after redrirect and i have no token in Url. how can I use callback, or save token in local storage in order to get in javascript code?

2

Hello @rares! The @EnableAuth2Ssso is deprecated, unless you’re still using Spring Boot 1.5.x. Are you using any sort of JavaScript framework on your frontend? Maybe we have a tutorial that will help you.

In the meantime, if you want to keep your apps separate (meaning you don’t want to package them together), you might want to setup your backend as a resource server only. That way, you can do the authentication on your frontend and pass the access token to the backend. If you package them together, you don’t need to worry about implementing authentication on your frontend, just on your backend. That’s how I’ve implemented OAuth / OIDC in JHipster (an application generator that creates a Spring Boot backend and a JS frontend).

3

hy @mraible and thank you for your quick response! Yes, you are right. I am using SpringBoot 2.1.4 and for my frontend I am using jQuery. Now, If I remove @EnableAuth2Ssso annotation and run again the application it will point me to basic login (see picture). My application.properties looks like this: okta.oauth2.issuer={}/oauth2/default
okta.oauth2.clientId={}
okta.oauth2.clientSecret={} . should I also add redirect parameter ?. for my frontend I simply added dependecies and I have created a new .js page containing sign-in widget example.

22
221280×871 23 KB
ss221
ss221860×925 30.1 KB

4

I mention that I want to implement the very basic Okta Login functionality. If I am securing only my back end, will be ok in the beginning because it will redirect me to Okta login page the I will be able to use the application. but when I make a ajax call to back end I get 403 forbidden for Rest API. this is why I will prefer to secure only the front end ( to ask at the beginning for username and password and that’s it). This could be easily possible?

5

If you use the Okta Spring Boot starter with no Security configuration class, it should redirect you to Okta to login when you access http://localhost:8080. If that’s not happening, it’s because you don’t have a src/main/resources/application.properties (or application.yml) file with your Okta values filled in. It defaults to the login screen you see when these properties are not defined.

If you want to setup your Spring Boot app to require login AND to be a resource server (that can process access tokens from a client), you’ll need to add a SecurityConfiguration class like the following:

@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests().anyRequest().authenticated()
            .oauth2Login()
            .and()
            .oauth2ResourceServer().jwt();
    }
}

You’ll also need to add http://localhost:8080/login/oauth2/code/okta as a login redirect URI. There’s more information in our Spring Boot starter’s documentation.

This blog post might be helpful to see how Spring Boot’s OAuth support has changed between 1.x and 2.x: https://developer.okta.com/blog/2019/03/05/spring-boot-migration

6

Now I am able to run the application which directs me to Okta Login Page. After login redirects me to http://localhost:8080. In my frontend app I have implemented Okta Sign in Widget. https://developer.okta.com/quickstart-fragments/widget/default-example/#add-sign-in-widget-assets-to-your-project . But the issue is that I cannot get the acces token because hasTokenInUrl return false so I am not able to store accessToken in order to use it with ajax call when I make a post request to my backed. How should I “store” the access token in URL or use it in my frontend ?

7

After login, this is the error I get when I make a ajax call “POST” to my back end.
Failed to load resource: the server responded with a status of 403 () [http://localhost:8080/wdcCtrl/selectTriples/]

{“timestamp”:“2020-01-23T10:02:19.212+0000”,“status”:403,“error”:“Forbidden”,“message”:“Forbidden”,“path”:"/wdcCtrl/selectTriples/"}
I suppose that is because I am not sending the accessToken; because I’m not able to retrive it in frontend. That’s why I will be great If I will know how to retreive accessToken from url.

8

Here’s some example code I wrote for the Sign-In Widget that shows how to get an access token using auth code flow and PKCE. https://github.com/okta/okta-signin-widget/issues/947#issuecomment-568104981