Udostępnij za pośrednictwem

Konfigurowanie opcji uwierzytelniania w aplikacji Angular przy użyciu usługi Azure Active Directory B2C

  • Artykuł

W tym artykule opisano sposób dostosowywania i ulepszania środowiska uwierzytelniania usługi Azure Active Directory B2C (Azure AD B2C) dla aplikacji Angular jednostronicowej (SPA).

Wymagania wstępne

Zapoznaj się z artykułem Konfigurowanie uwierzytelniania w spa Angular lub Włączanie uwierzytelniania we własnym Angular SPA.

Zachowanie logowania i wylogowywanie

Aplikację jednostronicową można skonfigurować tak, aby logować użytkowników przy użyciu MSAL.js na dwa sposoby:

  • Okno podręczne: Uwierzytelnianie odbywa się w oknie podręcznym, a stan aplikacji jest zachowywany. Użyj tego podejścia, jeśli nie chcesz, aby użytkownicy odeszli od strony aplikacji podczas uwierzytelniania. Istnieją jednak znane problemy z wyskakującym oknami w programie Internet Explorer.
    • Aby zalogować się przy użyciu okien podręcznych, w src/app/app.component.ts klasie użyj loginPopup metody .
    • src/app/app.module.ts W klasie ustaw interactionType atrybut na InteractionType.Popup.
    • Aby wylogować się z wyskakujących okienek, w src/app/app.component.ts klasie użyj logoutPopup metody . Można również skonfigurować logoutPopup , aby przekierować okno główne do innej strony, takiej jak strona główna lub strona logowania, po zakończeniu wylogowania, przekazując jako mainWindowRedirectUri część żądania.
  • Przekierowanie: użytkownik jest przekierowywany do Azure AD B2C w celu ukończenia przepływu uwierzytelniania. Użyj tego podejścia, jeśli użytkownicy mają ograniczenia przeglądarki lub zasady, w których okna podręczne są wyłączone.
    • Aby zalogować się przy użyciu przekierowania, w src/app/app.component.ts klasie użyj loginRedirect metody .
    • src/app/app.module.ts W klasie ustaw interactionType atrybut na InteractionType.Redirect.
    • Aby wylogować się z przekierowaniem, w src/app/app.component.ts klasie użyj logoutRedirect metody . Skonfiguruj identyfikator URI, do którego ma zostać przekierowany po wylogowaniu, ustawiając wartość postLogoutRedirectUri. Ten identyfikator URI należy dodać jako identyfikator URI przekierowania w rejestracji aplikacji.

W poniższym przykładzie pokazano, jak się zalogować i wylogować:

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

Biblioteka msAL Angular ma trzy przepływy logowania: logowanie interakcyjne (gdzie użytkownik wybiera przycisk logowania), MSAL Guard i MSAL Interceptor. Konfiguracje msAL Guard i MSAL Interceptor mają zastosowanie, gdy użytkownik próbuje uzyskać dostęp do chronionego zasobu bez prawidłowego tokenu dostępu. W takich przypadkach biblioteka MSAL wymusza zalogowanie się przez użytkownika.

W poniższych przykładach pokazano, jak skonfigurować funkcję MSAL Guard i msAL Interceptor na potrzeby logowania przy użyciu okna podręcznego lub przekierowania:

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

Wstępnie wypełnij nazwę logowania

Podczas podróży użytkownika logowania aplikacja może być skierowana do określonego użytkownika. Gdy aplikacja jest przeznaczona dla użytkownika, może określić w żądaniu login_hint autoryzacji parametr zapytania z nazwą logowania użytkownika. Azure AD B2C automatycznie wypełnia nazwę logowania, a użytkownik musi podać tylko hasło.

