如何在应用服务中使用授权代码流 PKCE 部署与 AD B2C 集成的 Angular 14 应用程序？

Question

我正在尝试在 Azure App Service 中部署一个 Angular 应用程序，该应用程序将 AD B2C 与用户流 (signupsignin1) 和授权代码流 PKCE 集成在一起，这就是我所做的：

1. 对于 B2C 和 Angular 应用程序的所有配置，我使用了此链接：https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-应用

• 我将代码移至 Angular 14 并使用按钮登录创建了一个主页组件。

重定向网址：http://localhost:4200/home

它工作正常。

-在 App Service 中部署的配置-

1. 应用服务

堆栈节点 v16 所以：Windows

创建...

然后我复制了URL => https://name-app.azurewebsites.net

2. 角

一个。我添加了 web.config 并配置了 angular.json

web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

Angular.json

 "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web.config"
            ],

b。 msalConfig 我添加了新的重定向 URL：

const msalConfig: Configuration = {
  auth: {
    clientId: <clientId>,
    authority: b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: 'https://name-app.azurewebsites.net/home',
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
    storeAuthStateInCookie: isIE,
  },
  system: {
    loggerOptions: {
      loggerCallback(logLevel: LogLevel, message: string) {
      },
      logLevel: LogLevel.Verbose,
      piiLoggingEnabled: false
    }
  }
}

3. 在 Angular 的应用程序注册中添加新的重定向 URI：

单页应用：

新网址：https://name-app.azurewebsites.net/home

4. 构建 Angular.

一个。 ng b

5. 在 VS 中安装扩展 Azure App Service。

6. 部署 dist 文件夹。

7. 在门户 Azure 中转到应用程序服务 -> 配置 -> 路径映射/虚拟应用程序和目录/虚拟路径： 编辑：站点\wwwroot ame-project-angular 保存。

8. 启动应用程序服务。

9. 转到网址。

现在问题来了，它加载主页但是当我点击登录时抛出这些错误：

一个。在页面中：您要查找的资源已被移除、更名或暂时不可用。

b。控制台：GET https://name-app.azurewebsites.net/home，HTTP 404“未找到”。

c。 https://test-deploy-angular.azurewebsites.net/favicon.ico，HTTP 404“未找到”

警告：

d。 Cookie“ARRAffinity”没有正确的“SameSite”属性值。很快，没有“SameSite”属性或具有无效值的 cookie 将被视为“Lax”。这意味着 cookie 将不再在第三方环境中发送。如果您的应用程序依赖于此 cookie 在此类情况下可用，请向其添加“SameSite=None“属性。了解更多关于“SameSite“属性的信息。

e。此页面处于怪癖模式。页面布局可能会受到影响。对于标准模式，使用“”。

10.

msalconfig 或注册应用程序中的重定向 URL 是否不正确？

web.config 是不是不对？

我不知道出了什么问题。我搜索了有关此的信息，但没有找到任何相关信息。

问候， 路易斯·卡塞雷斯。

Answer 1

我有同样的问题。在我的角度应用程序中，我有 angular-oauth2-oidc 来完成这项工作。在我的 windows web 应用程序上，来自 b2c 身份服务器的重定向 url 似乎没有被 web.config 规则识别。

这是来自 b2c 的重定向的样子，它具有状态和代码查询参数

