Delen via

Ingesloten registratie- of aanmeldingservaring

Belangrijk

Vanaf 1 mei 2025 is Azure AD B2C niet meer beschikbaar voor nieuwe klanten. Meer informatie vindt u in onze veelgestelde vragen.

Voordat u begint, gebruikt u de selector Een beleidstype kiezen boven aan deze pagina om het type beleid te kiezen dat u instelt. U kunt in Azure Active Directory B2C op twee manieren definiëren hoe gebruikers met uw toepassingen communiceren: via vooraf gedefinieerde gebruikersstromen of via volledig configureerbaar aangepast beleid. De stappen die in dit artikel zijn vereist, verschillen voor elke methode.

Deze functie is alleen beschikbaar voor aangepast beleid. Voor installatiestappen selecteert u Aangepast beleid in de voorgaande selector.

Voor een eenvoudigere registratie- of aanmeldingservaring kunt u voorkomen dat gebruikers worden omgeleid naar een afzonderlijke registratie- of aanmeldingspagina, of om een pop-upvenster te genereren. Met behulp van het inline frame <iframe> HTML-element kunt u de aanmeldingsinterface van Azure AD B2C rechtstreeks in uw webtoepassing insluiten.

Aanbeveling

Gebruik het <HTML-element van het iframe> om het registratie- of aanmeldingsprofiel in te sluiten, profiel te bewerken of aangepast wachtwoordbeleid te wijzigen in uw web- of app met één pagina.

Opmerking

Deze functie is beschikbaar als openbare preview.

Ingesloten aanmelding voor webtoepassingen

Het element inlineframe <iframe> wordt gebruikt om een document in te sluiten op een HTML5-webpagina. U kunt het iframe-element gebruiken om de aanmeldingsgebruikersinterface van Azure AD B2C rechtstreeks in uw webtoepassing in te sluiten, zoals wordt weergegeven in het volgende voorbeeld:

Inloggen met zwevende DIV-ervaring

Houd bij het gebruik van iframe rekening met het volgende:

  • Ingesloten registratie of aanmelding ondersteunt alleen lokale accounts. De meeste sociale identiteitsproviders (bijvoorbeeld Google en Facebook) blokkeren hun aanmeldingspagina's zodat deze niet in iframes kunnen worden weergegeven.
  • Bepaalde browsers, zoals Safari of Chrome in de incognitomodus, bekijken Azure AD B2C-sessiecookies binnen een iframe als cookies van derden. Deze browsers kunnen deze cookies blokkeren of wissen, wat kan leiden tot een minder dan optimale gebruikerservaring. Om dit probleem te voorkomen, moet u ervoor zorgen dat uw toepassingsdomein en uw Azure AD B2C-domein dezelfde oorsprong hebben. Als u dezelfde oorsprong wilt gebruiken, schakelt u aangepaste domeinen in voor de Azure AD B2C-tenant en configureert u vervolgens uw web-app met dezelfde oorsprong. Een toepassing die wordt gehost op 'https://app.contoso.com' heeft bijvoorbeeld dezelfde oorsprong als Azure AD B2C die wordt uitgevoerd op 'https://login.contoso.com'.

Vereiste voorwaarden

Uw beleid configureren

Als u wilt dat uw Azure AD B2C-gebruikersinterface kan worden ingesloten in een iframe, moeten inhoudsbeveiligingsbeleid Content-Security-Policy en frameopties X-Frame-Options worden opgenomen in de Azure AD B2C HTTP-antwoordheaders. Met deze headers kan de Azure AD B2C-gebruikersinterface worden uitgevoerd onder de domeinnaam van uw toepassing.

Voeg een JourneyFraming-element toe in het RelyingParty-element . Het element UserJourneyBehaviors moet de DefaultUserJourney volgen. Het element UserJourneyBehaviors moet er als volgt uitzien:

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

Het kenmerk Sources bevat de URI van uw webtoepassing. Voeg een spatie toe tussen URI's. Elke URI moet voldoen aan de volgende vereisten:

  • Uw toepassing moet de URI vertrouwen en eigenaar zijn van de URI.
  • De URI moet het https-schema gebruiken.
  • De volledige URI van de web-app moet worden opgegeven. Wildcards worden niet ondersteund.
  • Met het element JourneyFraming kunnen site-URL's met een domein van twee tot zeven tekens (TLD) alleen worden afgestemd op veelgebruikte TLD's.

Daarnaast raden we u aan om te voorkomen dat uw eigen domeinnaam in een iframe wordt ingesloten door respectievelijk de Content-Security-Policy en X-Frame-Options headers op uw toepassingspagina's in te stellen. Deze techniek vermindert beveiligingsproblemen met betrekking tot oudere browsers die verband houden met geneste iframes.

