Azure Active Directory B2C'de JavaScript ve sayfa düzeni sürümlerini etkinleştirme

  • Makale

Başlamadan önce, ayarladığınız ilke türünü seçmek için İlke türü seçin seçicisini kullanın. Azure Active Directory B2C, kullanıcıların uygulamalarınızla nasıl etkileşim kurduğunu tanımlamak için iki yöntem sunar: önceden tanımlanmış kullanıcı akışları veya tam olarak yapılandırılabilir özel ilkeler aracılığıyla. Bu makalede gerekli adımlar her yöntem için farklıdır.

Azure Active Directory B2C (Azure AD B2C) HTML şablonlarıyla kullanıcılarınızın kimlik deneyimlerini oluşturabilirsiniz. HTML şablonlarınız yalnızca belirli HTML etiketlerini ve özniteliklerini içerebilir. b, i>, u><, <<h1> ve <sa gibi <temel HTML etiketlerine> izin> verilir. Betik> ve <iframe> gibi <daha gelişmiş etiketler güvenlik nedeniyle kaldırılır, ancak <script> etiket etikete <head> eklenmelidir.

Etiketin <script> etiketine <head> iki şekilde eklenmesi gerekir:

  1. Betiğin defer sayfayı ayrıştırmak için paralel olarak indirildiğini belirten özniteliği eklendikten sonra, sayfa ayrıştırma tamamlandıktan sonra betik yürütülür:

     <script src="my-script.js" defer></script>

  2. Betiğin sayfayı ayrıştırmak için paralel olarak indirildiğini belirten öznitelik eklendiğinde async , betik kullanılabilir olduğu anda yürütülür (ayrıştırma tamamlanmadan önce):

     <script src="my-script.js" async></script>

JavaScript'i etkinleştirmek ve HTML etiketlerini ve özniteliklerini ilerletmek için:

Ön koşullar

Sayfa düzeni sürümü ayarlamaya başlama

JavaScript istemci tarafı kodunu etkinleştirmeyi planlıyorsanız, JavaScript'inizi temel alan öğeler sabit olmalıdır. Sabit değilse, tüm değişiklikler kullanıcı sayfalarınızda beklenmeyen davranışlara neden olabilir. Bu sorunları önlemek için, JavaScript'inizi temel alan içerik tanımlarının sabit olduğundan emin olmak için sayfa düzeni kullanımını zorunlu kılın ve bir sayfa düzeni sürümü belirtin. JavaScript'i etkinleştirmeyi amaçlamasanız bile, sayfalarınız için bir sayfa düzeni sürümü belirtebilirsiniz.

Kullanıcı akışı sayfalarınız için bir sayfa düzeni sürümü belirtmek için:

  1. Azure AD B2C kiracınızda Kullanıcı akışları'yı seçin.
  2. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.
  3. Sayfa düzenleri'ni seçin. Bir Düzen adı seçin ve ardından Sayfa Düzeni Sürümü'ne tıklayın.

Farklı sayfa düzeni sürümleri hakkında bilgi için bkz . Sayfa düzeni sürümü değişiklik günlüğü.

Page layout settings in portal showing page layout version dropdown

Özel ilke sayfalarınız için bir sayfa düzeni sürümü belirtmek için:

  1. Uygulamanızın kullanıcı arabirimi öğeleri için bir sayfa düzeni seçin.
  2. Özel ilkenizdeki tüm içerik tanımları için sayfa sürümüyle bir sayfa contract düzeni sürümü tanımlayın. Değerin biçimi şu sözcüğü contractiçermelidir: urn:com:microsoft:aad:b2c:elements:contract:p age-name:version.

Aşağıdaki örnek, içerik tanımı tanımlayıcılarını ve sayfa sözleşmesiyle ilgili DataUri'yi gösterir:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

JavaScript'i etkinleştirme

Kullanıcı akışı Özellikleri'nde JavaScript'i etkinleştirebilirsiniz. JavaScript'in etkinleştirilmesi, sayfa düzeninin kullanılmasını da zorunlu kılmıştır. Ardından, sonraki bölümde açıklandığı gibi kullanıcı akışı için sayfa düzeni sürümünü ayarlayabilirsiniz.

User flow properties page with Enable JavaScript setting highlighted

ScriptExecution öğesini RelyingParty öğesine ekleyerek betik yürütmeyi etkinleştirirsiniz.

  1. Özel ilke dosyanızı açın. Örneğin, SignUpOrSignin.xml.

  2. RelyingParty öğesine ScriptExecution öğesini ekleyin:

    <RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>
  ...
</RelyingParty>

  3. Dosyayı kaydedin ve karşıya yükleyin.

JavaScript kullanma yönergeleri

