[Tutorial] Advice sought: Handling expired tokens during an javascript fetch request

[jadjare]

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x] request for help
- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

The issue was found for the following scenario:

Please add an 'x' for the scenario(s) where you found an issue

1. Other (please describe)
   1. Handling the an Expired Access Token during an AJAX based call
      1. Microsoft.Identity.Web
      2. Using TokenAcquisition to retrieve a token to be used for calling the graph method checkMemberGroups
      3. Making a AJAX based call to an ActionMethod requiring Azure AD authorization

Do you have any advise on how to handle the following situation?

When using the fetch javascript method to call an ActionMethod that requires an AccessToken, if the access token has expired, then a 302 redirect response is received. The redirect to login.microsoftonline.com then appears in the Network traffic with a 200 OK status response. However, the final redirection back to the client app (localhost) fails.

Chrome reports these errors/warnings duing this process

Access to fetch at 'https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/oauth2/v2.0/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx&redirect_uri=https%3A%2F%2Flocalhost%3A44306%2Fsignin-oidc&response_type=code%20id_token&scope=openid%20profile%20offline_access%20User.Read&response_mode=form_post&nonce=12345&state=6789&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.3.0.0' (redirected from 'https://localhost:44306/Home/CheckMembership?groups=3c479d63-xxxx-xxxx-xxxx-9ce22ce90d13') from origin 'https://localhost:44306' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/oauth2/v2.0/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx&redirect_uri=https%3A%2F%2Flocalhost%3A44306%2Fsignin-oidc&response_type=code%20id_token&scope=openid%20profile%20offline_access%20User.Read&response_mode=form_post&nonce=12345&state=6789&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.3.0.0 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

The error received in the fetch request contains no details other than "TypeError: Failed to fetch".

Here's the javascript for the fetch

            let response = await fetch(`/Home/CheckMembership?groups=${checkGroupIds}`)
                .catch(err => console.log({ method: "CheckMembership", error: err }));

I'm guessing that a MsalUIRedirectionException is being thrown under the hood and this needs to be appropriately handled in the fetch method, however, I cannot see how to do it. I have checked various sample projects but none of them make requests via an AJAX style call.

Please let me know if you need more information.

[jennyf19]

@jmprieur will respond.

cc: @anasimao

[jmprieur]

@jadjare : did you try to remove the AuthorizeForScopes attribute on the action? you could process the MsalUiRequiredException yourself in the Action?

active-directory-aspnetcore-webapp-openidconnect-v2/2-WebApp-graph-user/2-1-Call-MSGraph/Controllers/HomeController.cs

Line 34 in f84854e

[AuthorizeForScopes(Scopes = new[] { Constants.ScopeUserRead })]

cc: @anasimao @jennyf19

[jadjare]

@jmprieur : I had a filter on to handle the AuthorizeForScopesAttribute site wide

    public class DefaultAuthorizeForScopeFilter: AuthorizeForScopesAttribute
    {
        public DefaultAuthorizeForScopeFilter(string[] scopes) => base.Scopes = scopes;
    }

and in startup.cs

            services.AddMvc(options =>
            {
                options.Filters.Add(new DefaultAuthorizeForScopeFilter(new string[] {"User.Read", "Directory.Read.All"}));
            }).SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

I have removed this so that so that there shouldn't be any automatic handling of the MsalUiRequiredException.

Now, when the page first loads it authorizes the user and presents my basic sample page, which includes a button to perform the AJAX request. Clicking on the button successfully calls the ActionMethod, acquires an AccessToken, and calls the Microsoft graph. I then invalidate the Access Token. Note, rather than waiting an hour for it to expire I'm able to invalidate it by running the sample web app in "5-WebApp-AuthZ\5-2-Groups" and navigating to the User Profile page. After this step I return to my app and try and make the AJAX request. The request is automatically redirected, it doesn't even hit my Action Method or any breakpoints I've placed in the AuthorizeForScopesAttribute.

Ultimately, even if I could process the MsalUIRequiredException myself, because the call to the Action Method originated from javascript, as an AJAX request, is there actually anything I can do with it without generating a CORS error?

[jennyf19]

@jadjare What do you mean by "invalidating the token"?

[jadjare]

@jadjare What do you mean by "invalidating the token"?

@jennyf19 By "invalidating the token" I mean taking an action that causes a request for an Access Token to be redirected to login.microsoftonline.com/.../oath2.

