azure - 如何从我自己的自定义域向 b2clogin 域发送 Web 请求？

Question

我正在尝试向 Azure 应用服务(Azure Function)发出 Web 请求，该服务通过 Azure Active Directory 身份验证(使用 B2C 应用程序注册详细信息)进行保护。 Web 请求是通过简单的 JavaScript 调用从 Web 应用程序 (门户) 发出的(我无权访问门户源代码。

Web 应用程序(门户)和 Azure 应用服务(Azure Function)使用 Azure B2C 进行保护，并要求用户使用其 Azure AD B2C 帐户登录。这工作正常。

从门户向 Azure Functions 发出的请求会在浏览器控制台中显示以下错误:

Access to XMLHttpRequest at 'https://XXX.b2clogin.com/XXX.onmicrosoft.com/b2c_1_signupsignin/oauth2/v2.0/authorize?...' (redirected from 'https://YYY.azurewebsites.net/api/MyMethod') from origin 'https://ZZZ.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在新浏览器选项卡中发出的相同 Web 请求成功显示 protected 资源(假设浏览器中存在事件的 B2C session )。

我花了大量时间阅读 Azure B2C documentation ，多次请求 token 等，但都没有解决。

我相信 this answer here 中概述了事情的残酷真相，但是如何以不同的方式构建它来规避这个陷阱？

Currently the .b2clogin.com domain doesn't allow any cross-origin requests from any other domain.

虽然根据此处出现的 CORS 问题，这似乎是正确的，但我如何从我的门户域 (XXX.com) 向我的Azure Function (YYY.azurewebsites.net)，它们均使用我的 B2C 租户/应用程序注册进行保护。

编辑:我知道(根据上面收到的错误)，当从门户进行初始调用时，Azure Function 正在重定向到 B2C 登录页面到Azure函数。

我在下面列出了我当前的设置 - 以前我仅使用 Azure AD 身份验证和通过获取不记名 token 进行访问来保护应用服务。在这种情况下不可能，因为我无权访问用于安全存储私钥/ secret 的 Portal 代码 - 我依赖于 SSO 体验 - 必须在 JavaScript 中进行调用。

应用服务 - 身份验证(Azure 函数)

• 使用 Azure Active Directory 登录
• 客户端 ID:Azure AD B2C 应用程序注册 ID
• 颁发者网址:取 self 的登录/注册用户流程

Azure AD B2C 租户 - 应用注册

• 包括网络应用/网络 API:是
• 允许隐式流:是

调用 Azure Function 的客户端代码

$.ajax({
      type: 'POST',
      url: "https://YYY.azurewebsites.net/api/MyMethod",
      success: function(response) {
        console.log(response);
      },
      error: function(request, status, error) {
        console.log(request.responseText);
      },
    });

对此的一些指导将不胜感激。

Answer 1

我的场景的解决方案是利用 single sign-on with MSAL.js使用impicit flow (由 MSAL 负责)。

具体来说，SSO without MSAL.js login ，因此我不必再次登录即可访问 Azure Function，因为用户已经通过门户登录并拥有事件的 Azure AD B2C session .

相反，我调用 acquireTokenSilent 方法，传入所需的参数来获取可用于访问我的安全 Azure Function 的 Bearer 访问 token 。

此场景的工作示例(SPA 调用 Azure 应用服务)可以在 here 中找到。在 Microsoft 的 GitHub 存储库中。我的设置已完成，我只需使用租户/应用程序的特定详细信息配置示例。