OpenID Connect middleware for SPA + WebAPI

Question

We are in the process of upgrading our SPA (angular) app with a WebAPI back end to authenticate with OpenID Connect through Google. Ideally we would like to use the hybrid flow.

We have gotten to the point where after clicking the Google Sign In button, the browser redirects to google, takes you through the consent screen and sends the response back to our app with code and id token. Most of the scenarios published out there show how you configure an MVC app with notifications that fire when authorization code is returned:

app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
        {
            ClientId = "",
            MetadataAddress = "https://accounts.google.com/.well-known/openid-configuration",
            RedirectUri = "https://localhost:44300/authentication",
            Scope = "openid profile",

            Notifications = new OpenIdConnectAuthenticationNotifications
            {
                AuthorizationCodeReceived = async n =>
                {

That never fires in our case and I think the reason for that is because the response is sent back to our SPA, not to the server side end point of our app. What would be the next steps here?

• Do we receive the code on the client and send an ajax request to our web api layer that then exchanges it for an access token? Once we have an access token, how do we communicate that the user is signed in so the tokens are recognized as valid when we make the api calls from js.
• Do we tell google to send the response to our web api layer, let that exchange the code for an access token and send a redirect response with a hash fragment containing the access token at the end? Would the notification handler fire in that instance?

In either case, can we leverage anything in the OpenID middleware for exchanging the code? The post request doesn't seem terribly complicated, but still it would be nice leverage an existing library for that if possible.

Answer 1

I guess you can use higher level of abstraction by using the middleware "Microsoft.Owin.Security.Google" you can get the external Google access token and you do not care about the complexity which comes with the "OAuth Authorization Code Flow" this will be handled by the middleware and you get the external access token directly. The default scope for this middleware is: "openid profile email" and you can override it for sure, but if you passed empty scope you will get those by default. You can check the implementation for this middleware here.

As Well I've blogged detailed post about using Google external login with Web API. No MVC libraries are included, check this post here and hopefully it will be useful for your case.