I am trying to configure Social Facebook login within my application. Front end is Angular on https://localhost:4200 and backend is Spring Boot on http://localhost:8080
This is different problem from others saw on SO already, as none of described problems uses spring-boot-starter-oauth2-client
from what I can see.
Spring boot version is 2.4.1 and as mentioned I am using spring-boot-starter-oauth2-client
, which has the following configuration in props:
spring.security.oauth2.client.registration.facebook.client-id=ID_
spring.security.oauth2.client.registration.facebook.client-secret=SECRET_
I have configured my backend that way:
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.cors().and().csrf().disable()
.authorizeRequests().anyRequest().authenticated()
.and()
.oauth2Login();
}
and CORS configuration:
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*");
}
};
}
It works as expected at the beginning. While front end user is unauthenticated any request to any endpoints results in 302 response
For example:
Request URL: http://localhost:8080/me
Request Method: GET
Status Code: 302
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin
while in response headers there is a:
Location: http://localhost:8080/oauth2/authorization/facebook
So, as expected browser performs another GET for resource from header and gets another redirect:
Request URL: http://localhost:8080/oauth2/authorization/facebook
Request Method: GET
Status Code: 302
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin
and redirect URL from response headers is:
Location: https://www.facebook.com/v2.8/dialog/oauth?response_type=code&client_id=1239356666462449&scope=public_profile%20email&state=7zYPABCDE-88JBER2-POIKxRhzauv2Vhjcozo%3D&redirect_uri=http://localhost:8080/login/oauth2/code/facebook
but after browser makes another GET for a given url it gets a CORS error:
Access to XMLHttpRequest at 'https://www.facebook.com/v2.8/dialog/oauth?
response_type=code&client_id=1239356666462449&scope=public_profile%20email&
state=7zYPABCDE-88JBER2-POIKxRhzauv2Vhjcozo%3D&
redirect_uri=http://localhost:8080/login/oauth2/code/facebook'
(redirected from 'http://localhost:8080/me') from origin 'https://localhost:4200' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It looks that way in a console:
If I open url http://localhost:8080/me
in a browser adress bar, not request by the app it of course logs in to facebook and everything works as expected.
Can anyone guide me how should I proceed to make it work? I ran out of solutions. I know that I can use proxy server for sending requests, so I would be able to ignore CORS problem. But I have this gut feeling that this is not necesarily required and could be done easier.
Many thanks for anyone that could help me finding solution
/me
endpoint in my browser. – Zychoo Apr 8 at 8:28