CODEWITHSUNDEEP
azureazure-active-directory
Alexandru Antochi
Alexandru Antochi

Reputation: 1465

Bearer token works with ADAL, does not work with MSAL

I have a protected Web API running that I would like to access. In Azure the App Registration is:

I'm trying to get a bearer token for the Web API. The problem is that it won't work with MSAL, but it does work with ADAL.

Here is the ADAL vanilla JS code of my "SPA":

window.config = {
   clientId: 'SPA client id',
   tenant: 'Tenant id',
   redirectUri: 'http://localhost:3000',
   extraQueryParameter: 'nux=1',
   popUp: true
};


var authContext = new AuthenticationContext(config);

function getToken(){
    var user = authContext.getCachedUser();
    if (!user) {
        authContext.login();
        return;
    }
    var cachedToken = authContext.getCachedToken(window.config.endpoints.prod);
    if (!cachedToken) {
        authContext.acquireToken("Web API Client Id", function(error, token) {
            console.log(error);
        });
    }
    console.log(cachedToken);
    var t = document.getElementById("token");
    t.innerText = cachedToken;
};

If I copy the token in Postman and do a request it will work.

The MSAL code is as follows:

const msalConfig = {
      auth: {
                clientId: "SPA client id",
                authority: "https://login.microsoftonline.com/Tenant id"
            }
        };

const loginRequest = {
       scopes: ["copied the scope of SPA from the Expose API"],
       redirectUri: "http://localhost:3000/"
};
 const myMSALObj = new Msal.UserAgentApplication(msalConfig);
myMSALObj.loginPopup(loginRequest).then(handleResponse).catch(function (error) { console.log(error);});
var tokenRequest = {
             scopes: ["Copied scope from the Web API expose API section"],
            };
            if (!token) {
                myMSALObj.acquireTokenPopup(tokenRequest)
                    .then(response => {
                        console.log(response);
                        setTimeout(function () { 
                        token = response.accessToken;
                    });
    console.log(token);

Now there is one thing I noticed as a difference: ADAL allows me to pass on the Client Id of the Web Api when calling the acquireToken method while MSAL does not. Could not find any documentation on it but I presume it resolved it from the Application Id Uri.

The second difference is in the token claim aud:

Upvotes: 0

Views: 707

Answers (1)

Alexandru Antochi
Alexandru Antochi

Reputation: 1465

There are two identifiers for the app, the AppId in the form of xxxxxxx-xxxx-xxxx-xxx-xxxxxxxxxxx and AppIdURI which is given by the user.

If I use the scope xxxxxxx-xxxx-xxxx-xxx-xxxxxxxxxxx\user.read it works. I was using the scope in the form of AppIdURI\user.read. Thus the tokens were the same except for the aud, where ADAL had the Client Id (aka App Id) and MSAL had the AppIdURI. Changed it to AppId and it works.

I don't know why the app won't accept the AppIdUri because in the Expose an API section the scope is written as AppIdUri/user.read.

Upvotes: 0

Related Questions