angular - 找不到 Azure B2C 自定义 UI、Angular、CSS 文件

标签 angular azure azure-ad-b2c

我使用页面 UI 自定义来进行 Azure Active Directory B2C 登录/注册。 我的 Angular 应用程序中有一个页面,我在 Azure 门户的自定义页面 URI 设置中链接到该页面。该链接的格式为 https://example.com/login-page 。自定义页面如下所示:

<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <link href="styles.bc5a6bca6bc.bundle.css" rel="stylesheet">
</head>
<body>
  ...
  <div id="api"></div>
  ...
  <script type="text/javascript" src="main.b4ca12a354c.bundle.js"></script>
</body>
</html>

注册时,浏览器中会加载以下 URL:

https://login.microsoftonline.com/x.onmicrosoft.com/B2C_1_Sign_Up_or_In/api/CombinedSigninAndSignup/unified?local=signup&csrf_token=x&tx=StateProperties=x&p=B2C_1_Sign_Up_or_In

在浏览器控制台中,我收到以下错误:

GET https://login.microsoftonline.com/x.onmicrosoft.com/B2C_1_Sign_Up_or_In/api/CombinedSigninAndSignup/styles.b3c5ab3ca35abc3a5.bundle.css 404 (Not Found)

我猜问题是由于浏览器转到外部microsoftonline页面,因此找不到相对url的css文件。

我该如何解决这个问题? 我不想将 css 代码直接包含在文档中,因为我不想在多个位置维护大量代码。 css 链接标签是由 Angular 自动插入的,所以我不知道是否可以以某种方式更改为绝对 url,但这可能不好,因为我只想在此登录页面上使用绝对 url,而不是在其他页面上。

最佳答案

您必须对样式文件(例如样式表、图像和字体)使用绝对 URL。

您可以使用 ng build --prod --deploy-url=https://example.com/ 指定部署样式文件的基本 URL。

请注意,目前您无法使用任何脚本文件。

关于angular - 找不到 Azure B2C 自定义 UI、Angular、CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50779862/

相关文章:

java - UserCollectionPage 有一个 API "getCurrentPage()"类型 List<User>,它仅从目录返回 100 个用户

azure - 微软图休息API v1.0 : Access to B2C tenant users

azure-ad-b2c - 发送新代码时 AAD B2C MFA 错误

javascript - 用于单元测试的假文件放置事件

Base64 图像的 Angular2 net::ERR_UNKNOWN_URL_SCHEME

azure - 带有副本的嵌套变量和资源不起作用

Azure 存储帐户防火墙 AnonymousIpAuthorizationError

html - 表 tr 垂直方向。我能怎么做?

typescript - Angular2 http 缺少 .map 函数

azure - 使用Azure管道访问同一项目中的多个azure git存储库