I am currently working on implementing social login functionality with VK for my Angular application and Spring Webflux backend. Right now, I have an endpoint in the backend to retrieve user information: localhost:8080/people/me. I attempted to authenticate the user on the frontend as follows:
ngOnInit(): void {
this.http.get(USER_INFO_URL)
.subscribe((resp: Response) => {
if (resp.status < 300) {
this.authenticated = true;
resp.json()
.then(vkUser => {
let fields: [string, string] = ['firstName', vkUser.firstName];
fields['lastName'] = vkUser.lastName;
this.user = new User(vkUser.id, fields);
});
} else {
window.location.href = AUTH_URL;
}
});
}
However, when my Spring application redirects the client to VK for authentication, VK does not provide any CORS headers, resulting in the authentication process failing.
Can someone suggest a method for utilizing OAuth2 with Angular/Spring combination? Since I am utilizing a code flow, I assume that I first need to obtain the code on the frontend and then send it to the Spring backend to exchange it for an access token.
Additionally, I am considering the possibility that my approach may be incorrect and that the entire authentication process should occur on the backend, while the frontend simply receives a cookie. However, I am unsure how to redirect AJAX requests from the frontend to the VK login page, manage it on the backend, and then return to the Angular application.