Megosztás a következőn keresztül:

Hitelesítési beállítások konfigurálása Angular-alkalmazásokban az Azure Active Directory B2C használatával

Fontos

2025. május 1-jére az Azure AD B2C már nem lesz elérhető az új ügyfelek számára. További információ a GYIK-ben.

Ez a cikk azt ismerteti, hogyan szabhatja testre és fejlesztheti az Azure Active Directory B2C (Azure AD B2C) hitelesítési élményt az Angular egyoldalas alkalmazáshoz (SPA).

Előfeltételek

Ismerkedjen meg az Angular SPA hitelesítésének konfigurálása vagy a hitelesítés engedélyezése a saját Angular SPA-ban című cikkével.

Bejelentkezési és kijelentkezési viselkedés

Az egyoldalas alkalmazás úgy konfigurálható, hogy a felhasználók kétféleképpen jelentkezzenek be: MSAL.js-val.

  • Előugró ablak: A hitelesítés egy előugró ablakban történik, és az alkalmazás állapota megmarad. Ezt a módszert akkor használja, ha nem szeretné, hogy a felhasználók a hitelesítés során elmozduljanak az alkalmazás oldaláról. Az Internet Explorer előugró ablakaival kapcsolatban azonban ismert problémák merülnek fel.
    • Ha előugró ablakokkal szeretne bejelentkezni az osztályba src/app/app.component.ts , használja a metódust loginPopup .
    • Az src/app/app.module.ts osztályban állítsa a interactionType attribútumot a következőre: InteractionType.Popup.
    • Ha előugró ablakokkal szeretne kijelentkezni, használja a metódust az src/app/app.component.tslogoutPopup osztályban. Úgy is konfigurálhatja logoutPopup, hogy a főablakot egy másik oldalra irányítsa át, például a kezdőlapra vagy a bejelentkezési oldalra, a kérés részeként mainWindowRedirectUri átadva, miután a kijelentkezés befejeződött.
  • Átirányítás: A rendszer átirányítja a felhasználót az Azure AD B2C-be a hitelesítési folyamat befejezéséhez. Ezt a módszert akkor használja, ha a felhasználók böngészőkorlátokkal vagy szabályzatokkal rendelkeznek, amelyekben az előugró ablakok le vannak tiltva.
    • Ha átirányítással szeretne bejelentkezni, használja a metódust az src/app/app.component.tsloginRedirect osztályban.
    • Az src/app/app.module.ts osztályban állítsa a interactionType attribútumot a következőre: InteractionType.Redirect.
    • Ha átirányítással szeretne kijelentkezni, az src/app/app.component.ts osztályban használja a logoutRedirect metódust. Konfigurálja azt az URI-t, amelyhez a kijelentkezés után át kell irányítania, a postLogoutRedirectUri beállítással. Ezt az URI-t átirányítási URI-ként kell hozzáadnia az alkalmazásregisztrációhoz.

Az alábbi minta bemutatja, hogyan lehet bejelentkezni és kijelentkezni:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

Az MSAL Angular-kódtár három bejelentkezési folyamatból áll: interaktív bejelentkezés (ahol a felhasználó kiválasztja a bejelentkezési gombot), az MSAL Guard és az MSAL Interceptor. Az MSAL Guard és az MSAL Interceptor konfigurációi akkor lépnek érvénybe, amikor egy felhasználó érvényes hozzáférési jogkivonat nélkül próbál hozzáférni egy védett erőforráshoz. Ilyen esetekben az MSAL-kódtár kényszeríti a felhasználót a bejelentkezésre.

Az alábbi minták bemutatják, hogyan konfigurálható az MSAL Guard és az MSAL Interceptor előugró ablakkal vagy átirányítással való bejelentkezéshez:

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

A bejelentkezési név előzetes feltöltése

A bejelentkezési felhasználói folyamat során előfordulhat, hogy az alkalmazás egy adott felhasználót céloz meg. Amikor egy alkalmazás egy felhasználót céloz meg, az engedélyezési kérelemben megadhatja a login_hint lekérdezési paramétert a felhasználó bejelentkezési nevével. Az Azure AD B2C automatikusan kitölti a bejelentkezési nevet, és a felhasználónak csak a jelszót kell megadnia.

A bejelentkezési név előzetes feltöltéséhez tegye a következőket:

  1. Ha egyéni szabályzatot használ, adja hozzá a szükséges bemeneti jogcímet a közvetlen bejelentkezés beállítása című cikkben leírtak szerint.
  2. Használjon meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot, vagy hozzon létre egyet.
  3. Állítsa be az loginHint attribútumot a megfelelő bejelentkezési tippdel.

Az alábbi kódrészletek bemutatják, hogyan lehet átadni a bejelentkezési tipp paramétert. Attribútumértékként használják bob@contoso.com őket.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

Identitásszolgáltató előzetes kijelölése

Ha úgy konfigurálta az alkalmazás bejelentkezési útját, hogy közösségi fiókokat , például Facebookot, LinkedIn-t vagy Google-t is tartalmazzon, megadhatja a paramétert domain_hint . Ez a lekérdezési paraméter az Azure AD B2C-nek a bejelentkezéshez használandó közösségi identitásszolgáltatóra vonatkozó tippet nyújt. Ha például az alkalmazás megadja domain_hint=facebook.com, a bejelentkezési folyamat közvetlenül a Facebook bejelentkezési oldalára kerül.

A felhasználók külső identitásszolgáltatóhoz való átirányításához tegye a következőket:

  1. Ellenőrizze a külső identitásszolgáltató tartománynevét. További információ: Bejelentkezés átirányítása közösségi szolgáltatóhoz.
  2. Használjon meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot, vagy hozzon létre egyet.
  3. Állítsa be az domainHint attribútumot a megfelelő tartománymutatóval.

Az alábbi kódrészletek bemutatják, hogyan lehet átadni a tartomány-tipp paramétert. Attribútumértékként használják facebook.com őket.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

A felhasználói felület nyelvének megadása

Az Azure AD B2C nyelvi testreszabása lehetővé teszi a felhasználói folyamat számára, hogy az ügyfelek igényeinek megfelelően különféle nyelveket fogadjon el. További információ: Nyelvi testreszabás.

Az előnyben részesített nyelv beállításához tegye a következőket:

  1. Nyelvi testreszabás konfigurálása.
  2. Létező PopupRequest vagy RedirectRequest MSAL konfigurációs objektum használata extraQueryParameters attribútumokkal.
  3. Adja hozzá a ui_locales paramétert a megfelelő nyelvi kóddal az extraQueryParameters attribútumokhoz.

Az alábbi kódrészletek bemutatják, hogyan lehet átadni a tartomány-tipp paramétert. Attribútumértékként használják es-es őket.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Egyéni lekérdezési sztringparaméter átadása

Egyéni szabályzatokkal egyéni lekérdezési sztringparamétert adhat át. Jó példa erre, ha dinamikusan szeretné módosítani a lap tartalmát.

Egyéni lekérdezési sztringparaméter átadásához tegye a következőket:

  1. Konfigurálja a ContentDefinitionParameters elemet.
  2. Létező PopupRequest vagy RedirectRequest MSAL konfigurációs objektum használata extraQueryParameters attribútumokkal.
  3. Adja hozzá az egyéni lekérdezési sztring paramétert, például campaignId. Adja meg a paraméter értékét.

Az alábbi kódrészletek bemutatják, hogyan adhat át egyéni lekérdezési sztringparamétert. Attribútumértékként használják germany-promotion őket.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Azonosító token javaslat átadása

A függő entitásalkalmazások az OAuth2 engedélyezési kérelem részeként küldhetnek bejövő JSON-webjogkivonatot (JWT). A bejövő jogkivonat egy jelzés a felhasználóra vagy az engedélyezési kérelemre vonatkozóan. Az Azure AD B2C ellenőrzi a jogkivonatot, majd kinyeri a jogcímet.

Azonosító token javaslat hozzáadásához a hitelesítési kéréshez, tegye a következőket:

  1. Az egyéni szabályzatban adja meg egy azonosító jogkivonat-tipp technikai profilját.
  2. Létező PopupRequest vagy RedirectRequest MSAL konfigurációs objektum használata extraQueryParameters attribútumokkal.
  3. Az id_token_hint paramétert adja hozzá az azonosító jogkivonatot tároló megfelelő változóhoz.

Az alábbi kódrészletek bemutatják, hogyan definiálhat azonosító token tippet.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

Egyéni tartomány használata

Egyéni domain használatával teljesen testre szabhatja a hitelesítési URL-t. Felhasználói szempontból a felhasználók a hitelesítési folyamat során a tartományon maradnak, ahelyett, hogy az Azure AD B2C b2clogin.com tartománynévre irányítanák át őket.

Ha az URL-címben el szeretné távolítani a "b2c" kifejezésre mutató összes hivatkozást, a B2C-bérlő nevét is lecserélheti contoso.onmicrosoft.com a hitelesítési kérelem URL-címében a bérlőazonosító GUID azonosítójával. Például átválthatja a https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ elemet a https://account.contosobank.co.uk/<tenant ID GUID>/ elemre.

Ha az egyéni tartományt szeretné használni a bérlőazonosítójához a hitelesítési URL-címben, kövesse az Egyéni tartományok engedélyezése című útmutatót. Nyissa meg az src/app/auth-config.ts MSAL konfigurációs objektumot, és módosítsa a authorities és knownAuthorities, hogy azok az egyéni domainnevet és a bérlői azonosítót használják.

Az alábbi JavaScript az MSAL konfigurációs objektumot jeleníti meg a módosítás előtt:

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

Az alábbi JavaScript az MSAL konfigurációs objektumot jeleníti meg a módosítás után:

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

Naplózás konfigurálása

Az MSAL-kódtár naplóüzeneteket hoz létre, amelyek segíthetnek a problémák diagnosztizálásában. Az alkalmazás konfigurálhatja a naplózást. Az alkalmazás egyéni vezérlést is biztosít a részletesség és a személyes és szervezeti adatok naplózása felett.

Javasoljuk, hogy hozzon létre egy MSAL-naplózási visszahívást, és biztosítson módot a felhasználók számára, hogy hitelesítési problémák esetén küldjenek naplókat. Az MSAL az alábbi naplózási szinteket biztosítja:

  • Hiba: Valami rosszul sikerült, és hiba keletkezett. Ez a szint a problémák hibakeresésére és azonosítására szolgál.
  • Figyelmeztetés: Nem feltétlenül történt hiba vagy meghibásodás, de az információk a diagnosztika és problémák pontos azonosítására szolgálnak.
  • Információ: Az MSAL naplózza azokat az eseményeket, amelyek információs célokat szolgálnak, és nem feltétlenül hibakeresésre szolgálnak.
  • Részletes: Ez az alapértelmezett szint. Az MSAL naplózza a kódtár viselkedésének teljes részleteit.

Alapértelmezés szerint az MSAL-naplózó nem rögzít személyes vagy szervezeti adatokat. A kódtár lehetővé teszi a személyes és szervezeti adatok naplózását, ha úgy dönt, hogy ezt teszi.

Az Angular-naplózás konfigurálásához az src/app/auth-config.ts konfigurálja a következő kulcsokat:

  • loggerCallback a naplózó visszahívási függvénye.
  • logLevel lehetővé teszi a naplózási szint megadását. Lehetséges értékek: Error, Warning, Infoés Verbose.
  • piiLoggingEnabled lehetővé teszi a személyes adatok bevitelét. Lehetséges értékek: true vagy false.

Az alábbi kódrészlet bemutatja, hogyan konfigurálható az MSAL-naplózás:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Következő lépések