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

Başlamadan önce, ayarlamakta olduğunuz ilke türünü seçmek için bir ilke türü seçin seçicisini kullanın. Azure Active Directory B2C, kullanıcıların uygulamalarınızla nasıl etkileşime gireceğini belirlemek için iki yöntem sunar: önceden tanımlı kullanıcı akışları veya tam olarak yapılandırılabilir özel ilkeler. Bu makalede gereken adımlar her yöntem için farklıdır.

Azure Active Directory B2C (Azure AD B2C) için gereken kullanıcı arabirimini markalamayı ve özelleştirmeyi, müşterileriniz için, uygulamanızda sorunsuz bir kullanıcı deneyimi sağlamaya yardımcı olur. Bu deneyimlere kaydolma, oturum açma, profil düzenlemesi ve parola sıfırlama dahildir. Bu makale, Kullanıcı arabirimi (UI) özelleştirmesi yöntemlerini tanıtır.

İ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 markası özelliğini deneyebilirsiniz.

Özel HTML ve CSS 'ye Genel Bakış

Azure AD B2C, çıkış noktaları arası kaynak paylaşımı (CORS)kullanarak müşterinizin tarayıcısında kodu çalıştırır. Çalışma zamanında, içerik, Kullanıcı akışınız 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 yerleştirilen bir HTML parçası ile 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 karşılamak için kendi markaınızla bir HTML sayfası oluşturun. Bu sayfa bir statik *.html 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 öğeleri içeremez. Tek gerekli öğe, idapi HTML sayfanız içinde olduğu gibi, olarak ayarlanmış bir div öğesidir <div id="api"></div> .

<!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's varsayılan sayfa içeriğini özelleştirebilirsiniz.

Aşağıdaki tabloda, Azure AD B2C tarafından sunulan varsayılan sayfa içeriği listelenmektedir. Dosyaları indirin ve kendi özel sayfalarınızı oluşturmak için bir başlangıç noktası olarak kullanın.

Varsayılan sayfa Description İçerik tanımı KIMLIĞI
(yalnızca özel ilke)
exception.html Hata sayfası. Bu sayfa bir özel durum veya hata ile karşılaşıldığında görüntülenir. api. Error
selfasserted.html Otomatik olarak onaylanan sayfa. Bu dosyayı bir sosyal hesap kaydolma sayfası, yerel hesap kaydolma sayfası, yerel hesap oturum açma sayfası, parola sıfırlama ve daha fazlası için özel bir sayfa içeriği olarak kullanın. Form, metin girişi kutusu, parola girişi kutusu, radyo düğmesi, tek seçim açılan kutuları ve çoklu seçim onay kutuları gibi çeşitli giriş denetimleri içerebilir. api. localaccountsignın, api. localaccountsignup, API. localaccountpasswordreset, API. selfasted
multifactor-1.0.0.html Multi-Factor Authentication sayfası. Bu sayfada, kullanıcılar telefon numaralarını (metin veya ses kullanarak) kaydolma veya oturum açma sırasında doğrulayabilirler. api. phonefactor
updateprofile.html Profil güncelleştirme sayfası. Bu sayfa, kullanıcıların profilini güncelleştirmek için erişebileceği bir form içerir. Bu sayfa, parola girişi alanları hariç sosyal hesap kaydolma sayfasına benzerdir. api. selfasserted. profileUpdate
unified.html Birleşik kaydolma veya oturum açma sayfası. Bu sayfa Kullanıcı kayıt ve oturum açma sürecini işler. Kullanıcılar, kurumsal kimlik sağlayıcılarını, Facebook veya Google + gibi sosyal kimlik sağlayıcılarını veya yerel hesapları kullanabilir. api. signuporsignın

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 bir HTTPS uç noktası üzerinde barındırın. Örneğin, Azure Blob depolama, Azure App Services, Web sunucuları, CDNS, 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ı dahil ettiğinizde mutlak bir URL kullanın.

  • Sayfa düzeni 1.2.0 ve üstünü kullanarak, CSS ve JavaScript 'in yükleme sırasını denetlemek için özniteliğini HTML etiketinize ekleyebilirsiniz. İle data-preload="true" , sayfa kullanıcıya gösterilmeden önce oluşturulur. Bu öznitelik, Kullanıcı tarafından gösterilen stilsiz HTML olmadan CSS dosyasını önceden yükleyerek sayfanın "titreşme" olmasını önlemeye yardımcı olur. Aşağıdaki HTML kod parçacığı etiketinin kullanımını gösterir 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şlayıp üzerine inşa etmenizi öneririz.

  • JavaScript 'i özel içeriğinize dahil edebilirsiniz.

  • 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
    • İOS ve macOS için Safari, sürüm 12 ve üzeri
  • Güvenlik kısıtlamaları nedeniyle, Azure AD B2C frame , iframe veya form HTML öğelerini desteklemez.

