Sdílet prostřednictvím

Konfigurace možností ověřování v aplikaci Angular pomocí Azure Active Directory B2C

  • Článek

Tento článek popisuje, jak můžete přizpůsobit a vylepšit prostředí ověřování Azure Active Directory B2C (Azure AD B2C) pro Angular jednostránkovou aplikaci (SPA).

Požadavky

Seznamte se s článkem Konfigurace ověřování v Angular SPA nebo Povolení ověřování ve vlastním Angular SPA.

Chování při přihlašování a odhlašování

Jednostránkovou aplikaci můžete nakonfigurovat tak, aby přihlašovat uživatele pomocí MSAL.js dvěma způsoby:

  • Automaticky otevírané okno: Ověřování probíhá v automaticky otevíraném okně a stav aplikace se zachová. Tento přístup použijte, pokud nechcete, aby se uživatelé během ověřování vzdálili od stránky aplikace. Existují však známé problémy s automaticky otevíranými okny v Internet Exploreru.
    • Pokud se chcete přihlásit pomocí automaticky otevíraných oken, použijte ve src/app/app.component.ts třídě metodu loginPopup .
    • src/app/app.module.ts Ve třídě nastavte interactionType atribut na InteractionType.Popup.
    • Pokud se chcete odhlásit pomocí automaticky otevíraných oken, použijte ve src/app/app.component.ts třídě metodu logoutPopup . Můžete také nakonfigurovat přesměrování logoutPopup hlavního okna na jinou stránku, jako je domovská stránka nebo přihlašovací stránka, po dokončení odhlášení předáním mainWindowRedirectUri v rámci žádosti.
  • Přesměrování: Uživatel je přesměrován na Azure AD B2C, aby dokončil tok ověřování. Tento přístup použijte, pokud mají uživatelé omezení prohlížeče nebo zásady, ve kterých jsou automaticky otevíraná okna zakázaná.
    • Pokud se chcete přihlásit s přesměrováním, použijte ve src/app/app.component.ts třídě metodu loginRedirect .
    • src/app/app.module.ts Ve třídě nastavte interactionType atribut na InteractionType.Redirect.
    • Pokud se chcete odhlásit s přesměrováním, použijte ve src/app/app.component.ts třídě metodu logoutRedirect . Nakonfigurujte identifikátor URI, na který se má po odhlášení přesměrovat, nastavením postLogoutRedirectUri. Tento identifikátor URI byste měli přidat jako identifikátor URI přesměrování do registrace aplikace.

Následující ukázka ukazuje, jak se přihlásit a odhlásit:

//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: '/',
  });
}

Knihovna MSAL Angular má tři toky přihlašování: interaktivní přihlašování (kde uživatel vybere tlačítko pro přihlášení), MSAL Guard a MSAL Interceptor. Konfigurace MSAL Guard a MSAL Interceptor se projeví, když se uživatel pokusí o přístup k chráněnému prostředku bez platného přístupového tokenu. V takových případech knihovna MSAL vynutí, aby se uživatel přihlásil.

Následující ukázky ukazují, jak nakonfigurovat MSAL Guard a MSAL Interceptor pro přihlášení s automaticky otevíraným oknem nebo přesměrováním:

// 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]
    ])
  })

Předem vyplníte přihlašovací jméno.

Během cesty uživatele přihlášení může vaše aplikace cílit na konkrétního uživatele. Když aplikace cílí na uživatele, může v žádosti o login_hint autorizaci zadat parametr dotazu s přihlašovacím jménem uživatele. Azure AD B2C automaticky vyplní přihlašovací jméno a uživatel musí zadat jenom heslo.

Pokud chcete předem naplnit přihlašovací jméno, postupujte takto:

  1. Pokud používáte vlastní zásadu, přidejte požadovanou vstupní deklaraci identity, jak je popsáno v tématu Nastavení přímého přihlášení.
  2. Vytvořte nebo použijte existující PopupRequest nebo RedirectRequest objekt konfigurace MSAL.
  3. loginHint Nastavte atribut s odpovídající nápovědou pro přihlášení.

Následující fragmenty kódu ukazují, jak předat parametr nápovědy pro přihlášení. Používají bob@contoso.com jako hodnotu atributu.

// 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"
    }
  },

Předběžný výběr zprostředkovatele identity

Pokud jste nakonfigurovali přihlašovací cestu pro vaši aplikaci tak, aby zahrnovala účty sociálních sítí, jako je Facebook, LinkedIn nebo Google, můžete zadat domain_hint parametr . Tento parametr dotazu poskytuje nápovědu pro Azure AD B2C o zprostředkovateli sociální identity, který by se měl použít pro přihlášení. Pokud například aplikace zadá domain_hint=facebook.com, tok přihlášení přejde přímo na přihlašovací stránku Facebooku.

Pokud chcete uživatele přesměrovat na externího zprostředkovatele identity, postupujte takto:

  1. Zkontrolujte název domény externího zprostředkovatele identity. Další informace najdete v tématu Přesměrování přihlášení k poskytovateli sociálních sítí.
  2. Vytvořte nebo použijte existující PopupRequest nebo RedirectRequest objekt konfigurace MSAL.
  3. domainHint Nastavte atribut s odpovídajícím nápovědou k doméně.

Následující fragmenty kódu ukazují, jak předat parametr nápovědy k doméně. Používají facebook.com jako hodnotu atributu.

// 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"
    }
  },

Určení jazyka uživatelského rozhraní

Přizpůsobení jazyka v Azure AD B2C umožňuje toku uživatelů přizpůsobit různé jazyky tak, aby vyhovovaly potřebám vašich zákazníků. Další informace najdete v tématu Přizpůsobení jazyka.

Upřednostňovaný jazyk nastavíte takto:

  1. Nakonfigurujte přizpůsobení jazyka.
  2. Vytvořte nebo použijte existující PopupRequest nebo RedirectRequest msal objekt konfigurace s extraQueryParameters atributy.
  3. Přidejte do ui_locales atributů parametr s odpovídajícím kódem jazyka extraQueryParameters .

Následující fragmenty kódu ukazují, jak předat parametr nápovědy k doméně. Používají es-es jako hodnotu atributu.

// 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"}
    }
  },

Předání vlastního parametru řetězce dotazu

S vlastními zásadami můžete předat vlastní parametr řetězce dotazu. Dobrým příkladem použití je, když chcete dynamicky měnit obsah stránky.

Pokud chcete předat vlastní parametr řetězce dotazu, postupujte takto:

  1. Nakonfigurujte element ContentDefinitionParameters .
  2. Vytvořte nebo použijte existující PopupRequest nebo RedirectRequest msal objekt konfigurace s extraQueryParameters atributy.
  3. Přidejte parametr vlastního řetězce dotazu, například campaignId. Nastavte hodnotu parametru.

Následující fragmenty kódu ukazují, jak předat vlastní parametr řetězce dotazu. Používají germany-promotion jako hodnotu atributu.

// 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"}
    }
  },

Nápověda k předání tokenu ID

Aplikace předávající strany může v rámci žádosti o autorizaci OAuth2 odeslat příchozí webový token JSON (JWT). Příchozí token představuje nápovědu k uživateli nebo žádosti o autorizaci. Azure AD B2C token ověří a pak deklaraci identity extrahuje.

Pokud chcete do žádosti o ověření zahrnout nápovědu tokenu ID, postupujte takto:

  1. Ve vlastních zásadách definujte technický profil nápovědy tokenu ID.
  2. Vytvořte nebo použijte existující PopupRequest nebo RedirectRequest msal objekt konfigurace s extraQueryParameters atributy.
  3. id_token_hint Přidejte parametr s odpovídající proměnnou, která ukládá token ID.

Následující fragmenty kódu ukazují, jak definovat nápovědu tokenu ID:

// 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}
    }
  },

Použití vlastní domény

Pomocí vlastní domény můžete plně označit ověřovací adresu URL. Z pohledu uživatele zůstanou uživatelé během procesu ověřování na vaší doméně, místo aby byli přesměrováni na Azure AD B2C b2clogin.com název domény.

Pokud chcete odebrat všechny odkazy na b2c v adrese URL, můžete také nahradit název tenanta B2C contoso.onmicrosoft.com v adrese URL žádosti o ověření identifikátorem GUID vašeho tenanta. Můžete například změnit https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ na https://account.contosobank.co.uk/<tenant ID GUID>/.

Pokud chcete pro ID tenanta v ověřovací adrese URL použít vlastní doménu, postupujte podle pokynů v tématu Povolení vlastních domén. src/app/auth-config.ts Otevřete objekt konfigurace MSAL a změňte authorities a knownAuthorities použijte vlastní název domény a ID tenanta.

Následující JavaScript ukazuje objekt konfigurace MSAL před změnou:

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

Následující JavaScript zobrazuje objekt konfigurace MSAL po změně:

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

Konfigurace protokolování

Knihovna MSAL generuje zprávy protokolu, které mohou pomoci diagnostikovat problémy. Aplikace může nakonfigurovat protokolování. Aplikace vám také může poskytnout vlastní kontrolu nad úrovní podrobností a nad tím, jestli se protokolují osobní a organizační data.

Doporučujeme vytvořit zpětné volání protokolování MSAL a poskytnout uživatelům způsob, jak odesílat protokoly, když mají problémy s ověřováním. Knihovna MSAL poskytuje tyto úrovně podrobností protokolování:

  • Chyba: Něco se nepovedlo a vygenerovala se chyba. Tato úroveň se používá k ladění a identifikaci problémů.
  • Upozornění: Nemusí nutně dojít k chybě nebo selhání, ale informace jsou určené pro diagnostiku a určení problémů.
  • Informace: Knihovna MSAL protokoluje události, které jsou určené pro informační účely a ne nutně pro ladění.
  • Podrobné: Toto je výchozí úroveň. KNIHOVNA MSAL protokoluje úplné podrobnosti o chování knihovny.

Ve výchozím nastavení protokolovací nástroj MSAL nezachytává žádná osobní ani organizační data. Knihovna vám umožňuje povolit protokolování osobních a organizačních dat, pokud se tak rozhodnete.

Pokud chcete nakonfigurovat protokolování Angular, nakonfigurujte v souboru src/app/auth-config.ts následující klíče:

  • loggerCallback je funkce zpětného volání protokolovacího nástroje.
  • logLevel umožňuje určit úroveň protokolování. Možné hodnoty: Error, Warning, Infoa Verbose.
  • piiLoggingEnabled umožňuje zadávání osobních údajů. Možné hodnoty: true nebo false.

Následující fragment kódu ukazuje, jak nakonfigurovat protokolování MSAL:

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

Další kroky