javascript - Azure Web 应用程序和功能凭据不起作用

Question

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

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

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

我的问题是，我有一个从 Web 应用程序到该函数的 Ajax 请求，但它不会传递凭据，并且只有在我分别登录 Web 应用程序和函数时才有效。

我需要帮助让网络应用程序将其凭据传递给函数，这样我就不会收到以下错误:

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

Web 应用程序的 API 设置

Web 应用程序的设置

Web Api 的设置

Web Api 的 B2C 设置

Answer 1

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

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

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

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