5

I need to integrate social login to my webapplication. I use Spring Boot for my backend and Angular 2 as frontend technology. I followed this tutorial for setting up my project.

This works perfectly and Spring Boot is running on http:/localhost:8080 and Angular 2 on http:/localhost:4200. The reason for this, is that I use the Angular-cli for the live reload development server functionalities.

Because of Cross Origin policies the angular project needs to use a proxy. As mentioned in the previous tutorial you need to configure a proxy.conf.json file:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

If you do this you can acces the Spring API as followed: http:/localhost:4200/api/users for example (every '/api' request will be forwarded to the Spring server).

All the above things are working perfectly. Now I need to use Oauth2 with google login. I tried many tutorials like this one but i can't seem to manage to work this out.

If i try to implement this and navigate to http:/localhost:8080 (from Spring Boot address) i get redirected to the google login page, however when try the same thing, for example http:/localhost:4200/api/authenticate i just always redirect to http:/localhost:4200/login immediatly without redirecting me to the login page.

I looked evrywhere online but can't seem to find this particular problem. Can anybody help me to understand or what i'm doing wrong, maybe someone has example code that would be great!

Arno Bruynseels
  • 71
  • 1
  • 4

2 Answers2

1

I found a solution to my problem. First i had a login link with 'href=/api/authenticate' but this did NOT work!

NOTE: @EnableOAuth2Sso standard secures every path on the server so you just need to acces the API on a path that is secured to be redirected to the login page

For some reason http:/4200/api/authenticate did nothing but redirect me immediatly to http:/4200/login (I guess this must be standard behavior of @EnableOAuth2Sso if the authentication failed or if you were not authenticated?)

So I changed my href to 'href=http:/localhost:8080/api/authenticate'. This works perfectly and redirected me to the google login page.

Another problem i faced was the redirect url. I tried setting the redirect url straight to 'http:/localhost:4200/profile, to navigate after loging in to the users profile, but for some wierd reason again this did not work.

After some testing i figured out you NEED TO redirect first back to you api domain (no idea why).

So i set the the redirect url to http:/localhost:8080/callback where i then redirected to the profile page on port 4200.

@GetMapping("/callback")
void redirect(HttpServletResponse response) throws IOException {
    response.sendRedirect("http://localhost:4200/profile");
}

After searching and testing for way to long, i feel this was not documented anywhere.

Arno Bruynseels
  • 71
  • 1
  • 4
0

Sorry if i'm mistaken in this answer because this was some time ago and I don't remember exactly. But I had a login button as shown in the code snippet below:

<a href="http://localhost:8080/api/login" class="btn loginBtn loginBtn-google">Login with Google</a>

As you have the @EnableOAuth2Sso in place every path is automatically secured with OAuth2 authentication. So when you click the login button you automatically get to the google auth page.

When you authenticate succesfully I redirected to the code below:

@GetMapping("/api/login")
public void login(HttpServletResponse response) throws IOException {
    response.sendRedirect("http://localhost:4200/profile");
}

As I explained in my first answer it is nessecary, for some odd reason, to callback to you Spring domain and not to your frontend domain. As shown in the code above I then redirect the the correct forntend page.

(As time went on I changed the names of my paths if you were wondering but this should work)

Arno Bruynseels
  • 71
  • 1
  • 4