Adding an Authorize tag to HomeController in an ASP.NET Core Angular app (using Angular Spa template) w/ IdentityServer4

Question

I created an ASP.NET Core Angular application using the latest template on yeoman. I am running IdentityServer4. In IdentityServer4 I created a client for the MVC application.

        // OpenID Connect implicit flow client (MVC)
        new Client
        {
            ClientId = "mvc",
            ClientName = "MVC Client",
            AllowedGrantTypes = GrantTypes.Implicit,

            RedirectUris = { "http://localhost:5002/signin-oidc" },
            PostLogoutRedirectUris = { "http://localhost:5002/signout-callback-oidc" },

            AllowedScopes =
            {
                IdentityServerConstants.StandardScopes.OpenId,
                IdentityServerConstants.StandardScopes.Profile
            }
        }

I used the following documentation to help set this up: http://docs.identityserver.io/en/release/quickstarts/3_interactive_login.html
I added an [Authorize] attribute to the Home controller and everything seems to be working. The user is unable to access the Angular code since the Home Controller instantly redirects to IdentityServer4 for login.

I am a bit confused at what the Hybrid flow is in regards to what I have setup above. http://docs.identityserver.io/en/release/quickstarts/5_hybrid_and_api_access.html

Since I am going to be using the ASP.NET Core Angular template is it really that simple? Just add the MVC app as a client and add an Authorize attribute to the top of the HomeController? I guess why go through all of the hassle in setting up everything in Angular with oidc-client if I can take advantage of ASP.NET Core.

I believe my setup will fail as soon as User Roles gets involved (what user can access what). I would rely on IdentityServer4 to tell me these roles, but I would need access to them in Angular. Maybe this is the answer to my question... Is this what the Hybrid workflow is for?

Here is how my app is structured:
MyApp.Web
MyApp.Api (Api that Angular will call, additionally has an IdentityController for IdentityServer)
MyApp.Auth (Identity Server)

If anyone is completely confused by my question, it would be very beneficial if I could get a recommendation on a good way to setup Authentication/Authorization using IdentityServer4 and an ASP.NET Core Angular app. Taking advantage of the .NET Core side of things so I do not have to do all of the auth purely on the client.

I believe my setup will fail as soon as User Roles gets involved: Not exactly. You will get issues though, when the authorization expires or cookie gets deleted, then your angular modules won't be able to be loaded and if you also (incorrectly) used ASP.NET Core Identity for your webapi, your ajax calls will end up with HTML (because of redirect to login) result instead of json and/or 401 (not authenticated) — Tseng
@Tseng so what are you proposing I do? Is it just better to write the entire auth through Angular? COuld you clue me in on how a user's roles might get sent to Angular... Is it a claim? — Blake Rivell
Well, it's tricky to protect the client sided files. TBH i'd just say don't protect the home controller at all, since the logic and validation should happen in your "webapi" actions and in code behind the rest service. So just protect /api urls and add a login form in angular once the app is loaded, which signs the user in and obtains an bearer token (jwt or opaque token, up to you). Or if you want stay the way you are, make a regular login and expose a token endpoint for refreshing jwt/bearer access tokens — Tseng
@Tseng thank you, but lets say a user with Admin role can only access page A and a user with Finance role can only access page B and so on... Does this have anything to do with IdentityServer and the token that is passed? Or should I only be using that to get the actual User and UniqueId, then make API calls to get the User Roles and go from there.. — Blake Rivell

JayDeeEss JayDeeEss · Accepted Answer · 2017-07-20T18:17:08

Taking advantage of the .NET Core side of things so I do not have to do all of the auth purely on the client - I think you are already on right direction. You should go with the Hybrid flow, this way your tokens would be more secure as client won't be able to access on the browser and you can use the power of refresh tokens to make your web apis more secured.

No need to use oidc-client library on the client! Let me know if you are still stuck, I can post some code then.

Adding an Authorize tag to HomeController in an ASP.NET Core Angular app (using Angular Spa template) w/ IdentityServer4

1 Answers