Azure Wep App and Function Credentials Not Working

Question

I currently have a Wep App (ASP.NET Core 2.2) and an Azure Function returns the JSON "hi". No NodeJS is being used.

I have set up both my Web App and Function with B2C and when accessing them individually, they both prompt a login and work fine.

Update: If I access the Web App, login in and then access the function url, it then gives the response "hi" but the Ajax request wont work unless I manually access the function url address manually after login in via the Web App.

My issue is that I have a Ajax request from the web app to the function but it doesn't pass the credentials and only works if I log into both web app and function individually.

I would like help to get the web app to pass on it's credentials to the function so I don't get the following error:

Access to XMLHttpRequest at 'https://xxx.b2clogin.com/xxx.onmicrosoft.com/oauth2/v2.0/authorize?response_type=id_token&redirect_uri=https%3A%2F%2Fxxx.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=5e55f7e5-2b51-4a5f-86c0-b7776b2623b2&scope=openid+profile+email&response_mode=form_post&p=b2c_1_signin&nonce=d138edf541d1423e92b99fe7ca400263_20190331110324&state=redir%3D%252Fapi%252FTest%253F_%253D1554029904731' (redirected from 'https://xxx.azurewebsites.net/api/Test?_=1554029904731') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 function Test2() {
        console.log("2. Sending request...");
        $.ajax({
            type: "GET",
            cache: false,
            credentials: 'include',
            mode: 'cors',
            url: 'https://xxx.azurewebsites.net/api/Test',
            // contentType: "application/json; charset=utf-8",
            //dataType: "application/json",
            //data: dataValue,
           xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (response) {
                console.log('2. Done');
                console.log('2. ' + response);
            },
            failure: function (response) {
                console.log("2. Request: Failed.");
                alert(response.d);
            }
        });
    }

The API settings for the Web App

The settings for the Web App

The settings for the Web Api

B2C Settings for the Web Api

Hi Liam. What Auth is library are you using to authenticate your user? msal.js / adal.js? — Jackson
By the looks of things ADAL as I have "Microsoft.IdentityModel.Clients.ActiveDirectory" package in stalled. I'm not currently referencing msal.js or adal.js in any of the views. — Liam
Jackson: Auth is taken care by the platform (it's cookie based). Like Liam mentioned, individually, it works but if combined, not. There does not seem any way to automatically flow the auth context from the Web app to the Function. — CSharpRocks

PramodValavala-MSFT PramodValavala-MSFT · Accepted Answer · 2019-04-01T14:11:08

Like CSharpRocks mentioned, the authentication is take care of by the browser by passing the right cookie based on the domain.

But I guess in your case, the function and webapp have different domain names right? That is why you need to login in once to the function app and then it works.

There are multiple ways you can tackle this

Put both your WebApp and Function behind an Azure Application Gateway so that you can access them via one domain name. This way the browser will send the cookie in requests going to this custom domain.
Have an endpoint on your WebApp that will act as a proxy to your Function App. This way the cookie is sent in the initial request to your WebApp, which you can forward to the Function App.
I assume you have an MVC Application so this one might not be applicable for your scenario but for people who are using a JavaScript SPA along with a WebApp API and Functions API, they could instead perform an Authorization Code Grant Flow to get an access token which they will pass (in JS code, not automatic) in their requests to both the APIs.
Expose your Function API as a new scope in Azure AD and allow your WebApp to access to this API via delegated permissions.

Azure Wep App and Function Credentials Not Working

1 Answers