JavaScript- és lapelrendezési verziók engedélyezése az Azure Active Directory B2C-ben

Cikk
10/27/2023

Mielőtt hozzákezdene, a Szabályzattípus kiválasztása választóval válassza ki a beállított szabályzat típusát. Az Azure Active Directory B2C két módszert kínál annak meghatározására, hogy a felhasználók hogyan használják az alkalmazásokat: előre definiált felhasználói folyamatokon vagy teljesen konfigurálható egyéni szabályzatokon keresztül. A cikkben szereplő lépések különbözőek az egyes metódusok esetében.

Az Azure Active Directory B2C (Azure AD B2C) HTML-sablonjaival létrehozhatja felhasználói identitáskezelési élményeit. A HTML-sablonok csak bizonyos HTML-címkéket és attribútumokat tartalmazhatnak. Az olyan egyszerű HTML-címkék, mint például <a b>, <i>, <u>, <h1> és <hr> , engedélyezettek. A speciálisabb címkék, például <a szkript> és <az iframe> biztonsági okokból törlődnek, de a <script> címkét hozzá kell adni a <head> címkéhez.

A <script> címkét kétféleképpen kell hozzáadni a <head> címkéhez:

Adja hozzá az defer attribútumot, amely azt határozza meg, hogy a szkript a lap elemzésével párhuzamosan lesz letöltve, majd a szkript végrehajtása a lap elemzésének befejezése után történik:
```
 <script src="my-script.js" defer></script>
```
Olyan attribútum hozzáadása async , amely azt határozza meg, hogy a szkript a lap elemzésével párhuzamosan lesz letöltve, majd a szkript végrehajtása azonnal megtörténik, amint elérhető (az elemzés befejezése előtt):
```
 <script src="my-script.js" async></script>	
```

A JavaScript engedélyezése és a HTML-címkék és -attribútumok továbblépése:

Lapelrendezés kiválasztása
Engedélyezze a felhasználói folyamaton az Azure Portal használatával
B2clogin.com használata a kérésekben

Lapelrendezés kiválasztása
Elem hozzáadása az egyéni szabályzathoz
B2clogin.com használata a kérésekben

Előfeltételek

Hozzon létre egy felhasználói folyamatot , hogy a felhasználók regisztrálhassák és bejelentkezhessenek az alkalmazásba.
Webalkalmazás regisztrálása.

Az Egyéni szabályzatok használatának első lépései az Active Directory B2C-ben
Webalkalmazás regisztrálása.

Lapelrendezési verzió beállításának megkezdése

Ha engedélyezni szeretné a JavaScript ügyféloldali kódját, a JavaScript alapjául szolgáló elemeknek nem módosíthatóknak kell lenniük. Ha nem módosíthatók, a módosítások váratlan viselkedést okozhatnak a felhasználói oldalakon. A problémák elkerülése érdekében kényszerítse ki a lapelrendezés használatát, és adjon meg egy oldalelrendezési verziót, hogy a JavaScripten alapuló tartalomdefiníciók nem módosíthatók legyenek. Még ha nem is szeretné engedélyezni a JavaScriptet, megadhatja a lapok lapelrendezési verzióját.

A felhasználói folyamatoldalak lapelrendezési verziójának megadása:

Az Azure AD B2C-bérlőben válassza a Felhasználói folyamatok lehetőséget.
Válassza ki a szabályzatot (például "B2C_1_SignupSignin") a megnyitásához.
Válassza a Lapelrendezések lehetőséget. Válasszon egy elrendezésnevet, majd válassza a Lapelrendezés verziója lehetőséget.

A lapelrendezés különböző verzióival kapcsolatos információkért tekintse meg a Lapelrendezés verzióváltozási naplójában.

Page layout settings in portal showing page layout version dropdown

Az egyéni házirendlapok lapelrendezési verziójának megadása:

Válasszon egy lapelrendezést az alkalmazás felhasználói felületének elemeihez.
Adjon meg egy lapelrendezési verziót az egyéni szabályzat összes tartalomdefiníciójához lapverzióvalcontract. Az érték formátumának tartalmaznia kell az alábbi szót contract: urn:com:microsoft:aad:b2c:elements:contract:p age-name:version.

Az alábbi példa a tartalomdefiníció azonosítóit és a lapszerződéssel rendelkező megfelelő DataUri-t mutatja be:

<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 engedélyezése

A felhasználói folyamat tulajdonságaiban engedélyezheti a JavaScriptet. A JavaScript engedélyezése a lapelrendezés használatát is kikényszeríti. Ezután beállíthatja a felhasználói folyamat lapelrendezési verzióját a következő szakaszban leírtak szerint.

