Anpassa användar gränssnittet i Azure Active Directory B2CCustomize the user interface in Azure Active Directory B2C

Anpassning och anpassning av användar gränssnittet som Azure Active Directory B2C (Azure AD B2C) visar för dina kunder och ger en smidig användar upplevelse i ditt program.Branding and customizing the user interface that Azure Active Directory B2C (Azure AD B2C) displays to your customers helps provide a seamless user experience in your application. Dessa upplevelser omfattar registrering, inloggning, profil redigering och återställning av lösen ord.These experiences include signing up, signing in, profile editing, and password resetting. I den här artikeln beskrivs metoder för anpassning av användar gränssnittet för både användar flöden och anpassade principer.This article introduces the methods of user interface (UI) customization for both user flows and custom policies.

Anpassning av gränssnitt i olika scenarierUI customization in different scenarios

Det finns flera sätt att anpassa användar gränssnittet för användaren som använder ditt program, varje lämplig för olika scenarier.There are several ways to customize the UI of the user experiences your application, each appropriate for different scenarios.

AnvändarflödenUser flows

Om du använder användar flödenkan du ändra utseendet på dina användar flödes sidor genom att använda inbyggda mallarför sidlayout, eller genom att använda din egen HTML och CSS.If you use user flows, you can change the look of your user flow pages by using built-in page layout templates, or by using your own HTML and CSS. Båda metoderna beskrivs längre fram i den här artikeln.Both methods are discussed later in this article.

Du kan använda Azure Portal för att konfigurera anpassningen av gränssnittet för användar flöden.You use the Azure portal to configure the UI customization for user flows.

Anpassade principerCustom policies

Om du använder anpassade principer för att tillhandahålla registrering eller inloggning, lösen ords återställning eller profil redigering i programmet använder du principfiler för att anpassa användar gränssnittet.If you're using custom policies to provide sign-up or sign-in, password reset, or profile-editing in your application, use policy files to customize the UI.

Om du behöver tillhandahålla dynamiskt innehåll baserat på kundens beslut kan du använda anpassade principer som kan ändra sid innehållet dynamiskt beroende på en parameter som skickas i en frågesträng.If you need to provide dynamic content based on a customer's decision, use custom policies that can change page content dynamically depending on a parameter that's sent in a query string. Du kan till exempel ändra bakgrunds bilden på Azure AD B2C registrerings-eller inloggnings sida baserat på en parameter som du skickar från ditt webb program eller mobil program.For example, you can change the background image on the Azure AD B2C sign-up or sign-in page based on a parameter that you pass from your web or mobile application.

JavaScriptJavaScript

Du kan aktivera JavaScript-kod på klient sidan i både användar flöden och anpassade principer.You can enable client-side JavaScript code in both user flows and custom policies.

Logga endast in-UI-anpassningSign in-only UI customization

Om du bara tillhandahåller inloggning, tillsammans med den medföljande sidan för lösen ords återställning och verifierings-e-post, använder du samma anpassnings steg som används för en inloggnings sida för Azure AD.If you're providing sign-in only, along with its accompanying password reset page and verification emails, use the same customization steps that are used for an Azure AD sign-in page.

Om kunderna försöker redigera sin profil innan de loggar in, omdirigeras de till en sida som du anpassar med samma steg som används för att anpassa inloggnings sidan för Azure AD.If customers try to edit their profile before signing in, they're redirected to a page that you customize by using the same steps that are used for customizing the Azure AD sign-in page.

Mallar för sidlayoutPage layout templates

Användar flöden innehåller flera inbyggda mallar som du kan välja mellan för att ge dina användar upplevelse sidor ett professionellt utseende.User flows provide several built-in templates you can choose from to give your user experience pages a professional look. Dessa mallar kan också fungera som utgångs punkt för din egen anpassning.These layout templates can also and serve as starting point for your own customization.

Välj sidlayouter under Anpassa på den vänstra menyn och välj sedan mall.Under Customize in the left menu, select Page layouts and then select Template.

Listruta för val av mall på sidan användar flöde i Azure Portal

Välj sedan en mall i listan.Next, select a template from the list. Här följer några exempel på inloggnings sidorna för varje mall:Here are examples of the sign-in pages for each template:

HavsblåOcean Blue SkiffergråSlate Gray KlassiskClassic
Exempel på en blå mall i Atlanten som återges på inloggnings Sidan Exempel på den bakgrunds grå mall som återges på inloggnings Sidan Exempel på en klassisk mall som återges på inloggnings Sidan

När du väljer en mall tillämpas den valda layouten på alla sidor i ditt användar flöde och URI: n för varje sida visas i fältet URI för anpassad sida .When you choose a template, the selected layout is applied to all pages in your user flow, and the URI for each page is visible in the Custom page URI field.

Anpassad HTML och CSSCustom HTML and CSS

Azure AD B2C kör kod i kundens webbläsare med hjälp av en metod som kallas CORS (Cross-Origin Resource Sharing).Azure AD B2C runs code in your customer's browser by using an approach called Cross-Origin Resource Sharing (CORS).

Vid körning läses innehållet in från en URL som du anger i ditt användar flöde eller en anpassad princip.At runtime, content is loaded from a URL that you specify in your user flow or custom policy. Varje sida i användar gränssnittet läser in innehållet från den URL som du anger för sidan.Each page in the user experience loads its content from the URL you specify for that page. När innehållet har lästs in från din URL sammanfogas det med ett HTML-fragment som infogats av Azure AD B2C och sedan visas sidan för kunden.After content is loaded from your URL, it's merged with an HTML fragment inserted by Azure AD B2C, and then the page is displayed to your customer.

Läs följande rikt linjer innan du använder dina egna HTML-och CSS-filer för att anpassa användar gränssnittet:Review the following guidance before using your own HTML and CSS files to customize the UI:

  • Azure AD B2C sammanfogar HTML-innehåll till dina sidor.Azure AD B2C merges HTML content into your pages. Kopiera inte och försök att ändra standard innehållet som Azure AD B2C tillhandahåller.Don't copy and try to change the default content that Azure AD B2C provides. Det är bäst att bygga HTML-innehåll från grunden och använda standard innehållet som referens.It's best to build your HTML content from scratch and use the default content as reference.
  • Java Script kan inkluderas i ditt anpassade innehåll för både användar flöden och anpassade principer.JavaScript can be included in your custom content for both user flows and custom policies.
  • Webb läsar versioner som stöds är:Supported browser versions are:
    • Internet Explorer 11, 10 och Microsoft EdgeInternet Explorer 11, 10, and Microsoft Edge
    • Begränsat stöd för Internet Explorer 9 och 8Limited support for Internet Explorer 9 and 8
    • Google Chrome 42,0 och senareGoogle Chrome 42.0 and above
    • Mozilla Firefox 38,0 och senareMozilla Firefox 38.0 and above
  • Ta inte med formulär Taggar i din HTML-kod.Don't include form tags in your HTML. Formulär taggarna stör de POST åtgärder som genereras av HTML-koden som infogas av Azure AD B2C.Form tags interfere with the POST operations generated by the HTML injected by Azure AD B2C.

Var lagrar jag GRÄNSSNITTs innehåll?Where do I store UI content?

När du använder egna HTML-och CSS-filer för att anpassa användar gränssnittet kan du vara värd för ditt GRÄNSSNITTs innehåll på en offentligt tillgänglig HTTPS-slutpunkt som stöder CORS.When using your own HTML and CSS files to customize the UI, you can host your UI content on any publicly available HTTPS endpoint that supports CORS. Till exempel Azure Blob Storage, webb servrar, CDN, AWS S3 eller fildelnings system.For example, Azure Blob storage, web servers, CDNs, AWS S3, or file sharing systems.

Den viktiga punkten är att du är värd för innehållet på en offentligt tillgänglig HTTPS-slutpunkt med CORS aktiverat.The important point is that you host the content on a publicly available HTTPS endpoint with CORS enabled. Du måste använda en absolut URL när du anger den i ditt innehåll.You must use an absolute URL when you specify it in your content.

Kom igång med anpassad HTML och CSSGet started with custom HTML and CSS

Kom igång med din egen HTML och CSS på sidorna med användar upplevelsen genom att följa dessa rikt linjer.Get started using your own HTML and CSS in your user experience pages by following these guidelines.

  • Skapa välformulerat HTML-innehåll med ett <div id="api"></div> tomt element någonstans <body>i.Create well-formed HTML content with an empty <div id="api"></div> element located somewhere in the <body>. Det här elementet anger var Azure AD B2C innehållet infogas.This element marks where the Azure AD B2C content is inserted. I följande exempel visas en minimal sida:The following example shows a minimal page:

    <!DOCTYPE html>
    <html>
      <head>
        <title>!Add your title here!</title>
        <link rel="stylesheet" href="https://mystore1.blob.core.windows.net/b2c/style.css">
      </head>
      <body>
        <h1>My B2C Application</h1>
        <div id="api"></div>   <!-- Leave this element empty because Azure AD B2C will insert content here. -->
      </body>
    </html>
    
  • Använd CSS för att formatera de GRÄNSSNITTs element som Azure AD B2C infogar på sidan.Use CSS to style the UI elements that Azure AD B2C inserts into your page. I följande exempel visas en enkel CSS-fil som även innehåller inställningar för inmatade HTML-element för registrering:The following example shows a simple CSS file that also includes settings for the sign-up injected HTML elements:

    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 ;
    }
    
  • Vara värd för ditt innehåll på en HTTPS-slutpunkt (med CORS tillåtet).Host your content on an HTTPS endpoint (with CORS allowed). Du måste aktivera både GET-och option Request-metoderna när du konfigurerar CORS.Both GET and OPTIONS request methods must be enabled when configuring CORS.

  • Skapa eller redigera ett användar flöde eller en anpassad princip för att använda det innehåll som du har skapat.Create or edit a user flow or custom policy to use the content that you created.

