How to do Authentication & Authorization Azure AD App, using C# WEBAPI (token based) .netcore

Question

I am able to Do Authentication and Authorization for my .netcore MVC app+reactjs (Billing App) this application will be hosted on IIS, and on the same server planning to host the .netcore Webapi (chart App).

By using Billing App we will call the chart WebApis. NOW WebApi should be Authenticate/Authorize user based on token sent by front-end app (token-based webapi that does Authe/Autho, no another login pop-up)

1. Able to Generate token using postman-see img by requesting below link

   https://login.microsoftonline.com/{{tenandId}}/oauth2/token

Will sent this token with the header to Web-API, which will be having the same configuration of Azure AD app (client id, scope, etc.) as Billing App has. Api should validate the token and send the chart data.

2. Should try adal/msal in reactjs so and decorate WebApis with Authorize attribute so that will take care of Authentication & Authorization?

Got many link but few code aren't working and few process is no more works for Azure, and few are having huge code and not what exactly I am looking for.

Basically I'll host one App in .netcore that does Auth part, now the WebApi should also be Auth using same user cookies/token because I don't wanna give another login popup, see lot of MS sample code but no luck

Which approach is right 1 or 2, and share sample code/link any help appreciated,

Answer 1

Per my understanding, you have a client app named Billing App will login users and call APIs via user based access token. If so , you should register two apps,a client app for Billing App and a service side App .For the client app , as this is a client side, you should use users' credentials to obtain taken from Azure AD instead of app Client secrets. To implement this , you should config it as a public client on Azure AD and enable access token and ID token :

As you want to get call APIs of service side App, you should grant permissions below to make sure that users can get access token via your client app(lets assume "stanapitest" here is the service side App) : Note, pls click Grant admin consent for Devchat button to finish the permission grant flow. With this process done , you can get user based access token by password flow :

or OAuth2 grant code flow or Oauth2 implicit grant flow , based on your requirement of course.

Ok, its time for service side, to demo the .net core Api , let's create a simple .net core Api project in VS :

After the project created , change the client id as your service app id :

Run the project and call an API of it , as you can see it has been protected by Azure AD :

Use the user based access token to call this API :

As you can see it works as excepted . Hope it helps . If you have any further concerns , pls feel free to let me know .

Answer 2

After authenticating in Billing app , when you want to acquire access token to access your another web api application , you can call using the acquireTokenSilent method(msal.js) which makes a silent request(without prompting the user with UI) to Azure AD to obtain an access token. The Azure AD service then returns an access token containing the user consented scopes to allow your app to securely call the API.

It's better to make your web api as independent resource which protected by AAD , In your front-end react app , you can use acquireTokenSilent to acquire token for accessing web api after user login :

// if the user is already logged in you can acquire a token
if (msalInstance.getAccount()) {
    var tokenRequest = {
        scopes: ["user.read", "mail.send"]
    };
    msalInstance.acquireTokenSilent(tokenRequest)
        .then(response => {
            // get access token from response
            // response.accessToken
        })
        .catch(err => {
            // could also check if err instance of InteractionRequiredAuthError if you can import the class.
            if (err.name === "InteractionRequiredAuthError") {
                return msalInstance.acquireTokenPopup(tokenRequest)
                    .then(response => {
                        // get access token from response
                        // response.accessToken
                    })
                    .catch(err => {
                        // handle error
                    });
            }
        });
} else {
    // user is not logged in, you will need to log them in to acquire a token
}