Dela via

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

Viktigt!

Från och med den 1 maj 2025 är Azure AD B2C inte längre tillgängligt att köpa för nya kunder. Läs mer i våra vanliga frågor och svar.

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. Från 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 klient-ID GUID. Du kan till exempel ändra https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ till https://account.contosobank.co.uk/<tenant ID GUID>/.

Följ anvisningarna i Aktivera anpassade domäner om du vill använda en anpassad domän och ditt klient-ID i autentiserings-URL:en. Hitta konfigurationsobjektet för Microsoft Authentication Library (MSAL) och ändra myndigheter och kändaAuthorities så att de använder ditt anpassade domännamn och klient-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 inloggningsresa kan din app rikta in sig på en specifik användare. När en app riktar sig mot 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. Använder du en anpassad princip, lägg till det nödvändiga indata som beskrivs 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);

Avmarkera en identitetsprovider i förväg

Om du har konfigurerat inloggningsresan för ditt program så att det innehåller sociala konton, till exempel Facebook, LinkedIn eller Google, kan du ange parametern domain_hint . Den här frågeparametern ger ett tips till 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 Facebooks inloggningssida.

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 exempel på användningsfall är när du vill ändra sidinnehållet dynamiskt.

Gör följande för att skicka en anpassad frågesträngsparameter:

  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 partprogram 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.

Gör följande om du vill inkludera ett ID-tokentips i autentiseringsbegäran:

  1. I din anpassade policy definierar du en teknisk profil för ID-tokentips.

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

Säkra omdirigeringen för 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 ett giltigt id_token_hint skickas och Kräv ID-token i utloggningsbegäranden är aktiverat verifierar 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 MSAL-funktionen handleResponse parsar du id_token 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 Lägg till parametern id_token_hint i objektet logoutRequest i funktionen.

    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 programregistreringens svars-URL.

Aktivera enkel utloggning

Enkel utloggning i Azure AD B2C använder openid connect-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 azure AD B2C-utloggningssidan i en dold Iframe. Iframes gör HTTP-begäranden till alla slutpunkter för utloggning på 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 inom 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.