JavaScript kullanarak uygulamanızın arabirimini özelleştirirken şu yönergeleri izleyin:

  • Yapma:
    • HTML öğelerine <a> bir tıklama olayı bağlayın.
    • Azure AD B2C koduna veya açıklamalarına bağımlılık alın.
    • Azure AD B2C HTML öğelerinin sırasını veya hiyerarşisini değiştirin. Kullanıcı arabirimi öğelerinin sırasını denetlemek için bir Azure AD B2C ilkesi kullanın.
  • Şu noktaları dikkate alarak herhangi bir RESTful hizmetini çağırabilirsiniz:
    • İstemci tarafı HTTP çağrılarına izin vermek için RESTful hizmeti CORS'nizi ayarlamanız gerekebilir.
    • RESTful hizmetinizin güvenli olduğundan ve yalnızca HTTPS protokolunu kullandığından emin olun.
    • Azure AD B2C uç noktalarını çağırmak için javascript'i doğrudan kullanmayın.
  • JavaScript'inizi ekleyebilir veya dış JavaScript dosyalarına bağlanabilirsiniz. Dış JavaScript dosyası kullanırken göreli URL'yi değil mutlak URL'yi kullandığınızdan emin olun.
  • JavaScript çerçeveleri:
    • Azure AD B2C, jQuery'nin belirli bir sürümünü kullanır. jQuery'nin başka bir sürümünü eklemeyin. Aynı sayfada birden fazla sürümün kullanılması sorunlara neden olur.
    • RequireJS kullanımı desteklenmez.
    • Çoğu JavaScript çerçevesi Azure AD B2C tarafından desteklenmez.
  • Azure AD B2C ayarları, geçerli kullanıcı arabirimi dili gibi nesneleri çağrılarak window.SETTINGSwindow.CONTENT okunabilir. Bu nesnelerin değerini değiştirmeyin.
  • Azure AD B2C hata iletisini özelleştirmek için bir ilkede yerelleştirmeyi kullanın.
  • bir ilke kullanılarak herhangi bir şey elde edilebilirse, genellikle önerilen yoldur.
  • Düğmeleri gizlemek ve kendi kullanıcı arabirimi denetimlerinizde tıklama bağlamaları uygulamak yerine mevcut kullanıcı arabirimi denetimlerimizi kullanmanızı öneririz. Bu yaklaşım, yeni sayfa sözleşmesi yükseltmeleri yayımladığımızda bile kullanıcı deneyiminizin düzgün çalışmaya devam etmesini sağlar.

JavaScript örnekleri

Parolayı gösterme veya gizleme

Müşterilerinize kaydolma başarılarında yardımcı olmak için yaygın bir yol, parola olarak girdiklerini görmelerini sağlamaktır. Bu seçenek, kullanıcıların gerekirse parolalarını kolayca görmelerini ve düzeltmelerini sağlayarak kaydolmalarına yardımcı olur. Parola türünde herhangi bir alan, Parolayı göster etiketine sahip bir onay kutusuna sahiptir. Bu, kullanıcının parolayı düz metin olarak görmesini sağlar. Bu kod parçacığını, kendi kendine onaylanan bir sayfa için kaydolma veya oturum açma şablonunuz içine ekleyin:

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

Kullanım koşulları ekleme

Kullanım Koşulları onay kutusunu eklemek istediğiniz sayfanıza aşağıdaki kodu ekleyin. Bu onay kutusu genellikle yerel hesap kaydolma ve sosyal hesap kayıt sayfalarınızda gereklidir.

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="termsOfUse"]');
    if (!termsOfUseLabel) {
        return;
    }

    // get the label text
    var termsLabelText = termsOfUseLabel.innerHTML;

    // create a new <a> element with the same inner text
    var termsOfUseUrl = 'https://learn.microsoft.com/legal/termsofuse';
    var termsOfUseLink = document.createElement('a');
    termsOfUseLink.setAttribute('href', termsOfUseUrl);
    termsOfUseLink.setAttribute('target', '_blank');
    termsOfUseLink.appendChild(document.createTextNode(termsLabelText));

    // replace the label text with the new element
    termsOfUseLabel.replaceChild(termsOfUseLink, termsOfUseLabel.firstChild);
}

kodunda öğesini kullanım koşulları sözleşmenizin bağlantısıyla değiştirin termsOfUseUrl . Dizininiz için termsOfUse adlı yeni bir kullanıcı özniteliği oluşturun ve kullanıcı özniteliği olarak termsOfUse ekleyin.

Alternatif olarak, JavaScript kullanmadan kendi kendine onaylanan sayfaların altına bir bağlantı ekleyebilirsiniz. Aşağıdaki yerelleştirmeyi kullanın:

<LocalizedResources Id="api.localaccountsignup.en">
  <LocalizedStrings>
    <!-- The following elements will display a link at the bottom of the page. -->
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Terms of use</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">termsOfUseUrl</LocalizedString>
    </LocalizedStrings>
</LocalizedResources>

öğesini kuruluşunuzun gizlilik ilkesine ve kullanım koşullarına bağlantıyla değiştirin termsOfUseUrl .

Sonraki adımlar

Azure Active Directory B2C'de uygulamanızın kullanıcı arabirimini özelleştirme hakkında daha fazla bilgi edinin.