User_MSDev
User_MSDev

Reputation: 11

Azure AD Easy Auth expires with CORS Error

Question is linked to Azure AD Easy Auth expires even when users are actively using application. Based on explanation shared it seems Easy Auth mechanism is not the right fit for SPA hosted on Azure Web Apps? Can MS add mentioned options under official documentation - "https://learn.microsoft.com/en-in/azure/app-service/app-service-authentication-overview?toc=%2fazure%2fapp-service-web%2ftoc.json"

I am facing the following issue: when AppServiceAuthSession cookie expires, any SPA AJAX requests to underlying secure API Calls fails with CORS issue :Failed to load https://login.windows.net//oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fapp.contoso.com%2F.auth%2Flogin%2Faad%2Fcallback&client_id=xxxxx&scope=openid+profile+email&response_mode=form_post&nonce=xxxxx&state=redir%3D%252Fapi%252Fv2%252Fget-dataapi: Redirect from 'https://login.windows.net/xxxxxxxxxxxx/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%app.contoso.com%2F.auth%2Flogin%2Faad%2Fcallback&client_id=xxxxx&scope=openid+profile+email&response_mode=form_post&nonce=xxxx&state=redir%3D%252Fapi%252Fv2%252Fget-dataapi' to 'https://login.microsoftonline.com/xxxxxxxxxx/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%app.contoso.com%2F.auth%2Flogin%2Faad%2Fcallback&client_id=xxxxxxxxxx&scope=openid+profile+email&response_mode=form_post&nonce=xxxxxxxxxxx&state=redir%3D%252Fapi%252Fv2%252Fget-dataapi' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://app.contoso.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Upvotes: 0

Views: 2229

Answers (1)

Bruce Chen
Bruce Chen

Reputation: 18465

I am facing the following issue: when AppServiceAuthSession cookie expires, any SPA AJAX requests to underlying secure API Calls fails with CORS issue

Per my understanding, you are using the build-in App Service Authentication / Authorization (EasyAuth) feature with your SPA without writing any code or using client library for authentication in your SPA.

For Ajax request with the invalid cookie or token, I could encounter the similar issue as follows:

enter image description here

At this time, you could capture the Ajax error and redirect your SPA for re-authenticate to retrieve the new AppServiceAuthSession cookie.

Chris Gillum's answer in Azure AD Easy Auth expires even when users are actively using application could fit your scenario.

Based on my experience, you could use the JavaScript client library for Azure Mobile Apps in your SPA for retrieving the x-zumo-auth token and use the token approach as Chris Gillum answered. For a simple way, you could use the server-flow authentication as follows:

client.login("aad").done(function (results) {
     alert("You are now logged in as: " + results.userId);
     console.log("x-zumo-auth token is: "+ results.mobileServiceAuthenticationToken);
}, function (err) {
     alert("Error: " + err);
});

Also, you could directly retrieving the AAD id_token or access_token via using Active Directory Authentication Library (ADAL) for JavaScript as juunas commented, then include the token (id_token, access_token) in the Authorization header as a bearer token to request your WebAPIs.

Additionally, you could use the client-flow authentication for App Service, and retrieve the id_token or access_token via ADAL.js, then use the previous token to login with EasyAuth for retrieving the AuthenticationToken as the x-zumo-token, then use the x-zumo-token to request your WebAPIs.

Upvotes: 0

Related Questions