Azure Active Directory B2C'de kullanıcı arabirimini HTML şablonlarıyla özelleş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'nin (Azure AD B2C) müşterilerinize gösterdiği kullanıcı arabirimini markalama ve özelleştirme, uygulamanızda sorunsuz bir kullanıcı deneyimi sağlamaya yardımcı olur. Bu deneyimler arasında kaydolma, oturum açma, profil düzenleme ve parola sıfırlama sayılabilir. Bu makalede kullanıcı arabirimi (UI) özelleştirme yöntemleri tanıtılıyor.

Bahşiş

Kullanıcı akışı sayfalarınızın yalnızca başlık logosunu, arka plan resmini ve arka plan rengini değiştirmek istiyorsanız, Şirket markası özelliğini deneyebilirsiniz.

Özel HTML ve CSS'ye genel bakış

Azure AD B2C, Çıkış Noktaları Arası Kaynak Paylaşımı'nı (CORS) kullanarak müşterinizin tarayıcısında kod çalıştırır. Çalışma zamanında içerik, kullanıcı akışınızda veya özel ilkenizde belirttiğiniz bir URL'den yüklenir. Kullanıcı deneyimindeki her sayfa, içeriğini bu sayfa için belirttiğiniz URL'den yükler. URL'nizden içerik yüklendikten sonra, Azure AD B2C tarafından eklenen bir HTML parçasıyla birleştirilir ve sayfa müşterinize görüntülenir.

Custom page content margin

Özel HTML sayfası içeriği

Özel sayfa içeriğinizi sunmak için kendi markanızla bir HTML sayfası oluşturun. Bu sayfa statik *.html bir sayfa veya .NET, Node.js veya PHP gibi dinamik bir sayfa olabilir, ancak Azure B2C hiçbir görünüm motorlarını desteklemez. Dinamik sayfanın sunucu tarafı tüm işlemeleri ayrılmış bir web uygulaması tarafından gerçekleştirilmelidir.

Özel sayfa içeriğiniz CSS ve JavaScript dahil olmak üzere herhangi bir HTML öğesi içerebilir, ancak iframe'ler gibi güvenli olmayan öğeler içeremez. Gereken tek öğe, HTML sayfanızdaki bu <div id="api"></div> öğe gibi olarak ayarlanmış apibir div öğesidirid.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

Varsayılan Azure AD B2C sayfalarını özelleştirme

Özel sayfa içeriğinizi sıfırdan oluşturmak yerine Azure AD B2C'nin varsayılan sayfa içeriğini özelleştirebilirsiniz.

Aşağıdaki tabloda, Azure AD B2C tarafından sağlanan varsayılan sayfa içeriği listelanmaktadır. Dosyaları indirin ve kendi özel sayfalarınızı oluşturmak için başlangıç noktası olarak kullanın. Örnek şablonları nasıl indirebileceğinizi ve kullanabileceğinizi öğrenmek için bkz. Örnek şablonlar.

Sayfa Tanım Şablonlar
Birleşik kaydolma veya oturum açma Bu sayfa, kullanıcı kaydolma ve oturum açma işlemini işler. Kullanıcılar kurumsal kimlik sağlayıcılarını, Facebook, Microsoft hesabı veya yerel hesaplar gibi sosyal kimlik sağlayıcılarını kullanabilir. Klasik, Okyanus Mavisi ve Kayrak Grisi.
Oturum açma (yalnızca) Oturum açma sayfası, Kimlik sağlayıcısı seçimi olarak da bilinir. Yerel hesapla veya federasyon kimlik sağlayıcılarıyla kullanıcı oturum açma işlemlerini gerçekleştirir. Kaydolma olanağı olmadan oturum açmaya izin vermek için bu sayfayı kullanın. Örneğin, kullanıcının profilini düzenleyebilmesi için önce. Klasik, Okyanus Mavisi ve Kayrak Grisi.
Kendi Kendine Onaylanan Azure AD B2C'de kullanıcının giriş sağlaması beklenen etkileşimlerin çoğu kendi kendine onaylanır. Örneğin, bir kaydolma sayfası, oturum açma sayfası veya parola sıfırlama sayfası. Bu şablonu sosyal hesap kayıt sayfası, yerel hesap kaydolma sayfası, yerel hesap oturum açma sayfası, parola sıfırlama, profili düzenle, blok sayfası ve daha fazlası için özel bir sayfa içeriği olarak kullanın. Kendi kendine onaylanan sayfa, metin giriş kutusu, parola giriş kutusu, radyo düğmesi, tek seçimli açılan kutular ve çoklu seçim onay kutuları gibi çeşitli giriş denetimleri içerebilir. Klasik, Okyanus Mavisi ve Kayrak Grisi.
Çok faktörlü kimlik doğrulaması Bu sayfada, kullanıcılar kaydolma veya oturum açma sırasında telefon numaralarını (metin veya ses kullanarak) doğrulayabilir. Klasik, Okyanus Mavisi ve Kayrak Grisi.
Hata Bir özel durum veya hatayla karşılaşıldığında bu sayfa görüntülenir. Klasik, Okyanus Mavisi ve Kayrak Grisi.

Sayfa içeriğini barındırma

Kullanıcı arabirimini özelleştirmek için kendi HTML ve CSS dosyalarınızı kullanırken, kullanıcı arabirimi içeriğinizi CORS'yi destekleyen genel kullanıma açık herhangi bir HTTPS uç noktasında barındırın. Örneğin Azure Blob depolama, Azure Uygulaması Hizmetleri, web sunucuları, CDN'ler, AWS S3 veya dosya paylaşım sistemleri.

Özel sayfa içeriğini kullanma yönergeleri

  • HTML dosyanıza medya, CSS ve JavaScript dosyaları gibi dış kaynaklar eklerken mutlak bir URL kullanın.

  • Sayfa düzeni sürüm 1.2.0 ve üzerini data-preload="true" kullanarak, CSS ve JavaScript'in yük sırasını denetlemek için HTML etiketlerinize özniteliğini ekleyebilirsiniz. ile data-preload="true", sayfa kullanıcıya gösterilmeden önce oluşturulur. Bu öznitelik, kullanıcıya stilsiz HTML gösterilmeden CSS dosyasını önceden yükleyerek sayfanın "titremesini" önlemeye yardımcı olur. Aşağıdaki HTML kod parçacığında etiketin kullanımı gösterilmektedir data-preload .

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • Varsayılan sayfa içeriğiyle başlamanızı ve bunun üzerine derlemenizi öneririz.

  • Özel içeriğinize JavaScript ekleyebilirsiniz.

  • Desteklenen tarayıcı sürümleri şunlardır:

    • Internet Explorer 11, 10 ve Microsoft Edge
    • Internet Explorer 9 ve 8 için sınırlı destek
    • Google Chrome 42.0 ve üzeri
    • Mozilla Firefox 38.0 ve üzeri
    • iOS ve macOS için Safari, sürüm 12 ve üzeri

  • Güvenlik kısıtlamaları nedeniyle Azure AD B2C , iframeveya form HTML öğelerini desteklemezframe.

İçeriği yerelleştirme

Azure AD B2C kiracınızda dil özelleştirmesini etkinleştirerek HTML içeriğinizi yerelleştirirsiniz. Bu özelliğin etkinleştirilmesi, Azure AD B2C'nin HTML sayfa dili özniteliğini ayarlamasına ve OpenID Bağlan parametresini ui_locales uç noktanıza geçirmesine olanak tanır.

Tek şablonlu yaklaşım

Sayfa yükleme sırasında Azure AD B2C, HTML sayfa dili özniteliğini geçerli dille ayarlar. Örneğin, <html lang="en">. Geçerli dile göre farklı stilleri işlemek için CSS tanımınızla birlikte CSS :lang seçicisini kullanın.

Aşağıdaki örnek aşağıdaki sınıfları tanımlar:

  • imprint-en - Geçerli dil İngilizce olduğunda kullanılır.
  • imprint-de - Geçerli dil Almanca olduğunda kullanılır.
  • imprint - Geçerli dil İngilizce veya Almanca olmadığında kullanılan varsayılan sınıf.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

Aşağıdaki HTML öğeleri sayfa diline göre gösterilir veya gizlenir:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Çok şablonlu yaklaşım

Dil özelleştirme özelliği, Azure AD B2C'nin OpenID Bağlan parametresini ui_locales uç noktanıza geçirmesine olanak tanır. İçerik sunucunuz dile özgü HTML sayfaları sağlamak için bu parametreyi kullanabilir.

Dekont

Azure AD B2C, gibi ui_localesOpenID Bağlan parametrelerini özel durum sayfalarına geçirmez.

İçerik, kullanılan yerel ayara göre farklı yerlerden çekilebilir. CORS özellikli uç noktanızda, belirli diller için içerik barındırmak için bir klasör yapısı ayarlarsınız. joker karakter değerini {Culture:RFC5646}kullanırsanız doğru olanı çağırırsınız.

Örneğin, özel sayfa URI'niz şöyle görünebilir:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

İçeriği çekerek sayfayı Fransızca yükleyebilirsiniz:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Özel sayfa içeriği kılavuzu

İşlemle ilgili genel bir bakış aşağıdadır:

  1. Özel sayfa içeriğinizi (genel olarak erişilebilir, CORS özellikli bir HTTPS uç noktası) barındıracak bir konum hazırlayın.
  2. Varsayılan sayfa içerik dosyasını indirin ve özelleştirin, örneğin unified.html.
  3. Genel kullanıma açık HTTPS uç noktanız için özel sayfa içeriğinizi yayımlayın.
  4. Web uygulamanız için çıkış noktaları arası kaynak paylaşımını (CORS) ayarlayın.
  5. İlkenizi özel ilke içerik URI'nize yöneltin.

Ön koşullar

1. HTML içeriğinizi oluşturma

Ürününüzün marka adı başlıkta olacak şekilde özel bir sayfa içeriği oluşturun.

  1. Aşağıdaki HTML parçacığını kopyalayın. Gövde> etiketlerinin içinde <div id="api"></div> adlı <boş bir öğeyle iyi biçimlendirilmiş HTML5'tir. Bu öğe, Azure AD B2C içeriğinin nereye eklendiğini gösterir.

    <!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

  2. Kopyalanan kod parçacığını bir metin düzenleyicisine yapıştırma

  3. Azure AD B2C'nin sayfanıza ekleyen kullanıcı arabirimi öğelerini stil haline getirmek için CSS'yi kullanın. Aşağıdaki örnekte, kaydolmaya eklenen HTML öğelerinin ayarlarını da içeren basit bir CSS dosyası gösterilmektedir:

    h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

  4. Dosyayı customize-ui.html olarak kaydedin.

Dekont

login.microsoftonline.com kullanırsanız, güvenlik kısıtlamaları nedeniyle HTML form öğeleri kaldırılır. Özel HTML içeriğinizde HTML form öğelerini kullanmak istiyorsanız b2clogin.com kullanın.

2. Azure Blob depolama hesabı oluşturma

Bu makalede, içeriğimizi barındırmak için Azure Blob depolamayı kullanacağız. İçeriğinizi bir web sunucusunda barındırmayı seçebilirsiniz, ancak web sunucunuzda CORS'yi etkinleştirmeniz gerekir.

Dekont

Azure AD B2C kiracısında Blob depolama sağlayamazsınız. Bu kaynağı Microsoft Entra kiracınızda oluşturmanız gerekir.

HTML içeriğinizi Blob depolamada barındırmak için aşağıdaki adımları kullanın:

  1. Azure Portal oturum açın.
  2. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden Microsoft Entra Id kiracınıza geçmek için üstteki menüden Ayarlar simgesini seçin.
  3. Azure portalında Depolama hesapları arayın ve seçin
  4. +Oluştur'u seçin.
  5. Depolama hesabınız için bir Abonelik seçin.
  6. Bir Kaynak grubu oluşturun veya var olan bir grubu seçin.
  7. Depolama hesabınız için benzersiz bir Depolama hesabı adı girin.
  8. Depolama hesabınız için coğrafi Bölgeyi seçin.
  9. Performans Standart olarak kalabilir.
  10. Yedeklilik Coğrafi olarak yedekli depolama (GRS) olarak kalabilir
  11. Gözden geçir + oluştur'u seçin ve Microsoft Entra Id'nin doğrulamayı çalıştırması için birkaç saniye bekleyin.
  12. Depolama hesabını oluşturmak için Oluştur’u seçin. Dağıtım tamamlandıktan sonra depolama hesabı sayfası otomatik olarak açılır veya Kaynağa git'i seçmeniz gerekir.

2.1 Kapsayıcı oluşturma

Blob depolamada genel kapsayıcı oluşturmak için aşağıdaki adımları gerçekleştirin:

  1. Sol taraftaki menüde Veri depolama'nın altında Kapsayıcılar'ı seçin.
  2. + Kapsayıcı'yı seçin.
  3. Ad alanına root yazın. Ad, seçtiğiniz bir ad (örneğin contoso) olabilir, ancak basitlik için bu örnekte kök kullanırız.
  4. Genel erişim düzeyi için Blob'ı seçin. Blob seçeneğini belirleyerek, bu kapsayıcı için anonim bir genel salt okunur erişime izin verirsiniz.
  5. Kapsayıcıyı oluşturmak için Oluştur’u seçin.
  6. Yeni kapsayıcıyı açmak için kök seçeneğini belirleyin.

2.2 Özel sayfa içerik dosyalarınızı karşıya yükleme

  1. Yükle'yi seçin.
  2. Dosya seç'in yanındaki klasör simgesini seçin.
  3. Sayfa kullanıcı arabirimi özelleştirme bölümünde daha önce oluşturduğunuz customize-ui.html dosyasına gidin ve bunu seçin.
  4. Bir alt klasöre yüklemek istiyorsanız Gelişmiş'i genişletin ve Klasöre yükle alanına bir klasör adı girin.
  5. Yükle'yi seçin.
  6. Karşıya yüklediğiniz customize-ui.html blobunu seçin.
  7. URL metin kutusunun sağındaki Panoya kopyala simgesini seçerek URL'yi panonuza kopyalayın.
  8. Web tarayıcısında, yüklediğiniz bloba erişilebildiğini doğrulamak için kopyaladığınız URL'ye gidin. Erişilemezse, örneğin bir ResourceNotFound hatayla karşılaşırsanız kapsayıcı erişim türünün blob olarak ayarlandığından emin olun.

3. CORS'yi yapılandırma

Aşağıdaki adımları gerçekleştirerek Çıkış Noktaları Arası Kaynak Paylaşımı için Blob depolamayı yapılandırın:

  1. Depolama hesabınıza gidin.
  2. Sol taraftaki menüde, Ayarlar altında Kaynak paylaşımı (CORS) öğesini seçin.
  3. İzin verilen çıkış noktaları için girinhttps://your-tenant-name.b2clogin.com. değerini Azure AD B2C kiracınızın adıyla değiştirin your-tenant-name . Örneğin, https://fabrikam.b2clogin.com. Kiracı adınızı girerken tüm küçük harfleri kullanın.
  4. İzin Verilen Yöntemler için hem hem OPTIONSde GET öğesini seçin.
  5. İzin Verilen Üst Bilgiler için yıldız işareti (*) girin.
  6. Kullanıma Sunulan Üst Bilgiler için yıldız işareti (*) girin.
  7. En fazla yaş için 200 girin.
  8. Sayfanın üst kısmında Kaydet'i seçin.

3.1 TEST CORS

Aşağıdaki adımları gerçekleştirerek hazır olduğunuzu doğrulayın:

  1. CORS yapılandırma adımını yineleyin. İzin verilen çıkış noktaları içinhttps://www.test-cors.org
  2. www.test-cors.org
  3. Uzak URL kutusu için HTML dosyanızın URL'sini yapıştırın. Örneğin https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. İstek Gönder'i seçin. Sonuç olmalıdır XHR status: 200. Hata alırsanız CORS ayarlarınızın doğru olduğundan emin olun. Ayrıca Ctrl+Shift+P tuşlarına basarak tarayıcı önbelleğinizi temizlemeniz veya özel bir gözatma oturumu açmanız gerekebilir.

Azure depolama hesaplarını oluşturma ve yönetme hakkında daha fazla bilgi edinin.

4. Kullanıcı akışını güncelleştirme

  1. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden Azure AD B2C kiracınıza geçmek için üstteki menüden Ayarlar simgesini seçin.
  2. Azure portalında Azure AD B2C'yi arayın ve seçin.
  3. Sol taraftaki menüde Kullanıcı akışları'nı ve ardından B2C_1_signupsignin1 kullanıcı akışını seçin.
  4. Sayfa düzenleri'ni seçin ve birleşik kaydolma veya oturum açma sayfası altında, Özel sayfa içeriği kullan için Evet'i seçin.
  5. Özel sayfa URI'sinde, daha önce kaydettiğiniz custom-ui.html dosyasının URI'sini girin.
  6. Sayfanın üst kısmında Kaydet'i seçin.

5. Kullanıcı akışını test edin

  1. Azure AD B2C kiracınızda Kullanıcı akışları'nıve B2C_1_signupsignin1 kullanıcı akışını seçin.
  2. Sayfanın üst kısmında Kullanıcı akışını çalıştır'ı seçin.
  3. Sağ taraftaki bölmede Kullanıcı akışını çalıştır düğmesini seçin.

Oluşturduğunuz CSS dosyasını temel alan öğelerin ortalandığı aşağıdaki örneğe benzer bir sayfa görmeniz gerekir:

Web browser showing sign up or sign in page with custom UI elements

4. Uzantılar dosyasını değiştirme

Kullanıcı arabirimi özelleştirmesini yapılandırmak için ContentDefinition ve alt öğelerini temel dosyadan uzantı dosyasına kopyalayın:

  1. İlkenizin temel dosyasını açın. Örneğin, SocialAndLocalAccounts/TrustFrameworkBase.xml. Bu temel dosya, özel ilke başlangıç paketindeki ilke dosyalarından biridir. Bu dosya, özel ilkeleri kullanmaya başlama önkoşulunda edinmiş olmanız gerekir.

  2. ContentDefinitions öğesinin tüm içeriğini arayın ve kopyalayın.

  3. Uzantı dosyasını açın. Örneğin, TrustFrameworkExtensions.xml. BuildingBlocks öğesini arayın. Öğesi yoksa ekleyin.

  4. BuildingBlocks öğesinin alt öğesi olarak kopyaladığınız ContentDefinitions öğesinin tüm içeriğini yapıştırın.

  5. Kopyaladığınız XML'de bulunan Id="api.signuporsignin" ContentDefinition öğesini arayın.

  6. LoadUri değerini depolama alanına yüklediğiniz HTML dosyasının URL'si olarak değiştirin. Örneğin, https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    Özel ilkeniz aşağıdaki kod parçacığı gibi görünmelidir:

    <BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

  7. Uzantılar dosyasını kaydedin.

5. Güncelleştirilmiş özel ilkenizi karşıya yükleme ve test edin

5.1 Özel ilkeyi karşıya yükleme

  1. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden Azure AD B2C kiracınıza geçmek için üstteki menüden Ayarlar simgesini seçin.
  2. Azure AD B2C'yi arayıp seçin.
  3. İlkeler'in altında Kimlik Deneyimi Çerçevesi'ne tıklayın.
  4. Özel ilkeyi karşıya yükle'yi seçin.
  5. Daha önce değiştirdiğiniz uzantılar dosyasını karşıya yükleyin.

5.2 Şimdi çalıştır'ı kullanarak özel ilkeyi test edin

  1. Karşıya yüklediğiniz ilkeyi seçin ve ardından Şimdi çalıştır'ı seçin.
  2. Bir e-posta adresi kullanarak kaydolabilmeniz gerekir.

Dinamik özel sayfa içeriği URI'lerini yapılandırma

Azure AD B2C özel ilkelerini kullanarak URL yolunda bir parametre veya sorgu dizesi gönderebilirsiniz. Parametreyi HTML uç noktanıza ileterek sayfa içeriğini dinamik olarak değiştirebilirsiniz. Örneğin web veya mobil uygulamanızdan ilettiğiniz bir parametreye göre Azure AD B2C kaydolma veya oturum açma sayfanızdaki arka plan görüntüsünü değiştirebilirsiniz. parametresi, uygulama kimliği, dil kimliği veya gibi campaignIdözel sorgu dizesi parametresi gibi herhangi bir talep çözümleyicisi olabilir.

Sorgu dizesi parametreleri gönderiliyor

Sorgu dizesi parametrelerini göndermek için bağlı olan taraf ilkesine aşağıda gösterildiği gibi bir ContentDefinitionParameters öğe ekleyin.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

İçerik tanımınızda değerini LoadUri olarak https://<app_name>.azurewebsites.net/home/unifieddeğiştirin. Özel ilkeniz ContentDefinition aşağıdaki kod parçacığı gibi görünmelidir:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C sayfayı yüklediğinde web sunucusu uç noktanıza bir çağrı yapar:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=f893d6d3-3b6d-480d-a330-1707bf80ebea

Dinamik sayfa içeriği URI'si

İçerik, kullanılan parametrelere göre farklı yerlerden çekilebilir. CORS özellikli uç noktanızda, içeriği barındırmak için bir klasör yapısı ayarlayın. Örneğin, içeriği aşağıdaki yapıda düzenleyebilirsiniz. Dil başına kök klasör/klasör/html dosyalarınız. Örneğin, özel sayfa URI'niz şöyle görünebilir:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C, fr dil için Fransızca için iki harfli ISO kodu gönderir:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Örnek şablonlar

Kullanıcı arabirimi özelleştirmesi için örnek şablonları burada bulabilirsiniz:

git clone https://github.com/azure-ad-b2c/html-templates

Bu proje aşağıdaki şablonları içerir:

Örneği kullanmak için:

  1. Yerel makinenizdeki depoyu kopyalayın. Bir şablon klasörü /AzureBlueseçin, /MSAveya /classic.

  2. Şablon klasörünün ve /src klasörün altındaki tüm dosyaları önceki bölümlerde açıklandığı gibi Blob depolamaya yükleyin.

  3. Ardından, şablon klasöründeki her \*.html dosyayı açın. Ardından tüm URL örneklerini https://login.microsoftonline.com 2. adımda karşıya yüklediğiniz URL ile değiştirin. Örneğin:

    Gönderen:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF

    Hedef:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF

  4. \*.html Dosyaları kaydedin ve Blob depolamaya yükleyin.

  5. Şimdi, daha önce belirtildiği gibi HTML dosyanıza işaret eden ilkeyi değiştirin.

  6. Eksik yazı tipleri, resimler veya CSS görürseniz uzantılar ilkesinde ve \*.html dosyalarda başvurularınızı denetleyin.

Şirket marka varlıklarını özel HTML'de kullanma

Şirket marka varlıklarını özel bir HTML'de kullanmak için aşağıdaki etiketleri etiketin <div id="api"> dışına ekleyin. Görüntü kaynağı, arka plan resmi ve başlık logosununkiyle değiştirilir.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Sonraki adımlar

İstemci tarafı JavaScript kodunu etkinleştirmeyi öğrenin.