Aby wstępnie wypełniać nazwę logowania, wykonaj następujące czynności:

  1. Jeśli używasz zasad niestandardowych, dodaj wymagane oświadczenie wejściowe zgodnie z opisem w temacie Konfigurowanie logowania bezpośredniego.
  2. Utwórz lub użyj istniejącego PopupRequest obiektu konfiguracji biblioteki RedirectRequest MSAL.
  3. loginHint Ustaw atrybut z odpowiednią wskazówką logowania.

Poniższe fragmenty kodu pokazują, jak przekazać parametr wskazówki logowania. Są one używane bob@contoso.com jako wartość atrybutu.

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

Wstępne wybieranie dostawcy tożsamości

Jeśli skonfigurowano podróż logowania do aplikacji w celu uwzględnienia kont społecznościowych, takich jak Facebook, LinkedIn lub Google, można określić domain_hint parametr . Ten parametr zapytania zawiera wskazówkę dotyczącą Azure AD B2C o dostawcy tożsamości społecznościowych, który powinien być używany do logowania. Jeśli na przykład aplikacja określa domain_hint=facebook.com, przepływ logowania przechodzi bezpośrednio do strony logowania na Facebooku.

Aby przekierować użytkowników do zewnętrznego dostawcy tożsamości, wykonaj następujące czynności:

  1. Sprawdź nazwę domeny zewnętrznego dostawcy tożsamości. Aby uzyskać więcej informacji, zobacz Przekierowywanie logowania do dostawcy społecznościowego.
  2. Utwórz lub użyj istniejącego PopupRequest obiektu konfiguracji biblioteki RedirectRequest MSAL.
  3. domainHint Ustaw atrybut z odpowiednią wskazówką domeny.

Poniższe fragmenty kodu pokazują, jak przekazać parametr wskazówki domeny. Są one używane facebook.com jako wartość atrybutu.

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

Określanie języka interfejsu użytkownika

Dostosowywanie języka w usłudze Azure AD B2C umożliwia przepływowi użytkownika dostosowanie różnych języków do potrzeb klientów. Aby uzyskać więcej informacji, zobacz Dostosowywanie języka.

Aby ustawić preferowany język, wykonaj następujące czynności:

  1. Konfigurowanie dostosowywania języka.
  2. Utwórz lub użyj istniejącego PopupRequest obiektu konfiguracji biblioteki RedirectRequest MSAL z atrybutami extraQueryParameters .
  3. ui_locales Dodaj parametr z odpowiednim kodem języka do extraQueryParameters atrybutów.

Poniższe fragmenty kodu pokazują, jak przekazać parametr wskazówki domeny. Są one używane es-es jako wartość atrybutu.

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

Przekazywanie niestandardowego parametru ciągu zapytania

Za pomocą zasad niestandardowych można przekazać niestandardowy parametr ciągu zapytania. Dobrym przykładem przypadku użycia jest dynamiczna zmiana zawartości strony.

Aby przekazać niestandardowy parametr ciągu zapytania, wykonaj następujące czynności:

  1. Skonfiguruj element ContentDefinitionParameters .
  2. Utwórz lub użyj istniejącego PopupRequest obiektu konfiguracji biblioteki RedirectRequest MSAL z atrybutami extraQueryParameters .
  3. Dodaj niestandardowy parametr ciągu zapytania, taki jak campaignId. Ustaw wartość parametru.

Poniższe fragmenty kodu pokazują, jak przekazać niestandardowy parametr ciągu zapytania. Są one używane germany-promotion jako wartość atrybutu.

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

Przekazywanie wskazówki dotyczącej tokenu identyfikatora

Aplikacja jednostki uzależnionej może wysyłać przychodzący token internetowy JSON (JWT) w ramach żądania autoryzacji OAuth2. Token przychodzący to wskazówka dotycząca użytkownika lub żądania autoryzacji. Azure AD B2C weryfikuje token, a następnie wyodrębnia oświadczenie.

Aby dołączyć wskazówkę tokenu identyfikatora w żądaniu uwierzytelniania, wykonaj następujące czynności:

  1. W zasadach niestandardowych zdefiniuj profil techniczny wskazówki dotyczącej tokenu identyfikatora.
  2. Utwórz lub użyj istniejącego PopupRequest obiektu konfiguracji biblioteki RedirectRequest MSAL z atrybutami extraQueryParameters .
  3. id_token_hint Dodaj parametr z odpowiednią zmienną, która przechowuje token identyfikatora.

Poniższe fragmenty kodu pokazują, jak zdefiniować wskazówkę tokenu identyfikatora:

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

Korzystanie z domeny niestandardowej

Za pomocą domeny niestandardowej można w pełni oznaczyć adres URL uwierzytelniania. Z perspektywy użytkownika użytkownicy pozostają w domenie podczas procesu uwierzytelniania, a nie przekierowywani do Azure AD B2C b2clogin.com nazwy domeny.

Aby usunąć wszystkie odwołania do "b2c" w adresie URL, możesz również zastąpić nazwę dzierżawy B2C, contoso.onmicrosoft.com, w adresie URL żądania uwierzytelniania identyfikatorem GUID identyfikatora dzierżawy. Na przykład możesz zmienić wartość https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ na https://account.contosobank.co.uk/<tenant ID GUID>/.

Aby użyć domeny niestandardowej dla identyfikatora dzierżawy w adresie URL uwierzytelniania, postępuj zgodnie ze wskazówkami w temacie Włączanie domen niestandardowych. Otwórz obiekt konfiguracji biblioteki src/app/auth-config.ts MSAL i zmień authorities i knownAuthorities użyj niestandardowej nazwy domeny i identyfikatora dzierżawy.

Poniższy kod JavaScript przedstawia obiekt konfiguracji biblioteki MSAL przed zmianą:

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

Poniższy kod JavaScript przedstawia obiekt konfiguracji biblioteki MSAL po zmianie:

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

Konfigurowanie rejestrowania

Biblioteka MSAL generuje komunikaty dziennika, które mogą pomóc zdiagnozować problemy. Aplikacja może skonfigurować rejestrowanie. Aplikacja może również zapewnić ci niestandardową kontrolę nad poziomem szczegółowości oraz informacją o tym, czy są rejestrowane dane osobiste i organizacyjne.

Zalecamy utworzenie wywołania zwrotnego rejestrowania biblioteki MSAL i zapewnienie użytkownikom możliwości przesyłania dzienników w przypadku problemów z uwierzytelnianiem. Biblioteka MSAL udostępnia następujące poziomy szczegółów rejestrowania:

  • Błąd: Wystąpił problem i został wygenerowany błąd. Ten poziom służy do debugowania i identyfikowania problemów.
  • Ostrzeżenie: Niekoniecznie wystąpił błąd lub błąd, ale informacje są przeznaczone do diagnostyki i ustalania problemów.
  • Informacje: biblioteka MSAL rejestruje zdarzenia przeznaczone do celów informacyjnych i niekoniecznie do debugowania.
  • Pełne: jest to poziom domyślny. Biblioteka MSAL rejestruje pełne szczegóły zachowania biblioteki.

Domyślnie rejestrator biblioteki MSAL nie przechwytuje żadnych danych osobowych ani organizacyjnych. Biblioteka umożliwia włączenie rejestrowania danych osobowych i organizacyjnych, jeśli zdecydujesz się to zrobić.

Aby skonfigurować rejestrowanie Angular, w pliku src/app/auth-config.ts skonfiguruj następujące klucze:

  • loggerCallback to funkcja wywołania zwrotnego rejestratora.
  • logLevel umożliwia określenie poziomu rejestrowania. Możliwe wartości: Error, , InfoWarningi Verbose.
  • piiLoggingEnabled umożliwia wprowadzanie danych osobowych. Możliwe wartości: true lub false.

Poniższy fragment kodu przedstawia sposób konfigurowania rejestrowania biblioteki MSAL:

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

Następne kroki