I have a Laravel 5.1 API that is connected to an AngularJS Frontend.
Can I do this..
Have one (hosted on mydomain/public) AngularJS App with the sole purpose of authenticating the user and getting a JWT token from the Laravel API Backend
Somehow passing this same Token to a second (hosted on mydomain/secure) AngularJS in order to authenticate the user and the access the App.
I know the token is saved on the local storage so I don't see a reason why I can not or would I have to merge the two apps together.
Cheers,
Yeah. They are not related to the number of Ng-App or instances of Angular apps you define.
How JSON Web Tokens Work ??
A browser or mobile client makes a request to the authentication server containing user login information. The authentication server generates a new JWT access token and returns it to the client. On every request to a restricted resource, the client sends the access token in the query string or Authorization header. The server then validates the token and, if it’s valid, returns the secure resource to the client.
So server logic is not dependent on if your front end is single page or multi page.
You can read this post for more clarity:
http://www.toptal.com/web/cookie-free-authentication-with-json-web-tokens-an-example-in-laravel-and-angularjs
Related
In a .NET app I can add authentication and authorization using web.config and/or IIS. I can also use [Authorize (Roles = "RoleABC")] in a MVC app's controller or action. And even extend the AuthorizationAttribute
I'm looking into creating a React app for intranet use, and reading these tutorials (ReactJS and MS), but can't find authentication/authorization details.
Even though the app will be Single Page App, I still would like to authenticate and authorize users for certain options within the app, just like I can do in MVC app.
Is the only option to do that way is creating Blazor app instead?
For authentication and authorization, you should use auth tokens (like JWT). Your backend should create an auth token when a client logs in to the system and sends it to the client. Your server also should send the authenticated user information to the client (react app) so that you can render correct pages according to the user type. For example, you can render the admin page for an admin type of user, and the guest page for a guest type of user. You can save this user data as JSON in Redux. Hence you can access the user data from any component of your react. Also, in your backend, you must restrict the endpoints according to the auth token which is sent by the client. In the backend of my app, I follow the below steps:
Authentication check -> Authorization check -> controller (endpoint) -> result
React isn't opinionated on this, so it's up to you to design the implementation. A basic way to do this is:
Log in and obtain an authorized JWT token from the backend and include the account ID when you sign it
Store the JWT token in localStorage, store the account info in Redux
Conditionally limit routes based on account info (ie. admin group) on the front end
Have every auth-required API call include the JWT token in the x-auth-token header, then on the backend use middleware to check if it's still valid. You can then also decode the account ID in order to check its privileges so that you can limit API access
This may be helpful: https://medium.com/#faizanv/authentication-for-your-react-and-express-application-w-json-web-tokens-923515826e0#5f52
Not sure whether you still need this - I personally feel we should have something bridging the authZ gap between server and client to make it easy. So I spent a few days on a github project for this purpose, here it is: authzyin.
What I tried to do is to leverage policy based authorization from asp.net core - which I think it's very cool - and automatically bring the same definition to the client to use in React via hooks.
For authentication I am using msal.js against AAD - so authN is done on the client and jwt bearer token auth is used for all requests.
It has a client lib and a server lib which can be used together or separately. Of course it might still be lacking some features - please feel free to take it as a reference (contribution is also welcome).
We have a Asp.Net MVC 5.0 project which uses AngularJS for front end. The project has WebAPI Controller in the same project and it is deployed to same website. The application is built with Individual User Account project template and uses Asp.Net Identity and Claims. There is file upload module where users upload some 100MB+ files that goes through webapi and ng-file-upload plugin. Due to increase in user base we wanted to quickly improve the upload speed by separating API alone into a separate site in a new server and scale it when needed. Since API controller is currently under ASP.Net MVC solution which uses OWIN cookie authentication the API is authorized by the cookie authentication middleware.
What is the quick way to get the API into a separate site? I beleive we need to implement OAUTH token based on the MVC site and make the new API site to consume the token by enabling CORS. If we do this we are not sure if we need to remove cookie based authentication and re-implement authentication using the new token based authentication. Are there any other approach we can take here by still using cookie based authentication for the Asp.Net MVC site and separating api into a new site?
Note- We also plan to build Mobile app using this API so we believe we have to separate the webapi into a separate site and bring OAuth token based authorization.
Thanks in advance!
Regards,
Bala
If your mvc site is going to be only client side code only without any major back-end c#. This requires no security as your data comes from API which is what needs to be secured. If you dont want to seperate the two in different domains. Angular will need to read the user information being sent from the server which is why HTTPs only encrypted cookie will not work. If they are going to be different server and domain, plus you need multiple consumers of the API, you should move to oAuth and bearer token based login with refreh tokens and the whole thing. This way you can scale the api into multiple load balancers and still use the bearer token and this would be stateless. That being said you can still achieve this with cookie by storing the token in cookie that way, angular can parse and use the values and the api can validate the signature of the token and use the values. With them having to be on the same domain so they can share the cookie. This can be done without using cookie and simply using LocalStorage as well.
For multiple AngularJS services that makes it's own Web API calls, we need to store the authentication token in a centralized place and it shouldn't be repeated. Where should we save the authentication token? I guess we need to write a authentication AngularJS service that would be responsible for log-in/log-out and it stores the generated token in client local storage so this token can be sent with each request to access secure resources on the back-end API. Kindly answer me if my understanding in correct.
My AngularJS SPA and its ASP.NET WebAPI 2 API are located on different domains. SPA user is authorized in API by obtaining JWT token from API auth server and then SPA sends each request with Authorization Bearer request header containing this token to access protected API endpoints.
Now we need to expose some API endpoints to be directly accessible by users when they are logged in to SPA. But I'm not sure how to implement it because we don't use cookies and our API is located on different domain than our SPA.
Is it possible to configure ASP.NET WebAPI 2 to issue cookie to a different domain (API domain) when POST request with credentials is sent from SPA from another domain?
Consider that cookie is being stored in client-side not in your server-side. You can add some tracker (i.e Google Analytics, or create your own tracker) to store the log data from users based on their tokens or their server variables like ip address, session key and so on. Notice that tracker service will be launched on server-side and the tracker on the client-side like trackers javascript snippet-codes.
Hope this can be helpfull. Regards.
I have two apps.
Front end - AngularJS website running on localhost:9000 and getting data from rest service (database)
Back end - Spring Boot Rest Service localhost:8080
How to create authenticate process for this two app? Login from (user, password). I reading some tutorials on spring website, but front end are build in spring project on the /resouce folder, not separated.
There are a couple of things you need to keep in mind if you are setting up your app the way you want to.
What kind of authentication mechanism do you want? For rest services Basic and oAuth2 are most common.
With Basic auth you would send authorization header in each request.
Each request will perform authentication all over again.
There is no state between client and server
Https is mandatory if you use basic auth.
With oAuth2 first you need to send basic authentication request to end point your.app/oauth/token? --- parameters
Response will contain
access_token": "CQPt2VR2HJuCY3mb0xA1BVMyDltgvnpf6N2CXdsds3423YkGQID7VO-Mmu4idymlz"
Which you then include in every request with bearer token :
Authorization Bearer CQPt2VR2HJuCY3mb0xA1BVMyDltgvnpf6N2CXVPXkaewYkGQID7VO-Mmu4idymlz
access_token has an expiration time. You can also send refresh_token which has longer expiration time.
There is no state between client and server
For smaller applications oAuth2 is too complicated and basic will suffice.
This is just an overview of common authentication methods. There are a lot of implementation tutorials. Example : https://spring.io/guides/tutorials/spring-boot-oauth2/ and http://www.baeldung.com/rest-api-spring-oauth2-angularjs
One thing to keep in mind is you will need to setup CORS filter. If you run your service and client on different ports. For starters annotate methods you want to use with #CrossOrigin(origins = "http://localhost:9000") You can of course register global cors filter.