Share via

Konfigurowanie opcji uwierzytelniania w aplikacji jednostronicowej przy użyciu Azure AD B2C

  • Artykuł

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

Przed rozpoczęciem zapoznaj się z następującym artykułem: Konfigurowanie uwierzytelniania w przykładowej aplikacji internetowej.

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 są 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 dzierżawy. Możesz na przykład zmienić wartość https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ na https://account.contosobank.co.uk/<tenant ID GUID>/.

Aby użyć domeny niestandardowej i identyfikatora dzierżawy w adresie URL uwierzytelniania, postępuj zgodnie ze wskazówkami w temacie Włączanie domen niestandardowych. Znajdź obiekt konfiguracji biblioteki Microsoft Authentication Library (MSAL) i zmień urzędy i znaneAuthorities , aby używać 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"],
      ...
    },
  ...
}

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 obiekt do przechowywania login_hint i przekaż ten obiekt do metody MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Wstępne wybieranie dostawcy tożsamości

Jeśli skonfigurowano logowanie dla aplikacji tak, aby obejmowała konta społecznościowe, takie jak Facebook, LinkedIn lub Google, możesz określić domain_hint parametr . Ten parametr zapytania zawiera wskazówkę dla 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.comwartość , przepływ logowania przechodzi bezpośrednio do strony logowania w serwisie Facebook.

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 obiekt do przechowywania parametrów extraQueryParameters i przekaż ten obiekt do metody MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

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. Create an object to store extraQueryParameters, and pass this object into the MSAL loginPopup() method.

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

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. Create an object to store extraQueryParameters, and pass this object into the MSAL loginPopup() method.

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

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 uwzględnić 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. Create an object to store extraQueryParameters, and pass this object into the MSAL loginPopup() method.

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Zabezpieczanie przekierowania wylogowywanie

Po wylogowaniu użytkownik jest przekierowywany do identyfikatora URI określonego w parametrze post_logout_redirect_uri , niezależnie od adresów URL odpowiedzi, które zostały określone dla aplikacji. Jeśli jednak przekazano prawidłową wartość id_token_hint i jest włączona pozycja Wymagaj tokenu identyfikatora w żądaniach wylogowywanie, Azure AD B2C sprawdza, czy wartość post_logout_redirect_uri jest zgodna z jedną ze skonfigurowanych identyfikatorów URI przekierowania aplikacji przed wykonaniem przekierowania. Jeśli dla aplikacji nie skonfigurowano pasującego adresu URL odpowiedzi, zostanie wyświetlony komunikat o błędzie i użytkownik nie zostanie przekierowany.

Aby obsługiwać identyfikator URI bezpiecznego przekierowania wylogowania, wykonaj poniższe kroki:

  1. Utwórz globalnie dostępną zmienną do przechowywania .id_token

    let id_token = "";

  2. W funkcji MSAL handleResponse przeanalizuj element id_token z authenticationResult obiektu do zmiennej id_token .

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. signOut W funkcji dodaj id_token_hint parametr do obiektu logoutRequest.

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

W powyższym przykładzie post_logout_redirect_uri przekazane do żądania wylogowywanie będzie mieć format: https://your-app.com/. Ten adres URL należy dodać do adresu URL odpowiedzi rejestracji aplikacji.

Włączanie wylogowania jednokrotnego

Wylogowywanie jednokrotne w usłudze Azure AD B2C używa wylogowywanego kanału frontonu OpenId Connect, aby wysyłać żądania wylogowywane do wszystkich aplikacji, do których użytkownik zalogował się za pośrednictwem Azure AD B2C.

Te żądania wylogowywanie są wysyłane ze strony wylogowywanie Azure AD B2C w ukrytym elemecie Iframe. Elementy Iframe wysyłają żądania HTTP do wszystkich punktów końcowych wylogowywanie kanału frontonu zarejestrowanych dla aplikacji, które Azure AD B2C zostały zarejestrowane jako zalogowane.

Punkt końcowy wylogowania dla każdej aplikacji musi wywołać metodę logout() biblioteki MSAL . Należy również jawnie skonfigurować bibliotekę MSAL do uruchamiania elementu Iframe w tym scenariuszu, ustawiając wartość allowRedirectInIframetrue.

Poniższy przykładowy kod ustawia wartość allowRedirectInIframetrue:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Następne kroki

Dowiedz się więcej o opcjach konfiguracjiMSAL.js.