ASP.NET Web API + ASP.NET MVC + ASP.NET Identity + AngularJS - asp.net-mvc

I am new to AngularJS. I need to develop a Web API (ASP.NET) which will be consumed by an Android, iPhone and a Web Application. I want to build the web application using ASP.NET MVC to use the built in routing and razor view engine.
The first problem I am facing is how to add security to my Web API and ASP.NET MVC in a way that they work together or use the same auth token (ASP.NET Identity). For example web application will display a login page to the user, AngularJS will send back-end login call to Web API and in return will get an auth token as ASP.NET Identity is being used on Web API side. Now whenever user requests a resource/view/html from web application (ASP.NET MVC), he/she should be authenticated and authorized first.
If my login call go through the ASP.NET MVC controller action and I create a FormAuthentication cookie on a successfull login, then how can I pass the Web API auth token to AngularJS in a secure way so that my angular controllers can call Web API methods for data manipulation using that auth token?
It would be great if someone could refer a blog/article with example.

Related

ASP.NET MVC and WebAPI shared token

I have ASP.NET MVC and Angular2 application and I'm using Identity Server 3. Typical workflow for user is to log on MVC application which stores obtained token in a cookie.
After successful login, user can use angular2 application for specific operations and it resides on subdomain. Angular application "talks" to web api.
Is it possible to share access token stored in a cookie between mvc and angular (javascript) client. Currently, I'm extracting access token and store it in local storage for using in ng2. It is working, but in my opinion this is not elegant solution
You can implement Direct Authentication in Angular and use SSO.
User will be logged in to ASP.NET MVC, the Angular will hit the identityserver and will returns the token.
You can use the OIDC.JS library to implement implicit flow in Angular.

How to share authentication between ASP.NET MVC and ASP.NET WEB API applications?

I am building an AngularJS MVC application, I need some guidance in terms of authentication. I am thinking of building the Authentication using the MVC authentication pipeline. AngularJS code will reside in the MVC application and the root SPA view would be a Razor cshtml. Here is my scenario -
Login page will call a Authenticate API that would return a token
AngularJS has the logic to get the bearer and pass to each of the API requests
There will be multiple ASP.NET WebAPI projects that will be hosted as subdomains.
I also need to call complex dynamic razor templates, this would need the authentication for the MVC controller that will return the razor views. Since MVC follows cookie based authentication, the token gives a 401 status code. How would this work wherein the authentication is shared between MVC and WEB API apps.
I think you would need to get your token from the API project, not the MVC in order to be able to securely call the API.
If you want to share identities across both the API and MVC projects, have them use the same database.
When getting the token from the API, you can get the identity details of the current user from your MVC application. At least, that is how I have done it in the past.
I blogged something along these lines here: http://blogs.msdn.com/b/martinkearn/archive/2015/03/25/securing-and-working-securely-with-web-api.aspx however this does not cover the step of using the creds from your MVC login and passing that to the API to get the token.
Hope that helps.

MVC application calling Web API application needing same user

If I have an MVC application that has an authenticated user, and either from client-side JavaScript, or from an MVC controller, I wish to call a Web API that is in a different project to the MVC application, but use the same user credentials.
How would I go about this?
I am using the latest in VS2013 - MVC 5 with Web API 2. Currently to authenticate I am using forms auth.
Please refer the following link to solve your problem
Works fine for me
Web api authentication and MVC 4

handling redirects between web api and mvc

I am writing a custom authentication where my users will access my webapi and it will redirect me to a MVC based login page. Once they login, I will have to redirect back to the web api and from there, response will be rendered.
I am using redirect in my webapi and MVC, but t I would like to know if this is the best way to achieve. Kindly suggest.
I am using MVC 5 and web api 2.

AngularJS + ASP.NET Web API + ASP.NET MVC Authentication

I am new to AngularJS and trying to evaluate it for my new web application.
Requirement:
I will have one ASP.NET Web API which will be consumed from an Android, an iPhone and from a web application (ASP.NET MVC) too. ASP.NET Identity will be implemented in Web API. All three applications will call the login method of Web API to get the auth token.
Problem:
My problem is how to get ASP.NET MVC server side authentication work (in sync with Web API so I don't have to login for ASP.NET MVC separately) while Angular makes a call to get the HTML template/view, JavaScript files or other resources. I have went through many articles and blogs on AngularJS but still unable to find a security model which fits in my requirement.
Possible Solution:
Would it be a good idea to make the login call to ASP.NET MVC application instead of Web API directly, and ASP.NET MVC application would call the Web API to login, and once authenticated, save the auth token in session plus create a FormsAuthentication cookie and in cookie data save the encrypted auth token. Moreover set the auth token in ng-init somewhere in HTML to have the token in AngularJS scope. Now when AngularJS tries to make a call to ASP.NET MVC application to get HTML, then authenticate/authorize the user by matching the cookie decryted data with auth data in session. Also, AngularJS will send the auth token in header to call the Web API methods directly for all the subsequent calls for data manipulation through Web API.
I solved the problem with a very strait forward solution. I just made sure I have following two lines of code in the Register method of WebApiConfig:
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
That's it. Now my MVC controllers look for the session cookie for authorization whereas my Web API controllers look for the auth token in the header of each request. Moreover, the Web API sends a token (JSON) and a session cookie itself in response to the login/authentication request e.g. http:\\www.mydomain.com\token.
So now I send my login request to Web API to get the token as well as the session cookie. Session cookie will automatically be sent will each request so I don't have to worry about the authorization of my MVC controllers. For Web API calls I am sending the auth token in the header for each request as Web API controllers don't care about the session cookie being sent with the request.
Also worth a look:
https://bitbucket.org/david.antaramian/so-21662778-spa-authentication-example/overview
(based on this SO question)
Warning: it's not for the faint-hearted...
ASP.NET Web API 2
HTML5 + AngularJS + $ngRoute
NuGet scaffolding
Yeoman (Grunt/Bower)
Owin framework (OAuth 2.0)
CORS
I think you are on the right path. I would store the tokens in an Angular Service to make it easier on yourself (http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app). I'm a little confused on what you mean by "AngularJS tries to make a call to ASP.NET MVC application to get HTML", you shouldn't need to secure the MVC app, it's just running your Angular right? The API is the piece you want to secure as well.

Resources