Korzystanie z biblioteki Microsoft Authentication Library for JavaScript do pracy z usługą Azure AD B2C

Ważna

Od 1 maja 2025 r. usługa Azure AD B2C nie będzie już dostępna do zakupu dla nowych klientów. Aby dowiedzieć się więcej, zobacz Czy usługa Azure AD B2C jest nadal dostępna do zakupu? w naszych często zadawanych pytaniach.

Biblioteka Microsoft Authentication Library for JavaScript (MSAL.js) umożliwia deweloperom języka JavaScript uwierzytelnianie użytkowników przy użyciu tożsamości społecznościowych i lokalnych przy użyciu usługi Azure Active Directory B2C (Azure AD B2C).

Korzystając z usługi Azure AD B2C jako usługi zarządzania tożsamościami, możesz dostosować i kontrolować sposób rejestrowania, logowania i zarządzania profilami klientów podczas korzystania z aplikacji.

Usługa Azure AD B2C umożliwia również znakowanie i dostosowywanie interfejsu użytkownika wyświetlanego przez aplikację podczas procesu uwierzytelniania.

Obsługiwane typy aplikacji i scenariusze

MSAL.js umożliwia aplikacjom jednostronicowym logowanie użytkowników w Azure AD B2C, wykorzystując przepływ kodu autoryzacji z udzielaniem PKCE. W przypadku MSAL.js i usługi Azure AD B2C:

• Użytkownicy mogą uwierzytelniać się przy użyciu tożsamości społecznościowych i lokalnych.
• Użytkownicy mogą mieć uprawnienia dostępu do chronionych zasobów usługi Azure AD B2C (ale nie zasobów chronionych przez firmę Microsoft Entra).
• Użytkownicy nie mogą uzyskać tokenów dla interfejsów API firmy Microsoft (na przykład interfejsu API programu MS Graph) przy użyciu delegowanych uprawnień.
• Użytkownicy z uprawnieniami administratora mogą uzyskiwać tokeny dla interfejsów API firmy Microsoft (na przykład interfejs API programu MS Graph) przy użyciu delegowanych uprawnień.

Aby uzyskać więcej informacji, zobacz: Praca z usługą Azure AD B2C

Następne kroki

Postępuj zgodnie z samouczkiem, aby dowiedzieć się, jak wykonać następujące czynności:

• Logowanie użytkowników przy użyciu usługi Azure AD B2C w aplikacji jednostronicowej
• Wywołaj chronione API usługi Azure AD B2C

⚠✔ Zanim zaczniesz tutaj, upewnij się, że rozumiesz , jak zainicjować obiekt aplikacji i pracować z zasobami i zakresami. Zalecamy również ogólną znajomość usługi Azure AD B2C. Aby uzyskać więcej informacji, zobacz dokumentację usługi B2C .

MSAL.js obsługuje uwierzytelnianie za pomocą tożsamości społecznościowych (Microsoft, Google, Facebook itp.), firmowych (ADFS, Salesforce itp.) oraz lokalnych (przechowywanych w katalogu Azure AD B2C) tożsamości przy użyciu Azure AD B2C (w skrócie B2C). Podczas tworzenia aplikacji B2C z MSAL.jsnależy pamiętać o kilku ważnych szczegółach.

Szybkie fakty

W przypadku B2C:

• Użytkownicy mogą uwierzytelniać się przy użyciu swoich tożsamości społecznościowych.
• Użytkownicy mogą zostać upoważnieni do uzyskiwania dostępu do zasobów chronionych przez B2C (ale nie do zasobów chronionych przez Microsoft Entra).
• Użytkownicy nie mogą uzyskać tokenów dla interfejsów API Microsoft (np. MS interfejs Graph API) przy użyciu uprawnień delegowanych.
• Aplikacje mogą uzyskiwać tokeny dla interfejsów API Microsoft przy użyciu uprawnień aplikacji (scenariusze zarządzania użytkownikami).

Konfiguracja aplikacji B2C

Poniżej przedstawiono przykład konfiguracji aplikacji B2C:

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] // array of URIs that are known to be valid
  }
}

const apiConfig = {
  b2cScopes: ["https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"],
  webApiUri: "<your-api-uri>" // e.g. "https://fabrikamb2chello.azurewebsites.net/hello"
};

const loginRequest = {
  scopes: [ "openid", "offline_access" ]
}

const tokenRequest = {
  scopes: apiConfig.b2cScopes // e.g. "https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"
}

Microsoft Entra a punkty końcowe B2C

Główną różnicą między dzierżawami usługi Microsoft Entra ID i Azure AD B2C jest ich punkty końcowe.

Tenant Microsoft Entra ID:

• Zawiera tylko punkty końcowe Microsoft Entra (login.microsoftonline.com/*).
• Uwidacznia pojedynczy punkt końcowy tokenu (login.microsoftonline.com/.../token).
• Microsoft Entra punkty końcowe umożliwiają uzyskiwanie tokenów dla:
  • Aplikacje chronione przez Microsoft Entra ID.
  • Interfejsy API firmy Microsoft, takie jak MS interfejs Graph API.

Dzierżawa B2C :

• Zawiera Microsoft Entra ID i punkty końcowe usługi AZURE AD B2C (login.microsoftonline.com/* i <your-domain>.b2clogin.com/*).
• Uwidacznia oddzielne punkty końcowe tokenu dla każdego (login.microsoftonline.com/.../token, <your-domain>.b2clogin.com/.../token).
• Punkty końcowe B2C umożliwiają uzyskiwanie tokenów dla:
  • Aplikacje chronione przez usługę B2C.

B2C i uprawnienia delegowane

Uprawnienia delegowane określają dostęp oparty na zakresie przy użyciu interaktywnej autoryzacji od zalogowanego użytkownika. Te uprawnienia są prezentowane zasobowi (np. internetowy interfejs API, ms interfejs Graph API itp.) w czasie wykonywania jako scp oświadczenia w tokenie dostępu klienta.

Uwierzytelniania B2C użytkownika nie można używać do autoryzacji w aplikacjach chronionych przez Microsoft Entra ani w interfejsach API firmy Microsoft (które są również chronione przez Microsoft Entra ID). W związku z tym, gdy używasz MSAL.js, nie możesz użyć punktu końcowego <your-tenant>.b2clogin.com/.../token, aby uzyskać token dostępu dla MS interfejs Graph API.

Uprawnienia OpenID Connect

Wyjątek od powyższej reguły pochodzi ze specjalnego zestawu zakresów nazywanych uprawnieniami OpenID Connect (OIDC), w tym openid i profile. Kolejnym specjalnym uprawnieniem jest offline_access, które zapewnia aplikacji dostęp do zasobów w imieniu użytkownika przez dłuższy czas (za pomocą tokenu odświeżania). MSAL.js domyślnie udostępnia openid, profile i offline_access podczas żądań loginPopup() i loginRedirect().

Uwierzytelnianie Microsoft Entra względem dzierżawy B2C

Jeśli używasz punktu końcowego login.microsoftonline.com bez podawania żadnych parametrów policyID w dzierżawie B2C, trafiasz do punktów końcowych Microsoft Entra dzierżawy B2C. Tylko w tym przypadku można uzyskać tokeny dla zasobów MS interfejs Graph API, używając kontekstu zalogowanego użytkownika.

Uprawnienia B2C i aplikacji

Uprawnienia aplikacji określają dostęp oparty na rolach przy użyciu poświadczeń/tożsamości aplikacji klienckiej. Te uprawnienia są prezentowane zasobowi w czasie wykonywania jako roles oświadczenia w tokenie dostępu klienta.

Scenariusze zarządzania użytkownikami

Punkty końcowe login.microsoftonline.com mogą być nadal używane do wszelkich wykonywanych w tle, nieinterakcyjnych działań związanych z zarządzaniem użytkownikami i atrybutami, nawet jeśli są przeznaczone konkretnie dla usługi B2C. Podczas tworzenia rejestracji aplikacji dla aplikacji, która będzie używać poświadczeń klienta do zarządzania zasobami B2C przy użyciu usługi MS interfejs Graph API, należy wybrać zakresy interfejs Graph API, dla których aplikacja zarządzania musi uzyskać uprawnienia (zobacz dokumentację, aby uzyskać więcej informacji). Należy pamiętać o następujących kwestiach:

• Aby uzyskać uprawnienia aplikacji, musisz przeprowadzić uwierzytelnianie aplikacji (przy użyciu przydzielenia poświadczeń klienta).
• Aby uzyskać delegowane uprawnienia, należy przeprowadzić uwierzytelnianie użytkowników przy użyciu konta administratora.
• Aplikacje do zarządzania są zwykle rejestrowane jako aplikacje typu odbiorcy typu 1 lub typu 2 (patrz poniżej).

Inne tematy

B2C oraz typy kont/odbiorców

Podczas rejestracji aplikacji zostanie wyświetlony monit o wybranie odbiorców. Wybrany typ odbiorców wskazuje, na jaki typ uwierzytelniania jest to ukierunkowane.

Typ odbiorców	Description	Typ uwierzytelniania
#1	Konta w tym katalogu organizacyjnym (tylko jedna dzierżawa)	Uwierzytelnianie usługi Microsoft Entra
#2	Konta w dowolnym katalogu organizacyjnym (wielodostępnym).	Uwierzytelnianie usługi Microsoft Entra
#3	Konta w dowolnym katalogu organizacyjnym lub u dowolnego dostawcy tożsamości	Uwierzytelnianie B2C

Uzyskiwanie tokenu dostępu dla własnego interfejsu API

Istnieją 2 sposoby uzyskiwania tokenu dostępu dla własnego interfejsu API:

1. Poproś o clientId w zakresie:

msal.loginRedirect({
    scopes: ["client_Id"]
});

Przeczytaj więcej tutaj

2. Udostępnij własny niestandardowy zakres w ramach rejestracji aplikacji i zażądaj tego zakresu:

msal.loginRedirect({
    scopes: ["api://clientId/customScope.Read"]
});

B2C i obsługa wylogowywania się

Wylogowywanie czyści stan logowania jednokrotnego użytkownika przy użyciu usługi Azure AD B2C, ale może nie wylogować użytkownika z sesji dostawcy tożsamości społecznościowych. Jeśli użytkownik wybierze tego samego dostawcę tożsamości podczas kolejnego logowania, może ponownie uwierzytelnić się bez wprowadzania poświadczeń. W tym przypadku założenie polega na tym, że jeśli użytkownik chce wylogować się z aplikacji, niekoniecznie oznacza to, że chce wylogować się z konta społecznościowego (np. Facebook).

B2C i proces zapraszania

MSAL.js będą przetwarzać tylko tokeny, których pierwotnie zażądał. Jeśli twój przepływ wymaga wysłania użytkownikowi linku, którego może użyć do zarejestrowania się, musisz upewnić się, że link wskazuje aplikację, a nie bezpośrednio usługę B2C. Przykładowy przepływ zapraszania jest następujący:

1. Użytkownik klika odnośnik do Twojej aplikacji
2. Aplikacja wywołuje msal.loginRedirect i zawiera id_token_hint w extraQueryParameters

    msal.loginRedirect({
        scopes: ["example_scope"],
        extraQueryParameters: {'id_token_hint': your_id_token_hint}
    });

3. Aplikacja jest przekierowywana do usługi B2C, w której użytkownik wprowadza poświadczenia/zarejestruje się
4. Usługa B2C przekierowuje z powrotem do Twojej aplikacji, która wywołuje await msal.handleRedirectPromise(), aby przetworzyć odpowiedź i zapisać tokeny

Użycie elementów B2C i iframe

usługa Azure AD B2C oferuje osadzone środowisko logowania, które umożliwia renderowanie niestandardowego interfejsu użytkownika logowania w elemecie iframe. Ponieważ biblioteka MSAL domyślnie uniemożliwia przekierowywanie w elementach iframe, należy ustawić opcję konfiguracji allowRedirectInIframe na wartość true , aby móc korzystać z tej funkcji. Aby zapoznać się z innymi zagadnieniami dotyczącymi korzystania z elementów iframe, zapoznaj się z tematem: Korzystanie z biblioteki MSAL w aplikacjach iframed