Gebruikersinterface voor beleid aanpassen

Met azure AD B2C-gebruikersinterfaceaanpassing hebt u bijna volledige controle over de HTML- en CSS-inhoud die u uw gebruikers presenteert. Volg de stappen voor het aanpassen van een HTML-pagina met behulp van inhoudsdefinities. Als u de Azure AD B2C-gebruikersinterface in de iframegrootte wilt aanpassen, geeft u een schone HTML-pagina op zonder achtergrond en extra spaties.

Met de volgende CSS-code worden de HTML-elementen van Azure AD B2C verborgen en wordt de grootte van het deelvenster aangepast om het iframe te vullen.

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

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

In sommige gevallen wilt u mogelijk uw toepassing informeren over de Azure AD B2C-pagina die momenteel wordt gepresenteerd. Wanneer een gebruiker bijvoorbeeld de registratieoptie selecteert, wilt u mogelijk dat de toepassing reageert door de koppelingen voor aanmelding met een sociaal account te verbergen of de grootte van het iframe aan te passen.

Als u uw toepassing op de hoogte wilt stellen van de huidige Azure AD B2C-pagina, schakelt u uw beleid voor JavaScript in en gebruikt u HTML5 om berichten te posten. Met de volgende JavaScript-code wordt een bericht naar de app verzonden met signUp:

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

Een webtoepassing configureren

Wanneer een gebruiker de aanmeldingsknop selecteert, genereert de web-app een autorisatieaanvraag waarmee de gebruiker naar de aanmeldingservaring van Azure AD B2C wordt verzonden. Nadat de aanmelding is voltooid, retourneert Azure AD B2C een id-token of autorisatiecode naar de geconfigureerde omleidings-URI in uw toepassing.

Ter ondersteuning van ingesloten aanmelding verwijst het iframe-kenmerk src naar de aanmeldingscontroller, zoals /account/SignUpSignIn, waarmee de autorisatieaanvraag wordt gegenereerd en de gebruiker wordt omgeleid naar Azure AD B2C-beleid.

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

Nadat de toepassing het id-token heeft ontvangen en gevalideerd, wordt de autorisatiestroom voltooid en wordt de gebruiker herkend en vertrouwd. Omdat de autorisatiestroom binnen het iframe plaatsvindt, moet u de hoofdpagina opnieuw laden. Nadat de pagina opnieuw is geladen, verandert de aanmeldingsknop in 'afmelden' en wordt de gebruikersnaam weergegeven in de gebruikersinterface.

In het volgende voorbeeld ziet u hoe de omleidings-URI voor aanmelding de hoofdpagina kan vernieuwen:

window.top.location.reload();

Aanmelden met sociale accounts toevoegen aan een web-app

Sociale id-providers blokkeren hun aanmeldingspagina's tegen weergave in inlineframes. U kunt een afzonderlijk beleid gebruiken voor sociale accounts of u kunt één beleid gebruiken voor zowel aanmelden als registreren met lokale en sociale accounts. Vervolgens kunt u de domain_hint querytekenreeksparameter gebruiken. Met de parameter domeinhint wordt de gebruiker rechtstreeks naar de aanmeldingspagina van de sociale id-provider geleid.

Voeg in uw toepassing de aanmelding toe met knoppen voor sociale accounts. Wanneer een gebruiker op een van de knoppen voor sociale accounts klikt, moet de beleidsnaam worden gewijzigd of de domeinhint-parameter worden ingesteld.

De omleidings-URI kan dezelfde omleidings-URI zijn die door het iframe wordt gebruikt. U kunt het opnieuw laden van de pagina overslaan.

Een toepassing met één pagina configureren

Voor een toepassing met één pagina hebt u ook een tweede HTML-pagina voor aanmelding nodig die in het iframe wordt geladen. Deze aanmeldingspagina fungeert als host voor de verificatiebibliotheekcode waarmee de autorisatiecode wordt gegenereerd en het token wordt geretourneerd.

Wanneer de toepassing met één pagina het toegangstoken nodig heeft, gebruikt u JavaScript-code om het toegangstoken op te halen uit het iframe en het object dat het bevat.

Opmerking

Het uitvoeren van MSAL 2.0 in een iframe wordt momenteel niet ondersteund.

De volgende code is een voorbeeld dat wordt uitgevoerd op de hoofdpagina en de JavaScript-code van een iframe aanroept:

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

Volgende stappen

Zie de volgende gerelateerde artikelen:

  • Last updated on