Javascriptservices: angular-cli compliant scaffolding, localization and Azure AD authentication

[MedAnd]

Consider providing support for angular-cli compliant scaffolding, localization and Azure AD authentication.

[asadsahi]

angular cli & Angular 2 guidelines for starter template for sure +1 @MedAnd

[laskoviymishka]

azure ad auth could be easily added, but it IMHO, out of scope for template. Please keep in mind that there is still issue with cookies processing here

[MedAnd]

@laskoviymishka on my current project we are using the adal js library with custom typings and modifications so that it works with Angular 2, however adal js has many issues. I think a SPA Angular 2 template without support for auth is targeting only a very small use case of projects.

[laskoviymishka]

@MedAnd This is good issue to discuss. What is your proposal to support authentication for JS Services? In my opinion stuff like authorization should be placed on server side, and not collacated to your client directly (aspnet mvc themself provide good authorization stuff see _https://github.com/aspnet/Identity_).

[MedAnd]

@laskoviymishka have a look at oidc-client: https://github.com/IdentityModel/oidc-client-js

[laskoviymishka]

@MedAnd these is a huge library for OIDC and OAuth2, does it really required to add these one to basic spa template? These one looks pretty monstrously. It could be an overhead for most of application. For sure it good for some purpose, but does it really so good for general usage? There are more common scenarios when authorizations handled by cookies.

[MedAnd]

@laskoviymishka the oidc-client library shows what is possible on the client. Re-writing adal js in TypeScript and so that it supports Angular 2, React etc would be my preference.

[laskoviymishka]

@MedAnd well, since it avaible in npm, it still can be used in your client app even without rewriting it to TS.

But there is different questions. Does it really best option for providing authorization in SPA template? We could do almost everything on client, but should we do this? JS Service allow you to combine best from both worlds - js front-end and .net back-end. May be it better to split responsibilities from client and server a little bit? Your server could be smarter than just a Web API + file server. Let aspnet handle authorization and angular 2 or react will handle UI and UX. Such separation from, my point of view, is reasonable.

[asadsahi]

@SteveSanderson mentioned in his talk in NDC that there will be spa templates for visual studio full IDE later, but even for aspnetcore-spa generator, I will suggest that authentication should be built in like there has always been some sort of authentication in generator-aspnet and visual studio SPA template (if you rememember the one which was built in knockout). In that spa template, both cookie and JWT based authentication was used.

To me that is a huge demanding feature in any generator.

[laskoviymishka]

@asadsahi well old SPA template not a good example noone really use it :sweat_smile:. I'm not argueing with you regards to built in authentication. These is must have feature for spa template. For me main question is - how this authentication will be suplied. From my point of view it should be configured as one of generator options (after you choose framework you should choose what kind of server you wanna create, should it be with authentication and what exact type of authentication should it be etc).

For most of users cookies auth will be more than enough. For some users JWT auth best choice. Some of them will need separate identity server etc. Should generator be flexible enough to handle all these stuff?

Right now this generator is really simple so it provide really simple code for you without a lot of customization. Main issue with old SPA template was all these redundant stuff that stick to you.

And you need to spend whole day to delete all these crap and add stuff that you really need. Until template not allow you to chose everything IMHO it should be as lightweight as possible. Just minimal functionality, so you could easily add you own features.
But in a future, for sure, it will be really great to enhance it towards to better customization.

[asadsahi]

Agree with you on authentication being optional, but A MUST FEATURE in .net spa generator. It is easy for experienced developers to add stuff in but from beginners point of view and from the point of view of a framework which is rewritten from scratch, having more features in a template will definitely be a requirement for alot of people to jumpstart their experience.

Flip side of the coin is that if some people have to delete stuff from a generator to fit their need, others may have to add more stuff to get common feature working as a redundant task. Not same size fits all. But considering majority SPA based applications are preferred to work with token based authenticaiton, that can be something to consider, same as React and Angular being frameworks of choice as options in generator because majority is using them compared to other frameworks.

[laskoviymishka]

@asadsahi agree with you, there is should be option to check authorization inside spa template. Do you have some shared ideal bootstrap SPA with this feature avaible? As far as i know token base auth is real pain in neck right now.

[asadsahi]

I had token based auth working with some hacks in asp.net rc1 (without using identity server). But since rc2 is released, some apis are broken and not all packages are available for rc2. I will try to get it working with jwt again.

Right now I am playing with aspnetcore-spa generator with cookies based authenticaiton and angular 2 spa, all merged as one project. I can share that if you are interested.

[aminebizid]

@asadsahi please make a git project

[laskoviymishka]

You can check my playground here _https://github.com/laskoviymishka/Unicorn.Cms_. It also contain spa with cookies auth

[laskoviymishka]

I have also some hacky token auth, but this is not ready to production sample. It mimic web API 2 bearer token. But it have too much duck tape

[asadsahi]

@zigzag95 @laskoviymishka , I have put my sample repo here. It is using asp.net core cookie based authentication. I have merged few concepts of asp.net core & spa generators with angualr 2 webpack starter, angular 2 guidelines, lazy loading etc. Let me know if you find something which can be improved or happy for some useful pull request too :)

[aminebizid]

@asadsahi thanks. It looks very compete

[aminebizid]

Did you find a way to custumize UsersRoles table?

[laskoviymishka]

@asadsahi you are man. This is good. It need to add couple test to it and it would be perfect 👌. I really really like it. May be it should adopted as one of yo-gen template?

[asadsahi]

@zigzag95 no, haven't felt the need to customize it yet :)

Thanks @laskoviymishka , you are right, no tests right now, but will add it.

If you have any further suggestions, please comment on that repo so that we can break this chain of conversation here.

[aminebizid]

Oups sorry wrong git 😊

[sethreidnz]

Another approach to Auth with Azure AD and locking down the entire SPA. (Work In Progress just a POC)

https://github.com/justsayno/dotnet-react/tree/user-profile

Essenetially by adding this before your your route configuration:

app.UseOpenIdConnectAuthentication(new OpenIdConnectOptions
                {
                    ClientId = azureAdOptions.ClientId,
                    Authority = string.Format(azureAdOptions.AadInstance, azureAdOptions.Tenant),
                    ResponseType = OpenIdConnectResponseType.IdToken,
                    PostLogoutRedirectUri = azureAdOptions.PostLogoutRedirectUri,
                    Events = new OpenIdConnectEvents
                    {
                        OnRemoteFailure = OnAuthenticationFailed,
                    }
                });

You could have non-locked down endpoints by adding or not adding the authorize attribute. I've found this is a nice way to deal with Auth in a SPA then you don't have to do any security yourself.

This uses Azure AD but you could plug in any Open ID provider.

[SteveSandersonMS]

This has become a long conversation that has moved through several topics. To keep things focused, I'll close this issue in favour of the more recent #548.

I think that other issue covers the requirements raised here, with the exception of "angular-cli compliant scaffolding". I'm not certain what it would mean to be "angular-cli compliant" since that does far less than we are trying to do here, plus it only addresses the client side code and nothing to do with ASP.NET on the server, so it's probably not something that's likely to happen.