İçeriği yerelleştirin

Azure AD B2C kiracınızda dil özelleştirmesini etkinleştirerek HTML içeriğinizi yerelleştirebilirsiniz. bu özelliğin etkinleştirilmesi, Azure AD B2C HTML sayfa dili özniteliğini ayarlamasına ve openıd Bağlan parametresini ui_locales uç noktanıza iletmelerini sağlar.

Tek şablon yaklaşımı

Sayfa yükleme sırasında, Azure AD B2C HTML sayfası dili özniteliğini geçerli dile göre ayarlar. Örneğin, <html lang="en">. Geçerli dil başına farklı stilleri işlemek için CSS :lang tanımınız ile bırlıkte CSS seçiciyi kullanın.

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

  • imprint-en -Geçerli dil Ingilizce olduğunda kullanılır.
  • imprint-de -Geçerli dil Almanca olduğunda kullanılır.
  • imprint -Geçerli dil ne Ingilizce ne de Almanca yoksa 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, openıd Bağlan parametresini ui_locales uç noktanıza geçmesine izin verir. İçerik sunucunuz, dile özgü HTML sayfaları sağlamak için bu parametreyi kullanabilir.

Not

Azure AD B2C, gibi openıd Bağlan parametrelerini ui_localesui_localesgeçirmez.

İçerik, kullanılan yerel ayara bağlı olarak farklı yerlerden çekeklenebilir. CORS etkin uç noktanıza, belirli diller için içerik barındırmak üzere bir klasör yapısı ayarlarsınız. Joker karakter değerini kullanırsanız, doğru olanı çağıracaksınız {Culture:RFC5646} .

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

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

Buradan içerik çekerek sayfayı Fransızca olarak yükleyebilirsiniz:

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

Özel sayfa içeriği Kılavuzu

İşleme genel bir bakış aşağıda verilmiştir:

  1. Özel sayfa içeriğinizi barındırmak için bir konum hazırlayın (genel olarak erişilebilen, CORS özellikli bir HTTPS uç noktası).
  2. Örneğin, varsayılan bir sayfa içerik dosyasını indirip özelleştirin unified.html .
  3. Özel sayfa içeriğinizi herkese açık olan HTTPS uç noktanızla yayımlayın.
  4. Web uygulamanız için çıkış noktaları arası kaynak paylaşımı (CORS) ayarlayın.
  5. İlkenize özel ilke içerik URI 'sine işaret edin.

Önkoşullar

1. HTML içeriğinizi oluşturma

Başlığında, ürün markanızı kullanarak özel bir sayfa içeriği oluşturun.

  1. Aşağıdaki HTML kod parçacığını kopyalayın. Gövde etiketlerinin içinde yer alan div id="api" >< /div > adlı boş bir >< öğeye sahip iyi formed HTML5'tir. Bu öğe, Azure AD B2C eklenecek yeri 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ırın

  3. Css kullanarak, sayfanıza ek Azure AD B2C kullanıcı arabirimi öğelerine stil ekleme. Aşağıdaki örnek, kaydolmaya dahil edilen HTML öğeleri için ayarları da içeren basit bir CSS dosyasını gösterir:

    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ı dosya olarak customize-ui.html.

Not

Html form öğeleri, güvenlik kısıtlamalarını kullanarak login.microsoftonline.com. Özel HTML içeriğinde HTML form öğelerini kullanmak için şu b2clogin.com.