User flow properties page with Enable JavaScript setting highlighted

A szkriptek végrehajtását úgy engedélyezheti, hogy hozzáadja a ScriptExecution elemet a RelyingParty elemhez.

Nyissa meg az egyéni házirendfájlt. Például: SignUpOrSignin.xml.

Adja hozzá a ScriptExecution elemet a RelyingParty elemhez:

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

Mentse és töltse fel a fájlt.

A JavaScript használatának irányelvei

Kövesse az alábbi irányelveket, amikor javaScript használatával szabja testre az alkalmazás felületét:

Nem:
- egy kattintásos esemény kötése HTML-elemeken <a> .
- függés az Azure AD B2C-kódtól vagy megjegyzésekhez.
- módosíthatja az Azure AD B2C HTML-elemeinek sorrendjét vagy hierarchiáját. A felhasználói felület elemeinek sorrendjét azure AD B2C-szabályzattal szabályozhatja.
Bármely RESTful szolgáltatást az alábbi szempontok figyelembe vételével hívhat meg:
- Előfordulhat, hogy az ügyféloldali HTTP-hívások engedélyezéséhez be kell állítania a RESTful szolgáltatás CORS-t.
- Győződjön meg arról, hogy a RESTful szolgáltatás biztonságos, és csak a HTTPS protokollt használja.
- Ne használja közvetlenül a JavaScriptet az Azure AD B2C-végpontok meghívásához.
Beágyazhatja a JavaScriptet, vagy külső JavaScript-fájlokra hivatkozhat. Külső JavaScript-fájl használatakor ne relatív URL-címet, hanem abszolút URL-címet használjon.
JavaScript-keretrendszerek:
- Az Azure AD B2C a jQuery egy adott verzióját használja. Ne tartalmazza a jQuery másik verzióját. Ha ugyanazon a lapon több verziót használ, problémákat okoz.
- A RequireJS használata nem támogatott.
- A Legtöbb JavaScript-keretrendszert az Azure AD B2C nem támogatja.
Az Azure AD B2C-beállítások az aktuális felhasználói felület nyelvéhez hasonló objektumok meghívásával window.SETTINGSwindow.CONTENT olvashatók. Ne módosítsa ezeknek az objektumoknak az értékét.
Az Azure AD B2C-hibaüzenet testreszabásához használjon honosítást egy szabályzatban.
Ha bármit el lehet érni egy szabályzat használatával, általában ez a javasolt módszer.
Javasoljuk, hogy a meglévő felhasználói felületi vezérlőinket( például gombokat) használja ahelyett, hogy elrejtené őket, és kattintási kötéseket implementál a saját felhasználói felületi vezérlőire. Ez a megközelítés biztosítja, hogy a felhasználói élmény továbbra is megfelelően működjön, még akkor is, ha új lapszerződés-frissítéseket adunk ki.

JavaScript-minták

Jelszó megjelenítése vagy elrejtése

Az ügyfeleknek a regisztráció sikerességével való segítés egyik gyakori módja, ha lehetővé teszik számukra, hogy lássák, mit írtak be jelszavukként. Ez a beállítás segít a felhasználóknak a regisztrációban azáltal, hogy lehetővé teszi számukra, hogy szükség esetén könnyen láthassák és kijavíthassák a jelszavukat. Bármely típusú jelszó mezőhöz tartozik egy jelszó megjelenítése feliratú jelölőnégyzet. Ez lehetővé teszi, hogy a felhasználó egyszerű szövegben lássa a jelszót. Adja meg ezt a kódrészletet egy önérvényesített lap regisztrációs vagy bejelentkezési sablonjába:

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();

Használati feltételek hozzáadása

Adja meg a következő kódot a lapra, ahol be szeretné foglalni a Használati feltételeket jelölőnégyzetet. Ez a jelölőnégyzet általában a helyi fiók regisztrációs és közösségi fiók regisztrációs oldalain szükséges.

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);
}

A kódban cserélje le termsOfUseUrl a használati feltételekre mutató hivatkozást. A címtárban hozzon létre egy új, termsOfUse nevű felhasználói attribútumot, majd adja meg a termsOfUse elemet felhasználói attribútumként.

Másik lehetőségként a JavaScript használata nélkül is hozzáadhat egy hivatkozást az önérvényesített lapok alján. Használja a következő honosítást:

<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>

Cserélje le termsOfUseUrl a szervezet adatvédelmi szabályzatára és használati feltételeire mutató hivatkozásra.

Következő lépések

További információ az alkalmazás felhasználói felületének testreszabásáról az Azure Active Directory B2C-ben.

Megosztás a következőn keresztül: