Azure Web 应用程序和函数凭据不起作用

Question

我目前有一个 Wep 应用程序 (ASP.NET Core 2.2)，并且一个 Azure 函数返回 JSON“hi”。没有使用 NodeJS。

我已经使用 B2C 设置了我的 Web 应用程序和功能，当单独访问它们时，它们都提示登录并且工作正常。

更新：如果我访问 Web App，登录然后访问函数 url，它会给出响应“hi”但 Ajax 请求将无法工作，除非我手动访问函数 url 地址通过 Web App 登录后手动操作。

我的问题是我从网络应用程序向函数发出了 Ajax 请求，但它没有传递凭据，并且只有在我同时登录网络应用程序和函数时才有效。

我希望帮助让网络应用程序将其凭据传递给函数，因此我不会收到以下错误：

访问 XMLHttpRequest 在 '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' （重定向自 'https://xxx.azurewebsites.net/api/Test?_=1554029904731') 来自原点 “null”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

 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);
            }
        });
    }

Web 应用的 API 设置

Web 应用程序的设置

Web Api 的设置

Web API 的 B2C 设置

Answer 1

就像提到的 CSharpRocks 一样，身份验证由浏览器根据域传递正确的 cookie 来处理。

但我想在你的情况下，函数和 webapp 有不同的域名，对吧？这就是为什么您需要登录一次函数应用程序，然后它才能工作。

有多种方法可以解决这个问题

1. 将您的 WebApp 和 Function 都放在 Azure Application Gateway 后面，以便您可以通过一个域名访问它们。这样，浏览器会将 cookie 发送到此自定义域的请求中。
2. 在您的 WebApp 上有一个端点，它将充当您的 Function App 的代理。这样，cookie 在初始请求中发送到您的 WebApp，您可以将其转发到 Function App。
3. 我假设您有一个 MVC 应用程序，因此这个应用程序可能不适用于您的场景，但对于使用 JavaScript SPA 以及 WebApp API 和 Functions API 的人，他们可以改为执行Authorization Code Grant Flow 以获得访问权限他们将在对两个 API 的请求中传递的令牌（在 JS 代码中，不是自动传递）。
4. 在 Azure AD 中公开您的 Function API as a new scope，并通过委派权限公开 allow your WebApp to access to this API。