2. Azure Blob depolama hesabı oluşturma

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

Not

Bir Azure AD B2C blob depolama alanı sağlanamıyor. Bu kaynağı Azure AD kiracınız içinde 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 oturum açın.
  2. Azure AD kiracınızı içeren ve aboneliği olan dizini kullanmaya emin olun:
    1. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
    2. Portal ayarları sayfasında | Dizinler + abonelikler sayfası, Dizin adı listesinde Azure AD dizininizi bulun ve ardından Değiştir'i seçin.
  3. Aşağıdaki Azure portal hesaplarda arama Depolama seçin
  4. + Oluştur'a 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 Depolama benzersiz bir hesap adı girin.
  8. Depolama hesabınız için coğrafi Bölge'yi seçin.
  9. Performans Standart olarak kalabilirsiniz.
  10. Yedeklilik Coğrafi olarak yedekli depolama (GRS) olarak kalarak kullanılabilir
  11. Gözden geçir + oluştur'ı 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 menüden Veri depolama'nın altında Kapsayıcılar'ı seçin.
  2. + Kapsayıcı'yı seçin.
  3. Ad alanınakök girin. Ad, seçtiğiniz bir ad (örneğin contoso)olabilir, ancak kolaylık olması için bu örnekte kök adını kullanıyoruz.
  4. Genel erişim düzeyi içinBlob'ı seçin.
  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 seçin.

2.2 Upload sayfa içeriği dosyalarınızı oluşturma

  1. Karşıya Yükle’yi seçin.
  2. Dosya seçin seçeneğinin yanındaki klasör simgesini seçin.
  3. sayfasına gidin ve customize-ui.htmlkullanıcı arabirimi özelleştirme bölümünde oluşturduğunuz öğesini seçin.
  4. Bir alt klasöre yüklemek için Gelişmiş'i genişletin ve klasörüne bir klasör Upload girin.
  5. Karşıya Yükle’yi seçin.
  6. Karşıya yüklediğinizcustomize-ui.html blobu seçin.
  7. URL metin kutusunun sağ tarafından Panoya kopyala simgesini seçerek URL'yi panoya kopyalayın.
  8. Web tarayıcısında, yüklediğiniz blob'un erişilebilir olduğunu doğrulamak için kopyalanan URL'ye gidin. Erişilemiyorsa, örneğin bir hatayla karşılaşırsanız kapsayıcı erişim türünün blob olarak ResourceNotFound ayarlanmış olduğundan emin ResourceNotFound

3. CORS'yi yapılandırma

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

  1. Depolama hesabınıza gidin.
  2. Sol menüde, kaynak paylaşımı (CORS)Ayarlarseçeneğini belirleyin.
  3. İzin verilen çıkışlar için girin. yerine your-tenant-name kiracının adını Azure AD B2C. Örneğin, https://fabrikam.b2clogin.com. Kiracı adını girerken tüm küçük harfleri kullanın.
  4. İzin Verilen Yöntemler içinhem hem de 'yi OPTIONS seçin.
  5. İzin Verilen Üst Bilgileriçin bir yıldız işareti (*) girin.
  6. Açık Üst Bilgileriçin bir yıldız işareti (*) girin.
  7. Yaş üst sınırı alanına200 girin.
  8. Sayfanın üst kısmında Kaydet'i seçin.

3.1 CORS'u test

Aşağıdaki adımları gerçekleştirerek hazır olduğunu doğrulama:

  1. CORS'yi yapılandırma adımını tekrarlayın. İzin verilen çıkışlar içingirin
  2. Www.test-cors.org
  3. Uzak URL kutusu için HTML dosyanı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ç olması XHR status: 200 gerekir. Hata alırsanız CORS ayarlarınızın doğru olduğundan emin olun. Ctrl+Shift+P tuşlarına basarak tarayıcınızın önbelleğini temizlemeniz veya özel bir gözatma oturumu açmanız da gerekir.

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

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

  1. Kiracınızı içeren dizini kullanmaya Azure AD B2C:
    1. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
    2. Portal ayarları sayfasında | Dizinler + abonelikler sayfası, dizin Azure AD B2C listesinde dizin dizininizi bulun ve ardından Değiştir'i seçin.
  2. Aşağıdaki Azure portal için arama ve seçimAzure AD B2C.
  3. Sol menüde Kullanıcı akışları'ı seçin veardından kullanıcı akışını B2C_1_signupsignin1 seçin.
  4. Sayfa düzenleri'netıklayın ve ardından Birleşik kaydolma veya oturum açma sayfası altında Özel sayfa içeriğini kullan için Evet'i seçin.
  5. Özel sayfa URI'sialanına, daha önce custom-ui.html dosyanın URI'lerini girin.
  6. Sayfanın üst kısmında Kaydet'i seçin.

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

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

