5

I'm confused on 'where' (as in which layer, if not both) I am to implement authentication with Azure AD in my app.

So I have a Vue JS front end, and I've read about how I can leverage ADAL JS to help with auth from the client.

However, I need calls to my web API to also be secured, and that's obviously not done with ADAL JS.

Question

How can I restrict calls to my web api to only users that are authenticated (they will need to login via the vue js app) using Azure AD? And then, similarly, allow web api to authenticate with Azure AD in order to retrieve things from blob storage?

Further Context (If Necessary)

One example flow will be that a user logs in (in the vue js app), posts a file to my web api, which puts it in blob storage (azure). An authenticated user can then later request this file (which needs to be restricted in azure to auth'd users only) and then return it to the authenticated client.

EDIT

Am I over-thinking this? Is it a simple case of the web API authenticating with AD in Azure, receiving a token and forwarding that token onto the client to pass about?

Improve this question
1
  • I'm currently struggling with this myself. I have sign-in working ok using msal from Vue app and I am sending the token back in the header to the API. But I can't seem to find an example (that doesn't user a helper class) to do the next steps - authorisation etc. Commented Apr 8, 2020 at 11:03

1 Answer 1

Reset to default
4

Your Vue app needs to handle the authentication using MSAL.js or ADAL.js. It can then acquire access tokens to your back-end API using the OAuth implicit flow.

Your back-end API authenticates the caller using the JSON Web token they acquired.

You can control which apps can call your API by defining scopes and app permissions on it, and then assigning them to apps that you want to have those accesses. Your API then needs to check the tokens that they have those permissions :)

Permissions and consent: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent

Front-end sign-in: https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in

Front-end acquire token: https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Brilliant, thanks for such a detailed reply. Much appreciated. This approach feels like there are 2 points at which we hit the AD server though. 1: Client passes username and password to AD and receives token. 2: Web API then has to validate this token with another request to AD when my SPA calls the web API for whatever reason. Shouldn't my web API simply act as a proxy to web API calls instead? As in SPA gives me web API some user/pass and my web API relays that on to AD and passes an AD token back to the client/SPA? Thanks again.
1: Your client should not be passing passwords to AAD, you should use e.g. the implicit flow to have the user login at AAD's login page. 2: Your API does not have to call AAD to validate the token. It can load the public keys from AAD at startup and use those to validate the digital signature. Do not handle passwords.
The OpenID Connect metadata document for the common endpoint is here for example: login.microsoftonline.com/common/v2.0/.well-known/…. Your API would load this (or your tenant-specific one) at startup to configure itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.