Inbäddad registrering eller inloggning

  • Artikel

Innan du börjar använder du väljaren Välj en principtyp för att välja den typ av princip som du konfigurerar. Azure Active Directory B2C erbjuder två metoder för att definiera hur användare interagerar med dina program: via fördefinierade användarflöden eller genom fullständigt konfigurerbara anpassade principer. De steg som krävs i den här artikeln skiljer sig åt för varje metod.

Den här funktionen är endast tillgänglig för anpassade principer. För installationssteg väljer du Anpassad princip i föregående väljare.

För en enklare registrerings- eller inloggningsupplevelse kan du undvika att omdirigera användare till en separat registrerings- eller inloggningssida eller generera ett popup-fönster. Genom att använda html-elementet infogad ram <iframe> kan du bädda in användargränssnittet för Azure AD B2C-inloggning direkt i webbappen.

Dricks

Använd HTML-elementet <iframe> för att bädda in registrering eller inloggning, redigera profil eller ändra anpassade lösenordsprinciper i webb- eller ensidesappen.

Kommentar

Den här funktionen är en allmänt tillgänglig förhandsversion.

Inbäddad inloggning för webbprogram

Elementet <iframe> infogad ram används för att bädda in ett dokument på en HTML5-webbsida. Du kan använda iframe-elementet för att bädda in användargränssnittet för Azure AD B2C-inloggning direkt i webbappen, som du ser i följande exempel:

Login with hovering DIV experience

Tänk på följande när du använder iframe:

  • Inbäddad registrering eller inloggning stöder endast lokala konton. De flesta sociala identitetsprovidrar (till exempel Google och Facebook) blockerar sina inloggningssidor från att återges i infogade ramar.
  • Vissa webbläsare, till exempel Safari eller Chrome i inkognitoläge, visar Azure AD B2C-sessionscookies inom en iframe som cookies från tredje part. Dessa webbläsare kan blockera eller rensa dessa cookies, vilket kan leda till en mindre än optimal användarupplevelse. Om du vill förhindra det här problemet kontrollerar du att ditt programdomännamn och din Azure AD B2C-domän har samma ursprung. Om du vill använda samma ursprung aktiverar du anpassade domäner för Azure AD B2C-klientorganisationen och konfigurerar sedan webbappen med samma ursprung. Ett program som finns på harhttps://app.contoso.com till exempel samma ursprung som Azure AD B2C som körs på .https://login.contoso.com

Förutsättningar

Konfigurera din princip

För att azure AD B2C-användargränssnittet ska kunna bäddas in i en iframe måste en innehållssäkerhetsprincip Content-Security-Policy och ramalternativ X-Frame-Options ingå i Http-svarshuvudena för Azure AD B2C. Med de här rubrikerna kan Azure AD B2C-användargränssnittet köras under ditt programdomännamn.

Lägg till ett JourneyFraming-element i elementet RelyingParty . Elementet UserJourneyBehaviors måste följa DefaultUserJourney. Elementet UserJourneyBehaviors bör se ut så här:

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

Attributet Källor innehåller URI:n för ditt webbprogram. Lägg till ett blanksteg mellan URI:er. Varje URI måste uppfylla följande krav:

  • Ditt program måste lita på och äga URI:n.
  • URI:n måste använda https-schemat.
  • Webbappens fullständiga URI måste anges. Jokertecken stöds inte.
  • JourneyFraming-elementet tillåter endast plats-URL:er med en toppdomän på två till sju tecken (TLD) så att de överensstämmer med vanliga TLD:er.

Dessutom rekommenderar vi att du även blockerar ditt eget domännamn från att bäddas in i en iframe genom att ange rubrikerna Content-Security-Policy och X-Frame-Options på programsidorna. Den här tekniken minskar säkerhetsproblemen i äldre webbläsare som rör kapslad inbäddning av iframes.

Justera användargränssnittet för principen

Med azure AD B2C-anpassning av användargränssnittet har du nästan fullständig kontroll över HTML- och CSS-innehållet som du presenterar dina användare. Följ stegen för att anpassa en HTML-sida med hjälp av innehållsdefinitioner. Om du vill anpassa Azure AD B2C-användargränssnittet till iframe-storleken ger du en ren HTML-sida utan bakgrund och extra blanksteg.

Följande CSS-kod döljer Azure AD B2C HTML-elementen och justerar panelens storlek så att den fyller iframe-rutan.

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

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

I vissa fall kanske du vill meddela ditt program om den Azure AD B2C-sida som visas för närvarande. När en användare till exempel väljer registreringsalternativet kanske du vill att programmet ska svara genom att dölja länkarna för att logga in med ett socialt konto eller justera iframe-storleken.

Om du vill meddela ditt program om den aktuella Azure AD B2C-sidan aktiverar du din princip för JavaScript och använder sedan HTML5 för att publicera meddelanden. Följande JavaScript-kod skickar ett inläggsmeddelande till appen med signUp:

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

Konfigurera ett webbprogram

När en användare väljer inloggningsknappen genererar webbappen en auktoriseringsbegäran som tar användaren till Azure AD B2C-inloggning. När inloggningen är klar returnerar Azure AD B2C en ID-token eller auktoriseringskod till den konfigurerade omdirigerings-URI:n i ditt program.

För att stödja inbäddad inloggning pekar iframe-attributet src på inloggningskontrollanten, till exempel /account/SignUpSignIn, som genererar auktoriseringsbegäran och omdirigerar användaren till Azure AD B2C-principen.

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

När programmet har fått och verifierat ID-token slutför det auktoriseringsflödet och identifierar och litar på användaren. Eftersom auktoriseringsflödet sker i iframe måste du läsa in huvudsidan igen. När sidan har lästs in igen ändras inloggningsknappen till "logga ut" och användarnamnet visas i användargränssnittet.

I följande exempel visas hur omdirigerings-URI:n för inloggning kan uppdatera huvudsidan:

window.top.location.reload();

Lägga till inloggning med sociala konton i en webbapp

Sociala identitetsprovidrar blockerar sina inloggningssidor från att återges i infogade ramar. Du kan använda en separat princip för sociala konton, eller så kan du använda en enda princip för både inloggning och registrering med lokala och sociala konton. Sedan kan du använda frågesträngsparametern domain_hint . Parametern för domäntips tar användaren direkt till den sociala identitetsproviderns inloggningssida.

Lägg till inloggningen med sociala kontoknappar i ditt program. När en användare klickar på någon av knapparna för socialt konto måste kontrollen ändra principnamnet eller ange parametern domäntips.

Omdirigerings-URI:n kan vara samma omdirigerings-URI som används av iframe. Du kan hoppa över att läsa in sidan igen.

Konfigurera ett ensidesprogram

För ett ensidesprogram behöver du också en andra HTML-sida för inloggning som läses in i iframe. Den här inloggningssidan är värd för autentiseringsbibliotekskoden som genererar auktoriseringskoden och returnerar token.

När ensidesprogrammet behöver åtkomsttoken använder du JavaScript-kod för att hämta åtkomsttoken från iframe och objektet som innehåller den.

Kommentar

Det finns för närvarande inte stöd för att köra MSAL 2.0 i en iframe.

Följande kod är ett exempel som körs på huvudsidan och anropar en iframe JavaScript-kod:

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

Nästa steg

Se följande relaterade artiklar: