Блог

Даже после нескольких дней чтения и прохождения нескольких учебных пособий я все еще не могу понять, как использовать пользовательские политики AAD B2C для организации пользовательского интерфейса входа / регистрации. В качестве отправной точки я использую стартовый пакет для социальных и локальных счетов.

Я бы хотел:

1. Переместите учетные записи в социальных сетях над разделом «Электронная почта/пароль». Возможно, я мог бы добиться этого с помощью пользовательского css страницы, но, конечно, я должен иметь некоторый контроль над содержимым страницы с помощью пользовательских политик, или все это жестко задано так, как оно представлено?
2. Я хочу добавить ссылку на условия только на странице регистрации. Этого я не могу сделать в css пользовательской страницы, потому что тогда она также появляется на странице входа в объединенный поток входа/регистрации. Я включил js, чтобы я мог заменить текстовый элемент гиперссылкой на термины, как указано в документах MS. Однако в этом примере предполагается, что у вас будет флажок, но я этого не хочу. Только простой div с условиями по гиперссылкам, которые пользователь может прочитать. Я не могу понять, как вставить простое текстовое поле в форму, которая будет отображаться только на странице регистрации, потому что я не вижу, как создаются элементы на страницах. Являются ли они жестко закодированными на основе утверждений?

ПС! Я читал, что вы не должны редактировать TrustFrameworkBase.xml, но для того, чтобы удалить типы утверждений из формы, такие как имя, фамилия и отображаемое имя, я не могу найти другого способа. Я могу добавить новые вещи в TrustFrameworkExtensions.xml, но я не могу удалить вещи из базы, так как это, кажется, объединяет их.

Для #1 я в конечном итоге использовал css, как предложил Джас Сури. В моем unified.css я добавил

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

Это удаляет социальные логины из нижнего колонтитула таблицы, и, таким образом, она оказывается сверху. Обратите внимание, что в версии 1.2.0 (u rn:com:microsoft:aad:b2c:элементы:контракт:выбор поставщиков:1.2.0) это .социальный, но в 2.1.4 это .кнопки списка поставщиков претензий — поэтому я нацелен на оба.

Для немного большего интервала перед входом в систему электронной почты я также добавил:

 #localAccountForm {
    margin-top: 40px;
}
 

Для №2, в TrustFrameworkBase.xml Я добавил новый тип утверждения:

 <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" /> в технический файл
LocalAccountSignUpWithLogonEmail.

В unified.css пользовательских страниц я удостоверяюсь, что флажок и текст никогда не отображаются:

 #extension_terms_true {
    display: none;
}

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

Затем я создаю новый файл js custom-ui.js включено в custom-ui.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.