Problem creating a Sign in with Google option using Net Core 2.1 and Angular 2

Question

I have the following stack - Angular 2, Net Core 2.1 and am using Identity. I want to add the option for Google authentication and have found some limitations using the client side gapi libraries - the main one being its a no go if 3rd party cookies are not allowed.

This led me to try implementing Google authentication on the server side. Initiating an http request from Angular to my externallogin endpoint results in a CORS issue as seen here as seen here and here. I can successfully authenticate with Google by directly using my externallogin endpoint or with Angular using document.location.href. Using document.location.href seems like - the wrong way to implement this. I've been working with Net Core and Angular for quite some time but this one has me stumped. Is there a valid way to implement this or have I designed my self into a dark corner and am forced to use document.location.href?

1. I have properly set the Authorized Javascript Origin and Authorized redirect URIs on the Google API console.
2. I have CORs properly set on my server
3. Angular and Net Core (front and back ends) are on the same server.

I'm not sure how or if I can properly handle the redirect after the authentication Challenge on my backend, when the request originates from an Angular http get request.

Answer 1

You are looking for an Authorization Code Grant flow of the OAuth2 spec

Take a look at this part of specification

 +----------+
 | Resource |
 |   Owner  |
 |          |
 +----------+
      ^
      |
     (B)
 +----|-----+          Client Identifier      +---------------+
 |         -+----(A)-- & Redirection URI ---->|               |
 |  User-   |                                 | Authorization |
 |  Agent  -+----(B)-- User authenticates --->|     Server    |
 |          |                                 |               |
 |         -+----(C)-- Authorization Code ---<|               |
 +-|----|---+                                 +---------------+
   |    |                                         ^      v
  (A)  (C)                                        |      |
   |    |                                         |      |
   ^    v                                         |      |
 +---------+                                      |      |
 |         |>---(D)-- Authorization Code ---------'      |
 |  Client |          & Redirection URI                  |
 |         |                                             |
 |         |<---(E)----- Access Token -------------------'
 +---------+       (w/ Optional Refresh Token)

Here are the logical steps

1. Redirect the user to the Google page to authenticate, with the redirect url back to your app. (A & B)

This is where you need to pay attention.

2. After successful authentication it will redirect you back to your app, and will provide a authorization code shown in step C

Now you want to handle the redirect from Google authentication, before displaying your Angular app you make another request to the Google auth server to request the access token, you do this by providing the authorization code. (back-channel)

3. Request the access token through the back-channel and store it somewhere on the server side. (D & E)

Now you have the access token on the server side, this covers the authentication bit, if you need to access a protected API with this authentication token you are covered.

How do you tell if the user is authenticated? well you need an id token.

This is done by OpenIdConnect

This is just a layer on top of OAuth2 in addition to returning your access token it will return an id token which can be used to authenticate the user.

Essentially what you want to have is setup some routing in dotnet core that will work outside of your angular app that will handle the back-channel communication. Also read this google guide.