I'm starting a new project with Angular 7, Asp.net core 2, Asp.net Identity, IdentityServer4.
Briefly, my project architecture is like the following:
A web API project (resource server)
Data access layer project (c# project library)
Identity server 4 using Asp identity
And one Angular 7 client, this project is generated using two cli commands : "dotnet new angular", to generate the backend. And "ng new" to generate the front end code.
So, since angular project has a back-end, I have chosen the hybrid flow for security reasons.
My goal is to authenticate an angular client user with cookies, using angular client back-end. I have easily made this work using an MVC client but I still couldn't figure out how to achieve the same thing with an angular client.
My current idea is to serve angular using two actions, one that renders a razor cshtml page for anonymous users, and another one for "authorized" users, but I'm still not sure if this is achievable or not.
Is it a good approach or is there a better way?
I've started a similar project recently and contemplated how to approach authentication/authorization.
Ended up treating the Angular front end the AspNetCore back end as two similar projects (even though they were under the same project). You can use some oidc library for angular (like this for example) and your angular part would basically be a js client using Hybrid flow (preferably). You can use Angular router and route guarding in conjunction with one of the oidc libraries to automatically redirect user to the identity provider should they try to access protected resource and handle the token callback and do the cookie auth.
Your backend part in AspNetCore would then become simply an ApiResource that your Angular client would have to be allowed to access (in the AllowedScopes) and would only be concerned with serving data to your Angular client (minus the fact that the AspNetCore razor engine serves the initial Angular AppComponent). It would not be concerned at all about guardian any routes and would only be concerned about validating bearer tokens that your Angular client would inject into Http calls to this backend Api.
Related
I have an existing CRM built in ASP.NET MVC 5 using a razorhtml front end. I would like to break off part of the project into an Angular front end with .Net Core web api backend.
Essentially when a customer hits a "next" button on a certain page, the web api would be called and return a page in angular. The customer then completes a couple pages in the angular front end, sends info to the DB via the web api, which then returns the user to the old MVC project.
The issue I'm worried about is security. How can I authenticate the customer between the two applications?
Assuming your WebAPI is hosted on the same domain as your existing MVC solution you could opt for good old cookies (mind the HttpOnly and Path properties though). Given difference in technologies this might require some sort of reverse proxying to be put in place.
Alternatively you can generate a token on MVC application side and make your angular app pass it along through request headers to your API. On server side you would either write a custom middleware to handle opaque tokens or leverage existing .Net Core Identity that supports JWT out of the box.
Given you didn't share any specifics of your environment - it's hard to say if JWT would be an overkill for your use case but hopefully this gives you some context for further exploration.
Any feedback much appreciated.
I need to create a Web API (ASP.NET Core Web API), which does some basic CRUD operations. Thats no issue at all, and I need to create a simple Angular UI for the Web API as well. Thats also no issue. But is there a way to combine both into a single application ? WebAPI mainly and an optional UI part in Angular than having a second angular solution ? I know there is a visual studio project template where you create a .NET Core Angular Application, if I do that, how would I expose the API at the sametime to other clients as API, while still managing the Angular UI ?
Put in another way, my .NET Core application should be primarily a WebAPI which should work independently and act like a WebAPI, while an optional part of it should have an Angular frontend connecting to the WebAPI.
You can view this as a matter of security for your WebAPI and how you expose connections to it. You can serve your API endpoints under one route, i.e. /api and you Angular application at you site route or host it elsewhere.
If you follow the same practices for exposing the WebAPI cross origin, then your Angular application can consume the API in exactly the same way as any other client would.
Followed #johnny's comment and it works !
All you have to do is compile your angular project and put it under wwwroot. Then you can navigate to your index.html page, set your webapi startup to serve static files and your done
My question is based on ASP.net 5 and authentication. In particular, I'm trying to achieve integrating oAuth (2.0) into my solution as my logon method (the users can either logon using oAuth if this is how they registered, or directly with my own app). Using the template for an ASP.net 5 web app, I've successfully achieved the above but this isn't quite what I need.
I'm have an ASP.net 5 MVC (app1) for my front end UI and an ASP.net 5 web api application (app2) for my REST services, serving data to the UI. Nothing new to this approach.
I want my MVC front end (app1) to have no Entity Framework references and no reference to things like Sign in manager (if possible). Just keeping it as simple as possible. I have a login screen and I want to present the option to logon via facebook or google oAuth accounts. Instead of using the nice code MS kindly provides out of the box when you start a new ASP.net 5 web app (hey, why make life easy!), I want to use my web api to do as much as the work as it can (I realise somethings need to happen in app1 to make this work).
My goal is to keep my UI as simple as possible and offloading complex functionality (business logic, database access and other things such as caching) off to the web api app.
I'm having difficulties extracting the parts of the web app demo around oAuth, and moving it into the web api, to utilise from app1. Has anyone managed to do this before? Is this a bad idea? Has anyone a sample of this approach in new ASP.net 5 MVC.
Thanks for advice in advance!
We (that is ASP.NET) recommend you look at Identity Server. v4 is now built on top of .NET core. The OAuth components you see in templates for facebook, twitter et al aren't suitable for using against a WebAPI, they're there for interactive, browser based logins, not for javascript.
You would have your interactive app handle registrations as normal, then use Identity Server to issue a bearer token, pointing it to your identity database, and validate that within your WebAPI.
We don't recommend rolling your own.
You can build a WebAPI app with membership manager using ASP.NET Identity. ASP.NET Membership is now called ASP.NET Identity.
From the link you will see how you can create a WebAPI app that will support all basic ASP.NET membership functionalities (log-in, register, etc).
Once you have WebAPI setup with your (custom) ASP.NET membership storage (DB is auto-generated once you run the app.), you are set up with a RESTful web layer with data access. You can also customize the storage provider. See here: Overview of Custom Storage Providers for ASP.NET Identity.
The ASP.NET website (www.asp.net) has all the necessary information sufficient to create all that you said from scratch. For integrations with Facebook or others, you can check out this link: External Authentication Services with ASP.NET Web API (C#)
I am trying to develop a single page application.
I have built a RESTful web service using ASP.NET Web API. I have implemented authentication using OAuth 2.0 and Bearer access tokens.
This web service uses memcached and HTTP cache headers (Cache-Control and ETag) for caching the resources and responses.
Now, I really like ASP.NET MVC technology and maybe that love is making me use it when I shouldn't.
I'm thinking of builidng an MVC intermediate server between my JavaScript application and my Web service.
The MVC site would redirect (or delegate) its requests, to the Web Service.
I see many advantages using this approach:
I can store my consumer key (used for authentication) in a secure location, as opposed to storing it in the JavaScript application directly.
I can provide cookies to my JavaScript application, something that my REST web service does not support (because I think it ruins the whole "stateless" and "Pure HTTP" concept.
It would be very easy for me to provide globalization (localization) to my views. I really like ASP.NET MVC globalization framework and I would not know how to add this feature if I plan to create a standalone site.
I can encrypt my access token cookie, and decrypt it on the server, forcing my user to use my MVC proxy to access the web service, as he will not know his access token.
Having stated these advantages, would it be worth it to implement this?
Adding a proxy server will made me replicate the HTTP cache logic, and will also end up creating 2 requests (Client -> MVC -> Web API) instead of 1 (Client -> Web API).
What is the best approach?
It looks like you've built a good RESTful web service, but need to address Auth and Globalization:
Auth
Having this kind of proxy or support cookie authentication on the Web API will make you vulnerable to CSRF attacks, so you would also need to implement Synchronizer Token Pattern or some other technique to prevent this. However you should only use this approach if you have no other options, but you have!
Assuming javascript application requires user to enter credentials, there are different ways to deal with auth for it:
OAuth2 Resource Owner Password Credentials Grant
JSON Web Tokens - see accompanying website and a specification
Both ways provide your JS app with an encrypted token that it should pass with each call to protected API. Your application would need to keep this token in a local storage and refresh it when token expires.
Globalization
Even having most of the things on MVC side, eventually you would still require Web API to deliver translated content. So I'm not sure what are the requirements here, but generally speaking you should be able to get your translated resources on Web API the same way. See here for example.
For the HTML part - leave it to ASP.NET MVC, no need to put every label translation into API.
Another points to consider
Performance - ASP.NET MVC is good, but it's not a proxy solution and it's simply not intended to build things like that
Do you really need an HTTP API?
Don't forget that transferring data over HTTP is another point of overhead, and it becomes especially useless if you proxy it with and MVC.
At the end of the day - why would you build an API if you are hiding it from your own application?
My answer is: don't hide it - make full use of it!
The Web API project is already completely written and it uses User.Identity. There's also an MVC site that uses SimpleMembership. Is it possible to make both projects make use of the same user data for registration and authorization?