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

Beágyazott regisztráció vagy bejelentkezési élmény

  • Cikk

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.

Ez a funkció csak egyéni szabályzatokhoz érhető el. A beállítási lépésekhez válassza az egyéni szabályzatot az előző választóban.

Az egyszerűbb regisztráció vagy bejelentkezési élmény érdekében elkerülheti, hogy a felhasználókat külön regisztrációs vagy bejelentkezési lapra irányítsák át, vagy előugró ablakot generáljanak. A beágyazott keret <iframe> HTML-elemével közvetlenül beágyazhatja az Azure AD B2C bejelentkezési felhasználói felületét a webalkalmazásba.

Tipp.

Az <iframe> HTML-elem használatával beágyazhatja a regisztrációt vagy a bejelentkezést, szerkesztheti a profilt, vagy módosíthatja a jelszó egyéni szabályzatait a web- vagy egyoldalas alkalmazásba.

Megjegyzés:

Ez a funkció nyilvános előzetes verzióban érhető el.

Beágyazott webalkalmazás-bejelentkezés

A beágyazott keretelem <iframe> egy HTML5-weblapba ágyazza be a dokumentumot. Az iframe elem használatával közvetlenül beágyazhatja az Azure AD B2C bejelentkezési felhasználói felületét a webalkalmazásba, ahogyan az alábbi példában látható:

Login with hovering DIV experience

Iframe használata esetén vegye figyelembe a következőket:

  • A beágyazott regisztráció vagy bejelentkezés csak a helyi fiókokat támogatja. A legtöbb közösségi identitásszolgáltató (például a Google és a Facebook) letiltja a bejelentkezési oldalak beágyazott keretekben való megjelenítését.
  • Bizonyos böngészők, például a Safari vagy a Chrome inkognitó módban, külső cookie-kként tekintik meg az Azure AD B2C munkamenet-cookie-kat egy iframe-en belül. Ezek a böngészők letilthatják vagy törölhetik ezeket a cookie-kat, ami kevesebb, mint optimális felhasználói élményt eredményezhet. A probléma megelőzése érdekében győződjön meg arról, hogy az alkalmazás tartományneve és az Azure AD B2C-tartománya azonos eredetű. Ha ugyanazt a forrást szeretné használni, engedélyezze az egyéni tartományokat az Azure AD B2C-bérlőhöz, majd konfigurálja a webalkalmazást ugyanazzal a forrással. Például egy ""https://app.contoso.com webhelyen üzemeltetett alkalmazás eredete megegyezik a ""https://login.contoso.com rendszeren futó Azure AD B2C-vel.

Előfeltételek

A szabályzat konfigurálása

Ahhoz, hogy az Azure AD B2C felhasználói felülete beágyazható legyen egy iframe-be, az Azure AD B2C HTTP-válaszfejléceiben tartalombiztonsági szabályzatot Content-Security-Policy és keretbeállításokat X-Frame-Options kell tartalmaznia. Ezek a fejlécek lehetővé teszik, hogy az Azure AD B2C felhasználói felülete az alkalmazás tartományneve alatt fusson.

Adjon hozzá egy JourneyFraming elemet a RelyingParty elemhez. A UserJourneyBehaviors elemnek követnie kell a DefaultUserJourney elemet. A UserJourneyBehaviors elemnek a következő példához hasonlóan kell kinéznie:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

A Források attribútum tartalmazza a webalkalmazás URI-ját. Adjon hozzá szóközt az URI-k között. Minden URI-nak meg kell felelnie a következő követelményeknek:

  • Az alkalmazásnak megbízhatónak kell lennie, és rendelkeznie kell az URI-val.
  • Az URI-nak a https sémát kell használnia.
  • Meg kell adni a webalkalmazás teljes URI-ját. A helyettesítő karakterek nem támogatottak.
  • A JourneyFraming elem csak két-hét karakterből álló legfelső szintű tartománnyal (TLD) rendelkező webhely URL-címeit teszi lehetővé a gyakran felismert TLD-khez való igazításhoz.

Emellett azt is javasoljuk, hogy az alkalmazásoldalakon a fejlécek és X-Frame-Options fejlécek Content-Security-Policy beállításával tiltsa le, hogy saját tartománynevét beágyazza egy iframe-be. Ez a technika enyhíti az iframe-ek beágyazott beágyazásával kapcsolatos régebbi böngészők biztonsági aggályait.

Szabályzat felhasználói felületének módosítása

