Incorporating the UserAgentApplication.loginPopup function to authenticate users on our Azure AD has been a challenge as we transition from an ASP.NET MVC application to a Vue.js front end and ASP.NET 'API' backend. The goal is to pass the accessToken obtained from MSAL to our backend in order to verify access levels. While everything works perfectly locally, once the project is deployed to the server, hitting the '/api/authentication/SetAzureUser' endpoint results in a 404 error.
route.js
var myMSALObj;
const getLoginPopup = (request) => {
return myMSALObj.loginPopup(request);
}
const getTokenPopup = (request) => {
return myMSALObj.acquireTokenSilent(request)
.catch(() => {
// fallback to interaction when the silent call fails
return myMSALObj.acquireTokenPopup(request)
.then(tokenResponse => {
return tokenResponse;
}).catch(error => {
console.log(error);
});
});
}
const azureUserAuthentication = async () => {
const utilityStore = useUtilityStore();
try {
const msalConfig = {
auth: {
clientId: "clientId",
authority: "https://login.microsoftonline.com/",
redirectUri: `${window.location.protocol}//${window.location.host}/api/authentication/AzureAuthenticationCallback`,
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
}
};
const loginRequest = {
scopes: ["openid", "profile", "User.Read.All"]
};
const tokenRequest = {
scopes: ["Mail.Read"]
};
myMSALObj = new UserAgentApplication(msalConfig);
var loginPopupResponse = await getLoginPopup(loginRequest);
if (loginPopupResponse != null && myMSALObj.getAccount()) {
var tokenResponse = await getTokenPopup(tokenRequest);
if (tokenResponse != null) {
// Getting 404 on this axios call.
var setAzureUserResponse = await axios({
method: 'get',
url: '/api/authentication/SetAzureUser',
contentType: "application/json",
withCredentials: true,
params: {
accessToken: tokenResponse.accessToken
}
});
if (!setAzureUserResponse.succeeded) {
window.document.title = "Unauthorized Access";
return { name: 'unauthorized-access' }
} else {
utilityStore.$patch({ showProcessingOverlay: false });
}
}
}
} catch (ex) {
console.log(ex);
}
}
API Endpoint
[HttpGet("SetAzureUser")]
public JsonResult SetAzureUser(string accessToken)
{
return Json(_authenticationService.AuthenticateAzureUser(_stateManagement.BuildBaseParameters(), accessToken));
}