Ingesloten registratie- of aanmeldingservaring
Voordat u begint, gebruikt u de selector Een beleidstype kiezen 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 configuratiestappen 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 een pop-upvenster genereren. Met behulp van het inline frame <iframe> HTML-element kunt u de Azure AD B2C-aanmeldingsgebruikersinterface rechtstreeks in uw webtoepassing insluiten.
Tip
Gebruik het HTML-element <iframe> om de aangepaste beleidsregels voor registratie of aanmelding, profiel bewerken of wachtwoord wijzigen in te sluiten in uw webapp of app met één pagina.
Notitie
Deze functie is beschikbaar voor openbare preview.
Ingesloten aanmelding voor webtoepassingen
Het inlineframe-element <iframe> wordt gebruikt om een document in te sluiten op een HTML5-webpagina. U kunt het iframe-element gebruiken om de Azure AD B2C-aanmeldingsgebruikersinterface rechtstreeks in uw webtoepassing in te sluiten, zoals wordt weergegeven in het volgende voorbeeld:
Houd bij het gebruik van iframe rekening met het volgende:
- Ingesloten registratie of aanmelding ondersteunt alleen lokale accounts. De meeste sociale id-providers (bijvoorbeeld Google en Facebook) blokkeren dat hun aanmeldingspagina's inlineframes 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 de domeinnaam van uw toepassing en uw Azure AD B2C-domein dezelfde oorsprong hebben. Als u dezelfde oorsprong wilt gebruiken, schakelt u aangepaste domeinen in voor 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'.
Vereisten
- Voer de stappen in Aan de slag met aangepast beleid in Active Directory B2C uit.
- Aangepaste domeinen inschakelen voor uw beleid.
Uw beleid configureren
Als u wilt dat uw Azure AD B2C-gebruikersinterface kan worden ingesloten in een iframe, moeten er een 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. Uw element UserJourneyBehaviors moet eruitzien zoals dit voorbeeld:
<!--
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
<UserJourneyBehaviors>
<JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" />
</UserJourneyBehaviors>
<!--
</RelyingParty> -->
Het kenmerk Bronnen bevat de URI van uw webtoepassing. Voeg een spatie toe tussen URI's. Elke URI moet aan de volgende vereisten voldoen:
- 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. Jokertekens 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 ook te voorkomen dat uw eigen domeinnaam wordt ingesloten in een iframe door respectievelijk de Content-Security-Policy headers X-Frame-Options op uw toepassingspagina's in te stellen. Deze techniek vermindert beveiligingsproblemen met betrekking tot oudere browsers met betrekking tot geneste insluiting van iframes.
Gebruikersinterface van 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 het iframe-formaat wilt aanpassen, biedt u een schone HTML-pagina zonder achtergrond en extra spaties.
Met de volgende CSS-code worden de Azure AD B2C HTML-elementen 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 kunt u uw toepassing informeren over de Azure AD B2C-pagina die momenteel wordt weergegeven. Wanneer een gebruiker bijvoorbeeld de registratieoptie selecteert, wilt u mogelijk dat de toepassing reageert door de koppelingen voor aanmelden met een sociaal account te verbergen of de grootte van het iframe aan te passen.
Als u uw toepassing wilt informeren over de huidige Azure AD B2C-pagina, schakelt u uw beleid voor JavaScript in en gebruikt u HTML5 om berichten te plaatsen. 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 die de gebruiker naar Azure AD B2C-aanmeldingservaring brengt. Nadat de aanmelding is voltooid, retourneert Azure AD B2C een id-token of autorisatiecode naar de geconfigureerde omleidings-URI binnen uw toepassing.
Ter ondersteuning van ingesloten aanmelding wijst 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, wordt de aanmeldingsknop gewijzigd 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 in inlineframes. U kunt een afzonderlijk beleid voor sociale accounts gebruiken 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 knoppen voor aanmelding met sociaal account. Wanneer een gebruiker op een van de knoppen voor een sociaal account klikt, moet het besturingselement de beleidsnaam wijzigen of de parameter domeinhint instellen.
De omleidings-URI kan dezelfde omleidings-URI zijn die door het iframe wordt gebruikt. U kunt het opnieuw laden van de pagina overslaan.
De 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. Op deze aanmeldingspagina wordt de verificatiebibliotheekcode gehost 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.
Notitie
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: