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

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

  • Cikk

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

Előfeltételek

Ismerkedjen meg a Hitelesítés konfigurálása Angular SPA-ban vagy A hitelesítés engedélyezése a saját Angular SPA-ban című cikkben.

Bejelentkezési és kijelentkezési viselkedés

Az egyoldalas alkalmazást kétféleképpen konfigurálhatja úgy, hogy MSAL.js felhasználókat jelentkezzen be:

  • Előugró ablak: A hitelesítés 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. Vannak azonban ismert problémák az Internet Explorer előugró ablakaival kapcsolatban.
    • Ha előugró ablakokkal szeretne bejelentkezni, használja a metódust a src/app/app.component.tsloginPopup osztályban.
    • A osztályban src/app/app.module.ts állítsa az attribútumot értékre interactionTypeInteractionType.Popup.
    • Ha előugró ablakokkal szeretne kijelentkezni, használja a metódust a src/app/app.component.tslogoutPopup osztályban. Azt is beállíthatja logoutPopup , hogy a főablakot átirányítsa egy másik lapra, például a kezdőlapra vagy a bejelentkezési oldalra, miután a kijelentkezés befejeződött, a kérés részeként történő átadással mainWindowRedirectUri .
  • Átirányítás: A rendszer átirányítja a felhasználót 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átozásokkal vagy szabályzatokkal rendelkeznek, amelyekben az előugró ablakok le vannak tiltva.
    • Átirányítással való bejelentkezéshez a src/app/app.component.ts osztályban használja a metódust loginRedirect .
    • A osztályban src/app/app.module.ts állítsa az attribútumot értékre interactionTypeInteractionType.Redirect.
    • Ha átirányítással szeretne kijelentkezni, használja a metódust a src/app/app.component.tslogoutRedirect osztályban. Konfigurálja azt az URI-t, amelyre a kijelentkezés után át kell irányítania. Ehhez állítsa be a következőt postLogoutRedirectUri: . 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 jelentkezhet be és jelentkezhet ki:

//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 folyamattal rendelkezik: 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ója akkor lép érvénybe, ha 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 történő 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 megcélz egy felhasználót, az engedélyezési kérelemben megadhatja a login_hint lekérdezési paramétert a felhasználó bejelentkezési nevével. 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ű témakörben leírtak szerint.
  2. Hozzon létre vagy használjon egy meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot.
  3. Állítsa be az loginHint attribútumot a megfelelő bejelentkezési tipptel.

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 kiválasztása

Ha úgy konfigurálta az alkalmazás bejelentkezési útját, hogy közösségi fiókokat ( például Facebook, LinkedIn vagy Google) tartalmazzon, megadhatja a paramétert domain_hint . Ez a lekérdezési paraméter a B2C Azure AD a bejelentkezéshez használni kívánt közösségi identitásszolgáltatóra vonatkozó tippet. 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. Hozzon létre vagy használjon egy meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot.
  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ánymutató 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

A Azure AD B2C nyelvi testreszabása lehetővé teszi, hogy a felhasználói folyamat 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. Hozzon létre vagy használjon egy meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot attribútumokkal extraQueryParameters .
  3. Adja hozzá a ui_locales paramétert a megfelelő nyelvkóddal az extraQueryParameters attribútumokhoz.

Az alábbi kódrészletek bemutatják, hogyan lehet átadni a tartománymutató 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 sztring paraméterének á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. Hozzon létre vagy használjon egy meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot attribútumokkal extraQueryParameters .
  3. Adja hozzá az egyéni lekérdezési sztring paramétert, például campaignId: . Állítsa be a paraméter értékét.

Az alábbi kódrészletek bemutatják, hogyan lehet átadni egy 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ó jogkivonat-emlékeztető átadása

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

Ha azonosítótoken-emlékeztetőt szeretne hozzáadni a hitelesítési kérelemhez, tegye a következőket:

  1. Az egyéni szabályzatban adja meg egy azonosítótoken-tipp technikai profilját.
  2. Hozzon létre vagy használjon egy meglévő PopupRequest vagy RedirectRequest MSAL konfigurációs objektumot attribútumokkal extraQueryParameters .
  3. Adja hozzá a paramétert id_token_hint az azonosító jogkivonatot tároló megfelelő változóval.

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 tartomány használatával teljes mértékben megadhatja a hitelesítési URL-címet. Felhasználói szempontból a felhasználók a hitelesítési folyamat során a tartományon maradnak, ahelyett, hogy átirányítanák a Azure AD B2C b2clogin.com tartománynévre.

Ha az URL-címben el szeretné távolítani a "b2c" kifejezésre mutató összes hivatkozást, lecserélheti a B2C-bérlő nevét (contoso.onmicrosoft.com) a hitelesítési kérelem URL-címében a bérlőazonosító GUID azonosítójára. Módosíthatja például https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ a következőre: https://account.contosobank.co.uk/<tenant ID GUID>/.

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

Az alábbi JavaScript az MSAL konfigurációs objektumot mutatja 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"],
      ...
    },
  ...
}

A következő JavaScript az MSAL konfigurációs objektumot mutatja 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észletek szintjéről, valamint arról, hogy a rendszer naplózza-e a személyes és szervezeti adatokat.

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 a naplók elküldésére hitelesítési problémák esetén. Az MSAL az alábbi naplózási szinteket biztosítja:

  • Hiba: Hiba történt, és hiba történt. 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 hiba, de az információk diagnosztikai és kitűzési problémákra szolgálnak.
  • Információ: Az MSAL olyan eseményeket naplóz, amelyek információs célokra 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.

Angular naplózás konfigurálásához az src/app/auth-config.ts fájlban 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