HTML-fragment från Azure AD B2CHTML fragments from Azure AD B2C

I följande tabell visas de HTML-fragment som Azure AD B2C sammanfogas i det <div id="api"></div> element som finns i ditt innehåll.The following table lists the HTML fragments that Azure AD B2C merges into the <div id="api"></div> element located in your content.

Infogad sidaInserted page Beskrivning av HTMLDescription of HTML
Val av identitetsproviderIdentity provider selection Innehåller en lista över knappar för identitets leverantörer som kunden kan välja från vid registrering eller inloggning.Contains a list of buttons for identity providers that the customer can choose from during sign-up or sign-in. Dessa knappar inkluderar sociala identitets leverantörer som Facebook, Google eller lokala konton (baserat på e-postadress eller användar namn).These buttons include social identity providers such as Facebook, Google, or local accounts (based on email address or user name).
Registrera lokalt kontoLocal account sign-up Innehåller ett formulär för registrering av lokalt konto baserat på en e-postadress eller ett användar namn.Contains a form for local account sign-up based on an email address or a user name. Formuläret kan innehålla olika inmatnings kontroller, till exempel text inmatnings ruta, rutan lösen ords post, alternativ knapp, list rutor med flera val och kryss rutor med flera val.The form can contain different input controls such as text input box, password entry box, radio button, single-select drop-down boxes, and multi-select check boxes.
Registrering av socialt kontoSocial account sign-up Kan visas när du registrerar dig med ett befintligt konto från en social identitetsprovider som Facebook eller Google.May appear when signing up using an existing account from a social identity provider such as Facebook or Google. Den används när ytterligare information måste samlas in från kunden med hjälp av ett registrerings formulär.It's used when additional information must be collected from the customer using a sign-up form.
Enhetlig registrering eller inloggningUnified sign-up or sign-in Hanterar både registrering och inloggning av kunder som kan använda sociala identitets leverantörer som Facebook, Google eller lokala konton.Handles both sign-up and sign-in of customers who can use social identity providers such as Facebook, Google, or local accounts.
Multi-Factor AuthenticationMulti-factor authentication Kunder kan verifiera sina telefonnummer (med text eller röst) under registreringen eller inloggningen.Customers can verify their phone numbers (using text or voice) during sign-up or sign-in.
FelError Tillhandahåller fel information till kunden.Provides error information to the customer.

Lokalisera innehållLocalize content

Du lokaliserar ditt HTML-innehåll genom att aktivera språk anpassning i Azure AD B2C klient organisationen.You localize your HTML content by enabling language customization in your Azure AD B2C tenant. När du aktiverar den här funktionen kan Azure AD B2C vidarebefordra parametern ui-locales OpenID Connect till din slut punkt.Enabling this feature allows Azure AD B2C to forward the OpenID Connect parameter ui-locales to your endpoint. Din innehålls Server kan använda den här parametern för att tillhandahålla språkspecifika HTML-sidor.Your content server can use this parameter to provide language-specific HTML pages.

Innehållet kan hämtas från olika platser baserat på det språk som används.Content can be pulled from different places based on the locale that's used. I din CORS-aktiverade slut punkt ställer du in en mappstruktur som värd för innehåll för vissa språk.In your CORS-enabled endpoint, you set up a folder structure to host content for specific languages. Du anropar rätt ett om du använder jokertecknet {Culture:RFC5646}.You'll call the right one if you use the wildcard value {Culture:RFC5646}.

Din anpassade sid-URI kan till exempel se ut så här:For example, your custom page URI might look like:

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

Du kan läsa in sidan på franska genom att dra innehåll från:You can load the page in French by pulling content from:

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

ExempelExamples

Du kan hitta flera exempel mallfiler i B2C-AzureBlobStorage-client- lagringsplatsen på GitHub.You can find several sample template files in the B2C-AzureBlobStorage-Client repository on GitHub.

HTML-och CSS-exempelfilerna i-mallarna finns i /sample_templates -katalogen.The sample HTML and CSS files in the templates are located in the /sample_templates directory.

Nästa stegNext steps