[Question] How to handle the MsalUiRequiredException for incremental consent with AJAX calls

[creativebrother]

Which version of Microsoft Identity Web are you using?
v0.4.0-preview
Where is the issue?

• Web app
  • Sign-in users
  • [x ] Sign-in users and call web APIs
• Web API
  • Protected web APIs (validating tokens)
  • Protected web APIs (validating scopes)
  • Protected web APIs call downstream web APIs
• Token cache serialization
  • In-memory caches
  • Session caches
  • Distributed caches
• Other (please describe)

Is this a new or an existing app?
c. This is a new app or an experiment.

Repro

in startup.cs configureservices:
string[] initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');
            services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
                .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
                .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
                .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                .AddDistributedTokenCaches();

            services.AddControllersWithViews(options =>
            {
                var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
                options.Filters.Add(new AuthorizeFilter(policy));
            }).AddMicrosoftIdentityUI();
in appsettings.json:
  "DownstreamApi": {
    /*
     'Scopes' contains space separated scopes of the Web API you want to call. This can be:
      - a scope for a V2 application (for instance api:b3682cc7-8b30-4bd2-aaba-080c6bf0fd31/access_as_user)
      - a scope corresponding to a V1 application (for instance <App ID URI>/.default, where  <App ID URI> is the
        App ID URI of a legacy v1 Web application
      Applications are registered in the https:portal.azure.com portal.
    */
    "BaseUrl": "https://graph.microsoft.com/v1.0",
    "Scopes": "user.read"
in controller:
       [Authorize]
        [HttpGet]
        [Route("RecognitionTile")]
        [AuthorizeForScopes(Scopes = new[] { "https://ccbcc.sharepoint.com/AllSites.Read" })]
        public ViewComponentResult RecognitionTile()
        {
            return ViewComponent("RecognitionTile");
        }
for token acquistion;
        /// <summary>
        /// Private: Gets and returns an access token for the provided resource.
        /// </summary>
        /// <param name="resource">Resource to obtain access token for</param>
        /// <returns></returns>
        private async Task<string> GetAccessTokenforResource(string resource)
        {
            // Get the access token for the resource.
            string accessToken = await _tokenAcquisition.GetAccessTokenForUserAsync(new[] { resource });
           //resource is actually same as controller scope -- "https://ccbcc.sharepoint.com/AllSites.Read"

Expected behavior
Expect the incremental consent prompt to come up when call the controller.
Actual behavior
When call the tokenAcquisition.GetAccessTokenForUserAsync(new[] { resource }) they exception is thrown: IDW10502
An MsalUiRequiredException was thrown due to a challenge for the user.
Inner Exeption:
AADSTS65001: The user or administrator has not consented to use the application with ID 'xxx' named 'xxxx'. Send an interactive authorization request for this user and resource.

Possible solution

Additional context / logs / screenshots
This code is trying to access sharepoint api with incremental scope.
The initial scope cause the initial consent prompt during authentication:

Cleared all the Permissions prior:

After initial consent:

[creativebrother]

Is the [AuthorizeForScopes(Scopes = new[] { "https://ccbcc.sharepoint.com/AllSites.Read" })]
works like [Authorize] Attribute by checking the header about the token scope to verify the scope exist, otherwise prompt user to a consent page?

[jmprieur]

@creativebrother : the AuthorizeForScopes attribute is explained here: https://github.com/AzureAD/microsoft-identity-web/wiki/Managing-incremental-consent-and-conditional-access

It's an exception handling attribute (it handles the MsalUiRequiredException)
which means that the method by which you acquire the token should be called by your controller action.

You can also place this attribute on the controller/page if all the actions require consent for the same scopes

[creativebrother]

Hi, jmprieur
Thanks for point out that I should acquire the token in the controller action. Now it seems it is redirecting to the authorization endpoint. The problem is I am usingjquery.ajax call to the controller action decorated with the AuthorizeForScopes attribute. So I have the following cors errors from chrome - see bottom portion. (I tried to remove the custom header from xhr in jquery ajax call to avoid the preflight check) but it still did not work.
I thought the ajax is the problem here due to redirect and CORS. If the controller action is invoked by page, then the 302 redirect would be no problem...
Could you kindly point out what I am missing?

Chrome error before remove X-Requested-With header :
Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxx/oauth2/v2.0/authorize?client_id=xxx&redirect_uri=https%3A%2F%2Flocalhost%3A44354%2Fsignin-oidc&response_type=code%20id_token&scope=https%3A%2F%2Fccbcc.sharepoint.com%2FAllSites.Read%20openid%20offline_access%20profile&response_mode=form_post&nonce=xxx&login_hint=xxx&domain_hint=organizations&client_info=1&state=xxx&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' (redirected from 'https://localhost:44354/Home/RecognitionTile?_=1600837060526') from origin 'https://localhost:44354' 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.

Chrome error after remove X-Requested-With header :
Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxx/oauth2/v2.0/authorize?client_id=xxx&redirect_uri=https%3A%2F%2Flocalhost%3A44354%2Fsignin-oidc&response_type=code%20id_token&scope=https%3A%2F%2Fccbcc.sharepoint.com%2FAllSites.Read%20openid%20offline_access%20profile&response_mode=form_post&nonce=xxx&login_hint=xxx&domain_hint=organizations&client_info=1&state=xxx&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' (redirected from 'https://localhost:44354/Home/RecognitionTile?_=1600837060526') from origin 'https://localhost:44354' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

[jmprieur]

@creativebrother did you have a look at this article: Enable Cross-Origin Requests (CORS) in ASP.NET Core ?

[creativebrother]

@jmprieur Yes I did. I tried and actually it did not work. Then I realized that I am solving a different problem.
In short:
Does [AuthorizeForScope(Scope="xxx")] covers ajax call into the action method scenario?

[AuthorizeForScope(Scope="xxx")] is good for redirect to the prompt page for user consent when user click on the action link.
but in my case, I use an ajax call to the same action, the page does not redirect(refresh)in browser so user cannot involve the consent page directly hence ajax is redirected and calling into different origin. (localhost to remote origin of https://login.microsoftonline.com/xxx/oauth2/v2.0/authorize?xxx)
So change my code of any CORS thing won't help. The remote origin is not emitting cors header for localhost. Even it does, there will be hard time to bring up the consent within ajax...

It seems [AuthorizeForScope(Scope="xxx")] need to return 200 and some custom header instead of 302 if the request header contains X-Requested-With: XMLHttpRequest so ajax has a chance to check the success result and issue a reload if there is the custom header indicating redirect url for consent prompt?
something like this:
$(document).ajaxSuccess(function(event, request, settings) {
if (request.getResponseHeader('REQUIRES_AUTH') === '1') {
var redirecturl = request.getResponseHeader('AUTH_URL')
window.location =redirecturl;
//Here 'AUTH_URL' = 'https://login.microsoftonline.com/xxx/oauth2/v2.0/authorize?xxx'; set in //[AuthorizeForScope(Scope="xxx")]
}
});

Please let me know if I misunderstood anything.

Thanks,

[creativebrother]

@jmprieur In the mean time, I have to create another controller action without the [AuthorizeForScope(Scope="xxx")] for the ajax call and return the a 200 with custom data containg redirect url by using ConfidentialClientApplicationBuilder.CreateWithApplicationOptions to construct the authorization endpoint url so the ajax can use the window.location to bring up the consent prompt...

[creativebrother]

@jmprieur I did the following and now my ajax call is working(kind of ...). Basically I need to remove the [AuthorizeForScopes] attribute.
This way it will return regular view or url for authorization prompt/consent depending on the token scope and ajax can handle both(but not for page).

If the [AuthorizeForScopes] attribute can incorporate this feature would be great.

    [Authorize]
    [HttpGet]
    [Route("RecognitionTile")]
    //[AuthorizeForScopes(Scopes = new[] { "https://ccbcc.sharepoint.com/AllSites.Read" })]
    public async Task<IActionResult> RecognitionTile()
    {
        try
        {
            var aToken = await GetAccessTokenforResource("https://ccbcc.sharepoint.com/AllSites.Read");
        }
        catch(MicrosoftIdentityWebChallengeUserException ex)
        {
            var callbackpath = new PathString("/signin-oidc");
            var request = Request;
            var currentUri = UriHelper.BuildAbsolute(request.Scheme, request.Host, request.PathBase, callbackpath);
            var app = ConfidentialClientApplicationBuilder.CreateWithApplicationOptions(_applicationOptions).WithRedirectUri(currentUri).Build();
            var appp = app.GetAuthorizationRequestUrl(new string[] { "https://ccbcc.sharepoint.com/AllSites.Read" }).WithLoginHint(User.Identity.Name);
            var authuri = await appp.ExecuteAsync();
            return Unauthorized(new { authurl = authuri.AbsoluteUri });
        }
        return ViewComponent("RecognitionTile");
    }

[creativebrother]

Hi, @jmprieur After looked at [authorize] source code and [authorizeforscopes] source code
is it possible to do the following like authorizeattribute class is doing:
///

/// A delegate assigned to this property will be invoked when the related method is called.
///

public Func<RedirectContext, Task> OnRedirectToReturnUrl { get; set; } = context =>
{
if (IsAjaxRequest(context.Request))
{
context.Response.Headers["Location"] = context.RedirectUri;
}
else
{
context.Response.Redirect(context.RedirectUri);
}
return Task.CompletedTask;
};

    private static bool IsAjaxRequest(HttpRequest request)
    {
        return string.Equals(request.Query["X-Requested-With"], "XMLHttpRequest", StringComparison.Ordinal) ||
            string.Equals(request.Headers["X-Requested-With"], "XMLHttpRequest", StringComparison.Ordinal);
    }	

in AuthorizeForScopeAttribute:

                AuthenticationProperties properties = IncrementalConsentAndConditionalAccessHelper.BuildAuthenticationProperties(
                    incrementalConsentScopes,
                    msalUiRequiredException,
                    context.HttpContext.User,
                    UserFlow);

                **var httprequest = context.HttpContext.Request;
                if(IsAjaxRequest(httprequest))
                {
                    context.Result = ?
                }
                else
                {
                    context.Result = new ChallengeResult(properties);
                }**       

[creativebrother]

@jmprieur Or is it possible to do it in the Startup.cs

        services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
            .AddCookie(options =>
            {
                options.Events = new CookieAuthenticationEvents
                {
                    OnRedirectToLogin = context =>
                    {
                        if (IsAjaxRequest(context.HttpContext.Request))
                        {
                            context.Response.Headers["Location"] = context.RedirectUri;
                            context.Response.StatusCode = StatusCodes.Status401Unauthorized;
                        }
                        else
                        {
                            context.Response.Redirect(context.RedirectUri);
                        }

                        return Task.FromResult(0);
                    }
                };
            })
            .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
            .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
            .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
            .AddDistributedTokenCaches();

[jmprieur]

@creativebrother if this works for you, this looks good for me, but I'm not an expert
Adding @Tratcher for his input

[Tratcher]

Cookie auth already does that by default, not sure why you needed to modify it.
https://github.com/dotnet/aspnetcore/blob/c39ecb9f9b387ec39112c3eace5ae38db06df160/src/Security/Authentication/Cookies/src/CookieAuthenticationEvents.cs#L41-L53

[creativebrother]

@Tratcher Hi, Even thought it is using cookie authentication, but it is not behaving like it does when the ChallengeResult rendered the redirect result. It is still producing 302 instead of 401.

When my ajax call the action method decorated with [AuthorizeForScopes(Scopes = new[] { "https://ccbcc.sharepoint.com/AllSites.Read" })], its response is NOT 401 but is still a 302 redirect(ChallengeResult) that caused the CORS issue because ajax is silently redirecting to Azure Authorization EndPoint.

Is it possible in the AuthorizeForScopesAttribute to return ChallengeResult(302) or UnauthorizedObjectResult(/Here goes with the redirectUrl for Authorization URL/) based on whether the request is ajax or not ?

I did try this, but can not get a redirect authorization url exactly like from login redirect is creating.

I tried modify the attribute this way at the end of the AuthorizeForScopesAttribute class:

                AuthenticationProperties properties = IncrementalConsentAndConditionalAccessHelper.BuildAuthenticationProperties(
                    incrementalConsentScopes,
                    msalUiRequiredException,
                    context.HttpContext.User,
                    UserFlow);

                var request = context.HttpContext.Request;
                if (IsAjaxRequest(request))
                {
                    IConfiguration configuration = context.HttpContext.RequestServices.GetRequiredService<IConfiguration>();
                    var applicationOptions = configuration.GetSection("AzureAd").Get<ConfidentialClientApplicationOptions>();
                    var callbackpath = new PathString("/signin-oidc");
                    var loginhint = properties.Parameters["login_hint"].ToString();
                    var currentUri = UriHelper.BuildAbsolute(request.Scheme, request.Host, request.PathBase, callbackpath);
                    var app = ConfidentialClientApplicationBuilder.CreateWithApplicationOptions(applicationOptions).WithRedirectUri(currentUri).Build();
                    var appp = app.GetAuthorizationRequestUrl(incrementalConsentScopes).WithLoginHint(loginhint);
                    var authuri = appp.ExecuteAsync().Result;
                    context.Result = new UnauthorizedObjectResult(new { authurl = authuri.AbsoluteUri });
                }
                else
                    context.Result = new ChallengeResult(properties);        

it does redirect to the authorization endpoint, can scope prompt and everything, but on the call back, I got this error:
Exception: OpenIdConnectAuthenticationHandler: message.State is null or empty.
Unknown location

Exception: An error was encountered while handling the remote login.
Microsoft.AspNetCore.Authentication.RemoteAuthenticationHandler.HandleRequestAsync()