Option to set Angular OAuth2 login page (backwards compatible with Spring-Security default OAuth2 login)

[klopfdreh]

As mentioned here #1867 - bootstrap shouldn't be used and removed.

When I tested Spring Cloud Data Flow Server 2.10.0-M2 and used a custom DataflowOAuthSecurityConfiguration for CSP settings, I found the login page to still use bootstrap.

[claudiahub]

@klopfdreh Thanks Tobias for finding this,
I did some investigation on the Angular repo.
It seems we're not injecting directly from Dataflow UI those two css files,
Do you perhaps have a target URL for the page located in the above screenshot ?
so I can then explore more outside the Angular context

Thanks

[klopfdreh]

It is just /login with OAuth2 configured. I am also going to search for it. 👍

[claudiahub]

@klopfdreh It seems there's no route associated in the Angular code.
I guess the /login should be the redirected URL for the Auth 2.0 authentication form -
I took a glance also on Spring Dataflow main repository (backend) and found a .adoc file ( see /spring-dataflow-docs/src/main/asciidoc/configuration.adoc line 747 ) where this redirect is specified.

[klopfdreh]

Yes but the default redirection {baseUrl}/login/oauth2/code/{registrationId} points to the scdf server itself. I guess it is the default login page of Spring Security OAuth2 / Spring Security.

[claudiahub]

Yep, same guess on my side. So I believe this same issue should be moved to Spring Security.

[klopfdreh]

Found it (I guess) - the class is called LoginPageGeneratingWebFilter and it includes Bootstrap CSS here:

https://github.com/spring-projects/spring-security/blob/ea777a3d7b335eb37dcb4605595220d931703ca5/web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java#L98

It is also responsible for OAuth2 authentication, because it provides setOauth2AuthenticationUrlToClientName:

https://github.com/spring-projects/spring-security/blob/ea777a3d7b335eb37dcb4605595220d931703ca5/web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java#L59

and it matches /login:

https://github.com/spring-projects/spring-security/blob/ea777a3d7b335eb37dcb4605595220d931703ca5/web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java#L49

Edit: Use permanent links at references.

Maybe it would be good to create a custom login form that also uses the login page of the SCDF and Angular: https://docs.spring.io/spring-security/reference/servlet/authentication/passwords/form.html

When you click on logout, then you are redirected to a login page which is styled with Spring Cloud Data Flow lookup. The only thing which has to be adjusted would be to show the registrations like mentioned here, because there can be several: https://docs.spring.io/spring-cloud-dataflow/docs/current/reference/htmlsingle/#configuration-security-oauth2

So basically if you only provide OAuth2 as authorization standard create a form that is created the same way as in this method:

https://github.com/spring-projects/spring-security/blob/ea777a3d7b335eb37dcb4605595220d931703ca5/web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java#L140

Last edit: I don't think this is an Spring Security issue, because they only provide a Default-Implementation. I guess the customization should be in Spring Cloud Data Flow and should not use Bootstrap but Angular as presentation layer.

[claudiahub]

Exactly. I found the same files on the Spring Security repository.

I see clearly they're injecting there the bootstrap minified css.

[klopfdreh]

So based on the things we found out I would suggest:

1. Configure the backend to show a custom login form as mentioned in my previous commit and by the documentation of Spring Security
2. Create new Rest Endpoints to provide the required authorization data like registrations and so on to the Angular frontend
3. Create a new folder in spring-cloud-data-flow-ui called login and place in there the pages to be shown at login which are using the data from the rest endpoints.

Because it is a login page, it should be excluded from redirection to the login page from the UI. Also be aware of CSRF Tokens which are checked by Spring Security.

the good thing is that you have full control over the appearance of the login and you can design it the SCDF-way.

[onobc]

Thanks for the analysis and suggested plan @klopfdreh . I am marking this for team meeting and we will discuss further. I will keep you posted on the direction w/ an update here in this ticket.

[klopfdreh]

Thanks again! 😀 I guess it is a mediocre effort but improves the appearance a lot. If I can assist just let me know.