I have one issue. I have a project which is created in MVC and AngularJs using Apis. I want to apply the OAuth token with all Apis.
I will follow the below steps :
First login from the panel.
Maintain OAuth token in the header of each page.
Use that OAuth token from the header and pass from each web API request.
If somewhere I am wrong please let me know. How can I do?
Please share if anyone has done before.
Create a service/factory that will make all API requests from your app.
It's just a wrapper of $http. call it something like ApiService.
This service would read the token from where ever it stored (header, cookie...) and append it to every request.
This very much like the pattern $http handles XSRF protection
Related
I'm implementing Auth0 with my ASP.NET Core 2.1 app with React front end.
After the user authenticates, I do get both an access_token and an id_token. I'm clear that I send the access_token in the header to gain access to my API methods but I'm not sure how to handle the id_token.
Do I place the id_token in the header as well? If so, what key do I use for it? I'm sending the access_token with the key Authorization -- see below.
Not sure how to send the id_token and would appreciate some pointers on this. Thanks.
You would use id_token to construct the User object in SPA application and access_token is used to access the API. So, you don't put the id_token in the header.
There is a JavaScript library for Auth0 that can help with authentication/authorization tasks: Auth0.js.
The library may help with constructing the user object and refreshing the access token.
I am currently working on a single page react app. This app will not require any login and it will be publicly available.
I am making a POST request to a webhook of another API that I do not have access to and that I do not maintain. This API required me to send an authentication token via the POST. I wonder how I can securely store this token so that it does not get out in the world. I need to send it as is so storing it in a cookie that a backend provides is not an option. Storing in in JWT will not work as I can decode that without the secret.
Is there even a way to store the token without exposing it to the world?
I hope the issue is clear, if not let me know and I'll explain better.
Thank you all for your time!
I would usually have a local Express server running and proxy the request through that.
You would set up a route in your Express app that you would POST to from your React front-end, this Express route handler then makes the call to the external API from the server side which has the token to put in the header. Then the response is returned to your React front-end without it knowing anything about the external API or tokens.
You can't store the token in front-end. either you need to use
cookies/session to store the token. If you want to store the token you
need to encrypt it and store it will be the better option.
Please check here to understand the JWT token mechanism
if the web app doesn't have a login. you can't generate token without user details.
The token should be passed in the header of the request for best practices.
If you're using create-react-app to instantiate your React project, have you looked into using an environment variable to store the token? It's not 100% safe and secure, check here for the cons, but can be a quick fix without a separate proxy request. You can make an .env file (make sure to add it to your .gitignore if using git) in the root of your directory and define variables there. They need to start with REACT_APP, like REACT_APP_SECRET=1234 and can then be referenced where you need them in your app with process.env.REACT_APP_SECRET.
Read more about environments in React here.
I have have trying to communicate to third party application from react app. Whenever user tries to browse say : http://somesite.com/ , user is redirected to http://authenticationsite.com/ . This application then responds back with POST data in first site if the user is successfully authenticated. I have routes for handling get request. How can I possibly handle POST request from third party apps which contains information like token in the react app?
You basically want to implement sort of token based authentication?
When you load your app (or a component within your app), make a POST request to the authorization website using some ajax library, like axios, fetch or jquery ajax. Depending on the response from the 3rd party server, save the token somewhere (localStorage for example) and proceed with the rest of the flow.
Hope this helps! If you have any questions, or I misunderstood your question, please let me know, and we will proceed from there.
I need some advice regarding using session tokens to authenticate users. I am building an AngularJS app which uses an API to tie in with the backend. I am only building the front end, not the backend. The documentation states that all calls to the API have a session token attached in the body of the request (POST).
I would like to know about the security of storing this token in localStorage. That is where I am storing it now and retrieving and attaching it to each API request. After login, the server sends the session token in the body and I save it from there.
There is no documentation about an x-access-token header that should be sent with the request made to the server. It is not being checked server side. What are the implications of this? I feel that it is susceptible to attacks without this added layer of security.
My main concern is the security of this setup. I want to know what the best setup is to make sure this app is as secure as possible and recommend changes to the way the backend is setup to facilitate this.
Thanks!
As you tell, you are only working on the UI part and not the backend. It is up to the backend team to ensure headers are properly evaluated and security is enforced (btw request headers do not belong to request body). Just put the token into the x-access-token header as they tell.
Storing the token inside the localStorage gives you a little more control over the cookie: You will not accidentally send it to unnecessary URLs. However, older browsers do not support it - you may need to use a shim for that.
In a case of SPA, you may consider not storing the token at all: It could be fetched each time your application is accessed and then stored within a service in angularjs, but it depends how your fetch/login operation is implemented (is it always interactive, how long does it take, etc).
I would suggest use $cookies rather than localstorage. As localstorage does not support some legacy browser.
I am using cookies to store token in my project
What I have:
-API Rest in Symfony2 using friendsofsymfony/rest-bundle exposing some resources.
-Oauth2 server in Symfony2 using FOSOAuthServerBundle.
-Client in Angular.js doing requests to the API Rest. This client currently gets to login via the authorization code grant (using Hello.js with a custom module), and gets the access token effectively.
I want these API resources secured, so:
-On API Rest app: I implemented the AuthenticationEntryPointInterface which I set as the entry_point in security.yml, to return 401 code and application/json content-type on rejected.
-Client intercepts 401 responses and sends the user to the login form.
-Client sends api rest requests with X-Access-Token set on header.
My current issues:
1) I'm not sure whether I should be setting X-Access-Token on client for requests, I understand this is the right way? Or should I leave it all to hello.js api methods?
2) I have no idea how to make the API Rest app "ask" the oauth server "is this token ok? who does it belong to?" Is this already solved in Symfony?
Thanks a lot for any answer or guideline. Feel free to require any further information or code for what I describe.
For anyone else facing a similar issue:
1) As for the client authenticated requests after login, I let hello.js hello(provider).api methods solve it. It sends access_token as a param. I didn't have to set X-Access-Token on the header or any other "hand made" touch.
2) I didn't find an out of the box solution by symfony for this. But this is what I did:
-Configured a before filter for the protected controller (see doc)
-In that method, I made a call to the API held on the OAuthServer (using this bundle)