https://app.mydomain.app/login?state=bndISFh3dUhBQnQ4c0t4UDd-VWpORllIdkNacUVqZWYzQVVHVThZN3U4M2NZ&code=eyJraWQiOiJjcGltY29yZV8wOTI1MjAxNSIsInZlciI6IjEuMCIsInppcCI6IkRlZmxhdGUiLCJzZXIiOiIxLjAifQ..vkz_lJdd0_sk9VCC.foaUbqoT9le1EqAf5f1ugIx3gDZiPGxELQGvn4RuiawRZsORGrDq2tTh3XdoDjK2xdMT_ExirXYBS8scMm-B13Xe4AnesSn7I28LLx1nTrC_DkaIV0ZNbl12EdO56C1kVB3eTv-zL7Yjtv6JFitFXHI3LtdR3XudbGdTXgpXMZZsV9mEgcBw9EfYhPJfAZ6blIx7KE-dztHb30ubl8DHuFNB1x7kUo_UmAXZWSnL_5mpXofaQLY5al-NtupWt4H0DfQkFBrj1UWxJojg5of7xADr24PynXC35WnYhVufKccJJPW09wlDYb_c8UOqBPxVhSeYGXarBbfT8EDSyYD8F8rLKjyEHem4RMz-UE_BIwQCwS6cqZ4pi2ufgojD5kiXCYN6qTu4Cl0Wgig0CC9tlpl-m92wAZ_jaOD4o5oEXPV9UX5UmawfWeaS16GZwaYS4k0LR67j-5ikSKqPMuNbz27tJtiZOBPYjLtLRgUfMmgPh8fpyrCPYvQrieFVTb9_IdJA_ywvXIWU2KCi56hAMD158otGKiOtCMEGVCDHzrA3Y5-eydtJHmjOgC7H6tkbqHRFdha57-ASzpEKV_xa5Py8ZNXTRSDE00XjRtfmoUIk3s0r2HWvJvQgSR5_D74LNDztY9owpbfW4-V5JgaXumUXn3MNG1xJ_KaGCacWhv1hS_9vCnotj1RGEjalDRrUPVBQy9V2596maE1hDoVQPT1kHjCw0HclxqP1wqOS9_cI_Eh0qtnpP3gKZEdXZi9H2cbhDXf_BwHoRNsLoiDGKKyOi25bHUjAGgSmiWKEF-nvlH_VRuCG_AtCFyxvwe05ZPetLPtlRWvIt8fza35geLKO77RcCmyAvyjdQspRv_5g4U9QHZYqil90x-ZhpKFLgCnUOJRhi8n332-9IPG-_p7JeTRMYPlEgn4_IdKuDSDgqr1D8eMVu7BAf7U2r5eDHgZi7LLNFPScgZJCagEYmC9lrfqhgnJqzOSrzznbnkdRbUPezSRaKhu02nKxl5Rx3LsXb2KWvoAVafKmrzZrOCLQBxIGrpwPmT8uvM-UBSuBuQlyHbnZ4LpqgdtatFUt8rq2eCWmRplIbIWZuUdQsfLEVarTmQZQRTt_cgCdKeh6TvTZJ4zIkwd0B5hYRkI67cjExfkMgG6KysiqZqjuvzRLFBoapQ4AmBC4GMmM6gxZYbFtxT5gsn3SOcPeXUImL7rAc9Ip8kIVhM81jf5i2Ohj_um-6PUzHOwbKWcon4IgsBonW32bjdZPLvot3QWSN0wpM8C0ME6IpxsLYd7BztzQMNHTDAPYxKmzDhpzcAufEfmt0ppfyKNPFmYA4wW0DrtGNZWUmdzOSolKfNYIJMwDChSXmeHuItaP0ACy_Vg3rcslrDZ__GsbM5ViPQ057AkIDmydomain-4o8Z-6Lq1r8N2BQ6ORYnTiGnIZE69q2V85rZmwP_MdzHU6mg_h40w5xTPr99u6Uh8-yc1YfXhm-B6tKw1JOhD_vnwWk1CSs2WhQnE08e6ERY4D-v07R7U8VYSQm_TSPGyiXvPFjIU8jXcospvVBu1ayXwBQ6lySzF2lIlsdjal1RbVx5uXzaZqIuLrFlGldk5q5NsNhmwCuUK11CmBCB6f9tvibhJlOE_QjKJE3ES4BAO8FA9y-1hDIbvWsUxr8RAn-wpUo-lefhH1OKuH9fGtv5pLvXIa56YbTwERw_i1SES-OTgq2y6oISjekA_UycxLcN-2D_hgi4Xs8RVn_VxwmeAZgfRcq0XcOF3JGlTPqWx9xaoQdrACnxndq3lagQngBa5muaPeaL6UOzHAopcZxznXSwHgxWSdntbgmNAQIkc4P6by9YdOCjIfTeXcRoNXFN_gPYUMZMHoDD9f0TF-CaGYrJznIc6YnNlZKCGy2vOVM9UemPlMwEl8nExEw2jomnVWgukVzQxndbpNn3O7i-UmxymqoSxoyI5MFfk8noIpguedhhVKdp71R2HbTONkJ9gAezg3rGGuGp80voPuQMyUhviNHXhP3leKfMNOQpHHogrM_j2_Rqwsr3rGUvVw3AKTO4CVeN0Cla4FgpE4wxs6DaelASXazvjghAvB0Hnzjok48mCrIl-3csCXuoQ8IYsCWizxvk-vHyLC9FhKoR_rmGPF6gXtvLCOhA.Br9UYiVEew_1vq5zqJT2EQ

Answer 2

如果您的 web.config 无法处理请求，您将在页面上收到此错误：您正在寻找的资源已被删除、名称已更改或暂时不可用。

发生这种情况的原因有很多，但在您的情况下，可能是来自 b2c 重定向的代码参数对于默认限制来说太大了。如果是这种情况，解决方案将 maxQueryString 设置为高于 web.config 中的默认值。

看起来像：

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxQueryString="8192" />
      </requestFiltering>
    </security>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
  <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>
</system.webServer>
</configuration>

Answer 3

为了使这里的社区受益，请从问答线程发布我们的讨论/解决方案。

原因：应用程序的 web.config 文件中的错误配置导致“登录”后重定向错误。

解决方案：更改 web.config 文件中的以下行，使其重定向到 “/index.html” 而不是 “/”：

<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

感谢您对此的合作，路易斯。