Oluşturduğunuz CSS dosyasını temel alan öğelerin orta olduğu aşağıdaki örnektekine benzer bir sayfa görüyorsanız:

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

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

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

  1. İlkenizin temel dosyasını açın. Örneğin, SocialAndLocalAccounts/TrustFrameworkBase.xml. Bu temel dosya, önkoşul içinde elde etmeniz gereken özel ilke başlangıç paketine dahil olan ilke dosyalarından biridir, özel ilkelerikullanmaya başlayın.

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

  3. Uzantı dosyasını açın. Örneğin, TrustFrameworkExtensions.xml. Buildingblocks öğesi için arama yapın. Öğe yoksa, ekleyin.

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

  5. Kopyaladığınız XML içinde içeren ContentDefinition öğesini arayın .

  6. Loaduri değerini, depolama ALANıNA yüklediğiniz HTML dosyasının URL 'si ile 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ı 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ında, Dizin adı listesinde Azure AD B2C dizininizi bulun ve ardından Değiştir' i seçin.
  3. Arama yapın ve Azure AD B2Cseçin.
  4. İlkeleraltında kimlik deneyimi çerçevesi' ni seçin.
  5. Upload özel ilke' yi seçin.
  6. daha önce değiştirdiğiniz uzantıları dosyasını Upload.

5,2 Şimdi Çalıştır 'ı kullanarak özel ilkeyi test etme

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

Dinamik özel sayfa içerik URI 'sini Yapılandır

Azure AD B2C özel ilke kullanarak, URL yolunda veya bir sorgu dizesinde bir parametre 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 özel sorgu dizesi parametresi gibi herhangi bir talep Çözümleyicisiolabilir .

Sorgu dizesi parametreleri gönderiliyor

Sorgu dizesi parametreleri göndermek için bağlı olan taraf ilkesinde aşağıda gösterildiği gibi bir öğ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 değiştirin https://<app_name>.azurewebsites.net/home/unified . Ö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çerik URI 'SI

İçerik, kullanılan parametrelere göre farklı konumlardan çekeklenebilir. CORS etkin uç noktanıza, ana içerik için bir klasör yapısı ayarlayın. Örneğin, içeriği aşağıdaki yapıda düzenleyebilirsiniz. Dil/HTML dosyalarınıza göre kök klasör/klasör. Ö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, Fransızca için dil için iki harfli ISO kodu gönderir fr :

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

Örnek şablonlar

UI özelleştirmesi için örnek şablonları buradan 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 makinenizde depoyu kopyalayın. Bir şablon klasörü /AzureBlue , /MSA veya seçin /classic .

  2. şablon klasörü ve klasörü altındaki tüm dosyaları /src , önceki bölümlerde açıklandığı gibi Blob depolama alanına Upload.

  3. Ardından, her bir \*.html dosyayı şablon klasöründen açın. Ardından, URL 'lerin tüm örneklerini https://login.microsoftonline.com Adım 2 ' de 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. Dosyaları kaydedin \*.html 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ı tiplerini, görüntüleri veya CSS 'yi görürseniz, uzantılar ilkesi ve dosyalar 'daki başvurularınızı kontrol edin \*.html .

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

Şirket marka varlıklarını özel bir HTML içinde kullanmak için, etiketin dışına aşağıdaki etiketleri ekleyin . Görüntü kaynağı arka plan resminin ve başlık logosunun yerine konur.

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

Sonraki adımlar

İstemci tarafı JavaScript kodunuetkinleştirmeyi öğrenin.