Normally this happens when you first log in to an application or after an Access Token has expired. I don't have permissions to change the expiry period of the token I'm receiving and can't wait an hour between requests during development/debugging. However, I've found that if I have two different Visual Studio applications running on different ports but with the same AD Tenant Id, Client Id and Client Secret then I can mimic the behaviour. In this situation, if I refresh the page in one application and then go to the other application, when I refresh the page on the other application it redirects to login.microsoftonline.com. If I then return to the 1st application instance and refresh the page the Access Token it originally retrieved is no longer "valid" and it once again redirects to login.microsoftonline.com. I believe under the hood a "MsalUIRequiredException" is occurring, hence the redirect to login.microsoft.com.

@jmprieur Title question is exactly what i am looking for..
Following the tutorials on signin user to org, call graph and distributed token cache I now have most of what I am looking for
services.AddMicrosoftIdentityPlatformAuthentication(Configuration) .AddMsal(Configuration, new string[] { Constants.ScopeUserRead }) .AddDistributedTokenCaches();
Now on my action I want to save using jquery Ajax
[Authorize] public JsonResult Save([FromBody] SomeViewModel data)

If the application user lets the page sit how do I get it to go away and look for a refresh token when needed when the $.ajax({some work}) begins?
Currently, after an hour, I get a Cors error when it attemps to go to login.microsoft

Is this in scope for what you can answer here or would I need to ask this elsewhere?

I see this is assigned and just wanted to check if the plan is to include/produce a tutorial that will including handling expired access tokens when making xhr requests from the web app and to get refresh tokens when using authorize policies? (or indeed whatever the correct approach should be)

[jmprieur]

For the moment, the plan is to understand the problem, and come-up with the best solution, (possibly with an incremental step).
Out of curiosity would you also be interested in Blazor?

What I would like to do is 1. A Regular ASP.Net Core Web App in AAD. In a returned View, have sections that have Js/Jquery calls to an Action to bring back some Json to update sections of the page. These Actions will have [Authorize] or [Authorize Policy()] so if the access token has expired I would see how we could use the refresh token (possibly in the db token cache) to restore the access and then update the section of the page where an event happened and make sure if further events had happened during login.microsoft stuff that they were updated as well. (Found stuff in stack that just sends off a standard call every 20mins to keep the token alive. I would prefer not to do that) 2. Again same idea but instead of a contained web app. An API with a client on the server checking the person is authorized for called actions and managing token lifetime and refresh. (ASP.Net Core Client to consume, Some API, all protected in AAD) 3. Seeing how to build this up to a Blazor app would be great as I would like to start this later in the year. 2 and 3 would be a great bonus but need to understand more about using the access and refresh tokens in core, particularly using Javascript/jQuery or perhaps KO to update page sections. Happy to expand or clarify details. Still have a hard time finding tutorials/recipes for a number of scenarios on ASP.Net Core with Azure and MSAL/ADAL and Calling MS Graph etc. Microsoft.Identity.Web helps a lot but it would be good to see more examples as much of what is can do is not always clear. N.B Here is an example of keeping the session alive https://stackoverflow.com/questions/1431733/keeping-asp-net-session-open-alive Without this you get a cors message when it goes away to login.microsoft.com A normal action request will allow $.get/post to start working again until the token expires again. Thanks From: Jean-Marc Prieur <notifications@github.com> Sent: 05 March 2020 15:27 To: Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2 <active-directory-aspnetcore-webapp-openidconnect-v2@noreply.github.com> Cc: dxm38 <djm38@msn.com>; Comment <comment@noreply.github.com> Subject: Re: [Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2] [Tutorial] Advice sought: Handling expired tokens during an javascript fetch request (#264) For the moment, the plan is to understand the problem, and come-up with the best solution, (possibly with an incremental step). Out of curiosity would you also be interested in Blazor? — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#264?email_source=notifications&email_token=AGMPVZHC5EYOH2DMQBQ4USLRF7AFHA5CNFSM4KIJBVC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEN5WFCA#issuecomment-595288712>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGMPVZDZ6GPF44JNF5JTON3RF7AFHANCNFSM4KIJBVCQ>.

[jadjare]

1. A Regular ASP.Net Core Web App in AAD. In a returned View, have sections that have Js/Jquery calls to an Action to bring back some Json to update sections of the page. These Actions will have [Authorize] or [Authorize Policy()] so if the access token has expired I would see how we could use the refresh token (possibly in the db token cache) to restore the access and then update the section of the page where an event happened and make sure if further events had happened during login.microsoft stuff that they were updated as well. (Found stuff in stack that just sends off a standard call every 20mins to keep the token alive. I would prefer not to do that)

@dxm38 's first requirement matches what I'm looking to achieve also.

Out of curiosity would you also be interested in Blazor?

I'm only interested if it's the only way that the problem can be solved. We currently use VueJs and don't intend to move to Blazor in the immediate term.

Thanks for your continued assistance.