自定义元素和用户界面与AAD B2C自定义政策的排序

Question

即使经过几天的阅读和学习，我仍然不知道如何使用AAD B2C自定义策略来安排登录/注册UI。作为我的起点，我使用SocialAndLocalAccounts的入门包。

我想：

1. 将社交登录移动到电子邮件/密码部分上方。我也许可以用自定义页面css来实现这一点，但我肯定必须用自定义策略对页面内容进行一些控制，或者所有这些都是硬编码的吗？

2. 我只想在注册页面上添加一个条款链接。我不能在自定义页面css中做到这一点，因为它也会出现在组合登录/注册流的登录页面上。我启用了js，这样我就可以用MS文档中暗示的术语的超链接替换文本元素。然而，本例假设您将有一个复选框，但我不希望这样。只有一个带有超链接术语的简单div供用户阅读。我不知道如何在表单中插入一个只会出现在注册页面上的简单文本字段，因为我看不到页面上的元素是如何创建的。它们是否基于索赔进行硬编码？

PS！我读到您不应该编辑TrustFrameworkBase.xml，但为了从表单中删除声明类型，如给定名称、姓氏和显示名称，我找不到其他方法。我可以在TrustFrameworkExtension.xml中添加新内容，但我不能从基础中删除内容，因为这似乎是在合并两者。

Answer 1

对于#1，我最终使用了Jas Suri建议的css。在我的制服.css中，我添加了

.claims-provider-list-buttons, .social {
display: block !important;
}

这将社交登录从表的页脚中删除，因此它最终位于顶部。请注意，在1.2.0版本中(urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0(它是.social，但在2.1.4中它是.sclaims提供者列表按钮，所以我同时针对这两个按钮。

为了在电子邮件登录前增加一点间距，我还添加了：

#localAccountForm {
margin-top: 40px;
}

对于#2，在TrustFrameworkBase.xml中，我添加了一个新的ClaimType:

<ClaimType Id="extension_terms">
<DisplayName>Accept terms, but this will never be shown as hidden by css</DisplayName>
<DataType>boolean</DataType>
<UserInputType>CheckboxMultiSelect</UserInputType>
<Restriction>
<Enumeration Text="" Value="true" SelectByDefault="true" />
</Restriction>
</ClaimType>

将<OutputClaim ClaimTypeReferenceId="extension_terms" />添加到技术配置文件中LocalAccountSignUpWithLogonMail。

在自定义页面的unified.css中，我确保复选框和文本永远不会显示：

#extension_terms_true {
display: none;
}
label[for="extension_terms_true"] {
display: none;
}

然后，我创建了一个新的js文件customitui.js，该文件包含在customituy.html中，如下所示：<script src="https://filmwebidlogintest.blob.core.windows.net/filmwebidloginblob/js/custom-ui.js"></script>这个js文件包含：

function addTermsOfUseLink() {
// find the terms of use label element
var termsOfUseLabel = document.querySelector('#api label[for="extension_terms"]');
if (!termsOfUseLabel) {
return;
}
termsOfUseLabel.innerHTML = 'To use this service you must accept <a href="https://www.yourterms.no" target="_blank">the service terms</a> and <a href="https://www.yourgdpr.no" target="_blank">privacy terms</a>.';
}

$(document).ready(function () {
addTermsOfUseLink();
});

我觉得这很棘手，但它有效，我找不到更好的解决方案。

有关我使用的自定义HTML/CSS的信息，请阅读此MS文档。