Share via

Konfigurera autentiseringsalternativ i ett ensidesprogram med hjälp av Azure AD B2C

  • Artikel

Den här artikeln beskriver hur du anpassar och förbättrar autentiseringsupplevelsen för Azure Active Directory B2C (Azure AD B2C) för ditt ensidesprogram (SPA).

Innan du börjar bör du bekanta dig med följande artikel: Konfigurera autentisering i ett exempelwebbprogram.

Använda en anpassad domän

Genom att använda en anpassad domän kan du helt märka autentiserings-URL:en. Ur ett användarperspektiv finns användarna kvar på din domän under autentiseringsprocessen, i stället för att omdirigeras till Azure AD B2C b2clogin.com domännamn.

Om du vill ta bort alla referenser till "b2c" i URL:en kan du också ersätta ditt B2C-klientnamn, contoso.onmicrosoft.com, i URL:en för autentiseringsbegäran med ditt klientorganisations-ID GUID. Du kan till exempel ändra https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ till https://account.contosobank.co.uk/<tenant ID GUID>/.

Om du vill använda en anpassad domän och ditt klientorganisations-ID i autentiserings-URL:en följer du anvisningarna i Aktivera anpassade domäner. Leta reda på konfigurationsobjektet för Microsoft Authentication Library (MSAL) och ändra myndigheter och kändaAuthorities så att de använder ditt anpassade domännamn och klientorganisations-ID.

Följande JavaScript-kod visar MSAL-konfigurationsobjektet före ändringen:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

Följande JavaScript-kod visar MSAL-konfigurationsobjektet efter ändringen:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Fyll i inloggningsnamnet i förväg

Under en inloggningsanvändarresa kan din app riktas mot en viss användare. När en app riktar sig till en användare kan den i auktoriseringsbegäran login_hint ange frågeparametern med användarens inloggningsnamn. Azure AD B2C fyller automatiskt i inloggningsnamnet och användaren behöver bara ange lösenordet.

Gör följande för att fylla i inloggningsnamnet i förväg:

  1. Om du använder en anpassad princip lägger du till det inkommande anspråk som krävs enligt beskrivningen i Konfigurera direkt inloggning.

  2. Skapa ett -objekt för att lagra login_hint och skicka det här objektet till metoden MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Förmarkera en identitetsprovider

Om du har konfigurerat inloggningsresan för ditt program för att inkludera sociala konton, till exempel Facebook, LinkedIn eller Google, kan du ange parametern domain_hint . Den här frågeparametern ger ett tips om Azure AD B2C om den sociala identitetsprovider som ska användas för inloggning. Om programmet till exempel anger går inloggningsflödet domain_hint=facebook.comdirekt till Facebook-inloggningssidan.

Om du vill omdirigera användare till en extern identitetsprovider gör du följande:

  1. Kontrollera domännamnet för din externa identitetsprovider. Mer information finns i Omdirigera inloggning till en social provider.

  2. Skapa ett -objekt för att lagra extraQueryParameters och skicka det här objektet till metoden MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

Ange användargränssnittsspråket

Språkanpassning i Azure AD B2C gör att ditt användarflöde kan hantera en mängd olika språk som passar dina kunders behov. Mer information finns i Språkanpassning.

Gör följande för att ange önskat språk:

  1. Konfigurera språkanpassning.

  2. Skapa ett -objekt för att lagra extraQueryParameters och skicka det här objektet till metoden MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

Skicka en anpassad frågesträngsparameter

Med anpassade principer kan du skicka en anpassad frågesträngsparameter. Ett bra användningsexempel är när du vill ändra sidinnehållet dynamiskt.

Om du vill skicka en anpassad frågesträngsparameter gör du följande:

  1. Konfigurera elementet ContentDefinitionParameters .

  2. Skapa ett -objekt för att lagra extraQueryParameters och skicka det här objektet till metoden MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

Skicka ett ID-tokentips

Ett förlitande part-program kan skicka en inkommande JSON-webbtoken (JWT) som en del av OAuth2-auktoriseringsbegäran. Den inkommande token är ett tips om användaren eller auktoriseringsbegäran. Azure AD B2C verifierar token och extraherar sedan anspråket.

Om du vill inkludera ett tokentips för ID i autentiseringsbegäran gör du följande:

  1. Definiera en teknisk profil för ID-tokentips i din anpassade princip.

  2. Skapa ett -objekt för att lagra extraQueryParameters och skicka det här objektet till metoden MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Skydda omdirigeringen av utloggning

Efter utloggningen omdirigeras användaren till den URI som anges i parametern post_logout_redirect_uri , oavsett vilka svars-URL:er som har angetts för programmet. Men om en giltig id_token_hint skickas och Kräv ID-token i utloggningsbegäranden är aktiverad, kontrollerar Azure AD B2C att värdet post_logout_redirect_uri för matchar en av programmets konfigurerade omdirigerings-URI:er innan omdirigeringen utförs. Om ingen matchande svars-URL har konfigurerats för programmet visas ett felmeddelande och användaren omdirigeras inte.

Följ stegen nedan för att stödja en säker omdirigerings-URI för utloggning:

  1. Skapa en globalt tillgänglig variabel för att lagra id_token.

    let id_token = "";

  2. I funktionen MSAL handleResponse parsar id_token du från - authenticationResult objektet till variabeln id_token .

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. signOut I funktionen lägger du till parametern id_token_hint i logoutRequest-objektet.

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

I exemplet ovan är post_logout_redirect_uri som skickas till utloggningsbegäran i formatet: https://your-app.com/. Den här URL:en måste läggas till i svars-URL:en för programregistreringen.

Aktivera enkel utloggning

Enkel utloggning i Azure AD B2C använder OpenId Connect front-channel-utloggning för att göra utloggningsbegäranden till alla program som användaren har loggat in på via Azure AD B2C.

Dessa utloggningsbegäranden görs från utloggningssidan för Azure AD B2C i en dold Iframe. Iframes gör HTTP-begäranden till alla utloggningsslutpunkter för frontkanalen som registrerats för de appar som Azure AD B2C har registrerat som inloggade.

Utloggningsslutpunkten för varje program måste anropa metoden MSAL logout(). Du måste också uttryckligen konfigurera MSAL att köras i en Iframe i det här scenariot genom att ange allowRedirectInIframe till true.

Följande kodexempel anger allowRedirectInIframe till true:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Nästa steg

Läs mer om MSAL.js konfigurationsalternativ.