Azure Active Directory B2C'de HTML şablonlarıyla kullanıcı arabirimini özelleştirme

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 tamamen 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 kaydolmayı, oturum açmayı, profil düzenlemeyi ve parola sıfırlamayı içerir. Bu makalede kullanıcı arabirimi (UI) özelleştirme yöntemleri tanıtılıyor.

İpucu

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 markalama ö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 o 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.

Ö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. Gerekli tek öğe, HTML sayfanızdaki gibi olarak ayarlanmış api<div id="api"></div> bir 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.

Sayfa Description Ş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 Slate Gray.
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 özelliği 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 Slate Gray.
Self-Asserted Kullanıcının giriş sağlamasının beklendiği Azure AD B2C etkileşimlerinin ç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 kayıt sayfası, yerel hesap oturum açma sayfası, parola sıfırlama, profili düzenleme, engelleme 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çim açılan kutuları ve çoklu seçim onay kutuları gibi çeşitli giriş denetimleri içerebilir. Klasik, Okyanus Mavisi ve Slate Gray.
Multi-factor authentication Bu sayfada, kullanıcılar kaydolma veya oturum açma sırasında telefon numaralarını doğrulayabilir (metin veya ses kullanarak). Klasik, Okyanus Mavisi ve Slate Gray.
Hata Bir özel durum veya hatayla karşılaşıldığında bu sayfa görüntülenir. Klasik, Okyanus Mavisi ve Slate Gray.

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 yükleme 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, css dosyasını önceden yükleyerek, kullanıcıya stilsiz HTML gösterilmeden sayfanın "titremesini" önlemeye yardımcı olur. Aşağıdaki HTML kod parçacığı, etiketinin data-preload kullanımını gösterir.

    <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 sayfası 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 ne İngilizce ne de Almanca olduğunda 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>

Çoklu şablon yaklaşımı

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

Not

Azure AD B2C, ui_localesgibi OpenID 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çeriği barındıracak 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 olarak yükleyebilirsiniz:

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

Özel sayfa içeriğinde izlenecek yol

sürece genel bir bakış aşağıdadır:

  1. Özel sayfa içeriğinizi (genel olarak erişilebilir, CORS özellikli 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 işaret edin.

Önkoşullar

1. HTML içeriğinizi oluşturma

Başlığında ürününüzün marka adıyla özel bir sayfa içeriği oluşturun.

  1. Aşağıdaki HTML parçacığını kopyalayın. Gövde etiketlerinin içinde bulunan div id="api"></div> adlı< boş bir öğeye <sahip 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ı metin düzenleyicisine yapıştırma

  3. Azure AD B2C'nin sayfanıza ekleyebilen kullanıcı arabirimi öğelerine stil eklemek için CSS 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.htmlolarak kaydedin.

Not

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.

Not

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

HTML içeriğinizi Blob depolamada barındırmak için aşağıdaki adımları gerçekleştirin:

  1. Azure Portal’ında oturum açın.
  2. Azure AD kiracınızı içeren ve aboneliği olan dizini kullandığınızdan emin olun:
    1. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
    2. Portal ayarlarında | Dizinler + abonelikler sayfası, Dizin adı listesinde Azure AD dizininizi bulun ve ardından Değiştir'i seçin.
  3. Azure portal 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. 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. PerformansStandart olarak kalabilir.
  10. YedeklilikCoğrafi olarak yedekli depolama (GRS) olarak kalabilir
  11. Gözden geçir ve oluştur'u seçin ve Azure AD'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çin.

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çinBlob'a tıklayın.
  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.

Özel sayfa içerik dosyalarınızı Upload 2.2

  1. Karşıya 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öğesine gidin ve öğesini seçin.
  4. Bir alt klasöre yüklemek istiyorsanız, Gelişmiş'i genişletin ve klasöre Upload bir klasör adı girin.
  5. Karşıya Yükle’yi seçin.
  6. Karşıya yüklediğiniz customize-ui.html blobu seçin.
  7. URL metin kutusunun sağındaki Panoya kopyala simgesini seçerek URL'yi panonuza kopyalayın.
  8. Web tarayıcısında kopyaladığınız URL'ye gidip karşıya yüklediğiniz bloba erişilebildiğini doğrulayın. Erişilemiyorsa, ö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ş alanına 200 girin.
  8. Sayfanın üst kısmında Kaydet'i seçin.

3.1 CORS'i test etme

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

  1. CORS'yi yapılandırma adımını yineleyin. İzin verilen çıkış noktaları içinhttps://www.test-cors.org
  2. www.test-cors.org gidin
  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. Azure AD B2C kiracınızı içeren dizini kullandığınızdan emin olun:
    1. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
    2. Portal ayarlarında | Dizinler + abonelikler sayfası, dizin adı listesinde Azure AD B2C dizininizi bulun ve ardından Değiştir'i seçin.
  2. Azure portal Azure AD B2C'yi arayın ve seçin.
  3. Sol taraftaki menüde Kullanıcı akışları'nı ve ardından kullanıcı akışını B2C_1_signupsignin1 seçin.
  4. Sayfa düzenleri'ni seçin ve birleşik kaydolma veya oturum açma sayfası'nın 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 etme

  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ılar dosyasına kopyalayın.

  1. İlkenizin temel dosyasını açın. Örneğin, SocialAndLocalAccounts/TrustFrameworkBase.xml. Bu temel dosya, özel ilke başlangıç paketinde bulunan ve özel ilkelerle Kullanmaya başlayın önkoşulda edinmiş olmanız gereken ilke dosyalarından biridir.

  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. Öğe 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 Upload ve test edin

Özel ilkeyi Upload 5.1

  1. Azure AD B2C kiracınızı içeren dizini kullandığınızdan emin olun. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
  2. Portal ayarları | Dizinler + abonelikler sayfası, Dizin adı listesinde Azure AD B2C dizininizi bulun ve ardından Değiştir'i seçin.
  3. Azure AD B2C'yi arayın ve seçin.
  4. İlkeler'in altında Kimlik Deneyimi Çerçevesi'ne tıklayın.
  5. Özel ilke Upload'i seçin.
  6. Daha önce değiştirdiğiniz uzantılar dosyasını Upload.

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ümleyici 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 LoadUrihttps://<app_name>.azurewebsites.net/home/unifiedolarak değ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 fransızca dil için iki harfli ISO kodunu 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. Depoyu yerel makinenizde kopyalayın. Bir şablon klasörü /AzureBlue, /MSAveya /classicseçin.

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

  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:

    Kimden:

    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 ederek ilkeyi değiştirin.

  6. Eksik yazı tipleri, resimler veya CSS görürseniz uzantı 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 etiketin dışına <div id="api"> aşağıdaki etiketleri 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.