使用 Vue JS 和 .Net Core Web API 之类的堆栈 - 我在哪里实施身份验证（Azure AD）？

Question

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?

Answer 1

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://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent

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

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