Hello I currently have two azure app services running, one being my front end and the other being my backend. I would like my backend to require Microsoft authentication (AD), but whenever doing so any api calls from the front end are blocked.
How and what do I send to my backend from my front end to do this?
I am thinking of of using axios to export something to the backend whenever certain api calls are made. I am using Nodejs by the way. Thanks.
The flow that you should implement is the following:
On your frontend, you authenticate your users with AAD
During the authentication phase, you will need to acquire a proper accessToken that can be used to consume your API
After successful authentication, you will then call your API from the frontend, passing the acquire accessToken as an Authorization header
When the request hits the API, you will need to validate the accessToken - this is normally done by implementing a middleware component on your API that does this validation
If the accessToken is valid, you allow the request to hit the controller logic and you return the corresponding response
If the accessToken is not valid, you send a 401 or 403 back
For node.js, you can use passport to handle the token validation for you.
The below example uses a React app as the frontend and calls a node.js API, protected with AAD:
https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api
Related
When a user logs in, I store the login variable in redux but when we hit the api request then firstly react.js checks the authentication using redux if loggedin then the node.js checks the authentication and returns the api.
Isn't it unnecessary using authentication on both sides? Why can't I just use authentication on server side only?
Your thoughts please on what should I follow.
I think you need not to authenticate both side. You have to just send token in headers (authentication) of every API and create middleware for authenticate user for API in nodejs.
there are multiple ways to implement authentication in you're front end projects though the most common way to do this is by using JWT (json web tokens) however for using this type of authentication you need to implement OAuth, OpenID connect or similar authentication service on you're backend .
ps: I recommend storing you're login credentials in cookies
In my OAuth flow, I am using the auth code grant type.
The front end (React.js) app directs to the OAuth server's login and scope grant pages
A redirect happens to an Express.js client app
The client app receives the auth code and does token exchange.
I am stuck at this point. i have saved the user and token data to a database. But I have no way of redirecting back to the front end (React.js) app while safely passing a user session:
Cookies can't be passed cross domain
Query strings are available but are captured in server logs and browser history.
Redirects are GET requests so I don't have access to a POST request body.
How do you safely pass session data to a front end after your OAuth process? I suspect my Auth flow is wrong at one or more points.
Sounds like you could simplify by using a client side flow in your ReactJS app:
Login uses Authorization Code Flow (PKCE)
SPA uses the OIDC client library
The SPA receives an access token and can make cross domain API calls with it
It is difficult to see what value your ExpressJS client app brings - feels like it is adding unnecessary complexity.
RESOURCES OF MINE
Here are some notes that might be useful. The SPA code is quite a bit simpler than older solutions that had to switch between front and back ends' to handle security processing:
SPA and API code sample
Blog post on OAuth / HTTP messages
I want to use azure AD as authentication.
If user who is in certain organization logged in from SPA, and give access token to backend, then I want to permit access from SPA.
So, I want to check if token passed from SPA is valid or not.
How can I do this?, Or Can I do this?
I want to build backend server with node.js app, and deploy backend app to app service or Azure Container Registry.
I think bearerStrategy would work.
Ref https://github.com/AzureAD/passport-azure-ad
BearerStrategy uses Bearer Token protocol to protect web resource/api.
It works in the following manner: User sends a request to the
protected web api which contains an access_token in either the
authorization header or body. Passport extracts and validates the
access_token, and propagates the claims in access_token to the verify
callback and let the framework finish the remaining authentication
procedure. On successful authentication, passport adds the user
information to req.user and passes it to the next middleware, which is
usually the business logic of the web resource/api. In case of error,
passport sends back an unauthorized response.
In the past, there was an ADAL version for node apps. I don't know if it's still valid or not, but here are useful links:
https://medium.com/#liangjunjiang/verify-and-decode-azure-activity-directory-token-bc72cf7010bc
https://learn.microsoft.com/en-us/azure/active-directory/develop/authentication-flows-app-scenarios
I'm working on an application using sails. web and mobile.
I want to use CSRF protection that sails provides when the app is visiting on the web. And if a request is send by the mobile app. send with the payload a jwt.
On the sails' documentation I found a property csrf.routesDisabled that disabled the CSRF for some routes. But that is not what I want. I'm trying to find a way to for example, check if the parameter jwt is send in the post request. And if the parameter was send then check and validate it. else, check for _csrf value of the form. Is this possible?
or the csrf protecction works before any information is send to the server?
my better choose is use jwt in the web app too?
any other good idea for solving this problem is welcome
thanks
Sounds like you've built the web app with SailsJS and you're trying to reuse the controller actions as REST endpoints for external applications.
Really what you should do, is decouple the data access from the front-end. Have an isolated REST API - using token authentication - which is used by both a web front-end (and any other applications).
For example, I'm currently working with a SailsJS REST API, used by an EmberJS front-end and an iOS app. Both front ends login using user credentials, in order to receive an authentication token. This token is then used for any future requests. A policy locks down all but the login authentication endpoint, to validate the token
Scenario:
I want to create a passportjs application where I authenticate by sending username and password to and API endpoint. After authentication, the API respond with a session candy. Once the client receives the candy, client can make any API calls using that candy. API will check for the candy and then return with the required response.
This is required in a mobile application, where I can call API's to authenticate and then call other API's with the candy.
Is it possible with PassportJS? I know that it works for desktop environment because passporjs configures the header with session information which is stored in the browser and is added to every request.
What needs to be done to make it work for my scenario? Will the implicit addition of session work, or I need to explicitly add the session information with each query?