Az Azure AD B2C felhasználói felületének testreszabásával szinte teljes mértékben szabályozhatja a felhasználókat bemutató HTML- és CSS-tartalmakat. Kövesse a HTML-lapok tartalomdefiníciók használatával történő testreszabásának lépéseit. Ha az Azure AD B2C felhasználói felületét az iframe méretéhez szeretné illeszteni, biztosítson tiszta HTML-oldalt háttér és további szóközök nélkül.

Az alábbi CSS-kód elrejti az Azure AD B2C HTML-elemeit, és az iframe kitöltéséhez módosítja a panel méretét.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

Bizonyos esetekben érdemes lehet értesíteni az alkalmazást a jelenleg bemutatott Azure AD B2C-oldalról. Ha például egy felhasználó kiválasztja a regisztrációs lehetőséget, előfordulhat, hogy azt szeretné, hogy az alkalmazás válaszoljon a közösségi fiókkal való bejelentkezés hivatkozásainak elrejtésével vagy az iframe méretének módosításával.

Ha értesíteni szeretné az alkalmazást az Azure AD B2C aktuális oldaláról, engedélyezze a JavaScript-szabályzatot, majd a HTML5 használatával tegye közzé az üzeneteket. A következő JavaScript-kód post üzenetet küld az alkalmazásnak a következővel signUp:

window.parent.postMessage("signUp", '*');

Webalkalmazás konfigurálása

Amikor egy felhasználó kiválasztja a bejelentkezési gombot, a webalkalmazás létrehoz egy engedélyezési kérelmet, amely a felhasználót az Azure AD B2C bejelentkezési felületére viszi. A bejelentkezés befejezése után az Azure AD B2C egy azonosító jogkivonatot vagy engedélyezési kódot ad vissza az alkalmazás konfigurált átirányítási URI-jának.

A beágyazott bejelentkezés támogatásához az iframe src attribútum a bejelentkezési vezérlőre mutat, például /account/SignUpSignIn, amely létrehozza az engedélyezési kérelmet, és átirányítja a felhasználót az Azure AD B2C-szabályzatba.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

Miután az alkalmazás megkapta és érvényesítette az azonosító jogkivonatát, befejezi az engedélyezési folyamatot, és felismeri és megbízik a felhasználóban. Mivel az engedélyezési folyamat az iframe-ben történik, újra kell betöltenie a főoldalt. A lap újbóli betöltése után a bejelentkezési gomb "kijelentkezés" értékre változik, és a felhasználónév megjelenik a felhasználói felületen.

Az alábbi példa bemutatja, hogyan frissítheti a bejelentkezési átirányítási URI a főoldalt:

window.top.location.reload();

Bejelentkezés közösségi fiókokkal egy webalkalmazásba

A közösségi identitásszolgáltatók megakadályozzák, hogy bejelentkezési oldalaik beágyazott keretekben jelenjenek meg. Használhat külön szabályzatot a közösségi fiókokhoz, vagy használhat egyetlen házirendet a helyi és közösségi fiókokkal való bejelentkezéshez és regisztrációhoz is. Ezután használhatja a lekérdezési sztring domain_hint paramétert. A domain hint paraméter közvetlenül a közösségi identitásszolgáltató bejelentkezési oldalára viszi a felhasználót.

Az alkalmazásban adja hozzá a bejelentkezést a közösségi fiók gombjaival. Amikor egy felhasználó a közösségi fiók egyik gombjára kattint, a vezérlőnek módosítania kell a szabályzat nevét, vagy be kell állítania a tartománymutató paraméterét.

Az átirányítási URI ugyanaz lehet, mint az iframe által használt átirányítási URI. Kihagyhatja a lap újrabetöltését.

Egyoldalas alkalmazás konfigurálása

Egyoldalas alkalmazáshoz szükség van egy második "bejelentkezési" HTML-lapra is, amely betöltődik az iframe-be. Ez a bejelentkezési oldal tárolja a hitelesítési kódtár kódját, amely létrehozza az engedélyezési kódot, és visszaadja a jogkivonatot.

Ha az egyoldalas alkalmazásnak szüksége van a hozzáférési jogkivonatra, javaScript-kóddal szerezze be a hozzáférési jogkivonatot az iframe-ből és az azt tartalmazó objektumból.

Megjegyzés:

Az MSAL 2.0 iframe-ben való futtatása jelenleg nem támogatott.

Az alábbi kód egy példa, amely a főoldalon fut, és meghív egy iframe JavaScript-kódját:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

További lépések

Lásd a következő kapcsolódó cikkeket: