Konfigurowanie uwierzytelniania w przykładowej aplikacji jednostronicowej angular przy użyciu usługi Azure Active Directory B2C

W tym artykule użyto przykładowej aplikacji jednostronicowej Angular (SPA), aby zilustrować sposób dodawania uwierzytelniania usługi Azure Active Directory B2C (Azure AD B2C) do aplikacji Angular.

Omówienie

OpenID Connect (OIDC) to protokół uwierzytelniania zbudowany na protokole OAuth 2.0, który umożliwia bezpieczne logowanie użytkownika w aplikacji. W tym przykładzie angular użyto biblioteki MSAL Angular i przeglądarki MSAL. Biblioteka MSAL to biblioteka udostępniana przez firmę Microsoft, która upraszcza dodawanie obsługi uwierzytelniania i autoryzacji do umów SPA usługi Angular.

Przepływ logowania

Przepływ logowania obejmuje następujące kroki:

1. Użytkownik otworzy aplikację i wybierze pozycję Zaloguj.
2. Aplikacja uruchamia żądanie uwierzytelniania i przekierowuje użytkownika do usługi Azure AD B2C.
3. Użytkownik zarejestruje się lub zaloguje się i zresetuje hasło albo zaloguje się przy użyciu konta społecznościowego.
4. Po pomyślnym zalogowaniu usługa Azure AD B2C zwraca kod autoryzacji do aplikacji. Aplikacja wykonuje następujące akcje:
   1. Wymienia kod autoryzacji dla tokenu identyfikatora, tokenu dostępu i tokenu odświeżania.
   2. Odczytuje oświadczenia tokenu identyfikatora.
   3. Przechowuje token dostępu i token odświeżania w pamięci podręcznej do późniejszego użycia. Token dostępu umożliwia użytkownikowi wywoływanie chronionych zasobów, takich jak internetowy interfejs API. Token odświeżania służy do uzyskiwania nowego tokenu dostępu.

Rejestracja aplikacji

Aby umożliwić aplikacji logowanie się za pomocą usługi Azure AD B2C i wywoływanie internetowego interfejsu API, musisz zarejestrować dwie aplikacje w dzierżawie usługi Azure AD B2C:

• Rejestracja aplikacji jednostronicowej (Angular) umożliwia aplikacji logowanie się za pomocą usługi Azure AD B2C. Podczas rejestracji aplikacji należy określić identyfikator URI przekierowania. Identyfikator URI przekierowania to punkt końcowy, do którego użytkownik jest przekierowywany po uwierzytelnieniu w usłudze Azure AD B2C. Proces rejestracji aplikacji generuje identyfikator aplikacji, znany również jako identyfikator klienta, który jednoznacznie identyfikuje twoją aplikację. W tym artykule użyto przykładowego identyfikatora aplikacji: 1.

• Rejestracja internetowego interfejsu API umożliwia aplikacji wywoływanie chronionego internetowego interfejsu API. Rejestracja uwidacznia uprawnienia internetowego interfejsu API (zakresy). Proces rejestracji aplikacji generuje identyfikator aplikacji, który jednoznacznie identyfikuje internetowy interfejs API. W tym artykule użyto przykładowego identyfikatora aplikacji: 2. Przyznaj aplikacji (identyfikator aplikacji: 1) uprawnienia do zakresów internetowego interfejsu API (identyfikator aplikacji: 2).

Na poniższym diagramie opisano rejestracje aplikacji i architekturę aplikacji.

Wywoływanie do internetowego interfejsu API

Po zakończeniu uwierzytelniania użytkownicy wchodzą w interakcję z aplikacją, która wywołuje chroniony internetowy interfejs API. Internetowy interfejs API używa uwierzytelniania tokenu elementu nośnego. Token elementu nośnego to token dostępu uzyskany przez aplikację z usługi Azure AD B2C. Aplikacja przekazuje token w nagłówku autoryzacji żądania HTTPS.

Authorization: Bearer <access token>

Jeśli zakres tokenu dostępu nie jest zgodny z zakresami internetowego interfejsu API, biblioteka uwierzytelniania uzyskuje nowy token dostępu z poprawnymi zakresami.

Wylogowywanie przepływu

Przepływ wylogowania obejmuje następujące kroki:

1. W aplikacji użytkownicy wyloguj się.
2. Aplikacja czyści obiekty sesji, a biblioteka uwierzytelniania czyści pamięć podręczną tokenów.
3. Aplikacja przenosi użytkowników do punktu końcowego wylogowania usługi Azure AD B2C, aby zakończyć sesję usługi Azure AD B2C.
4. Użytkownicy są przekierowywani z powrotem do aplikacji.

Wymagania wstępne

Przed wykonaniem procedur opisanych w tym artykule upewnij się, że komputer jest uruchomiony:

• Program Visual Studio Code lub dowolny inny edytor kodu.
• Środowisko uruchomieniowe Node.js i narzędzie npm.
• Interfejs wiersza polecenia platformy Angular.

Krok 1. Konfigurowanie przepływu użytkownika

Gdy użytkownicy próbują zalogować się do aplikacji, aplikacja uruchamia żądanie uwierzytelniania do punktu końcowego autoryzacji za pośrednictwem przepływu użytkownika. Przepływ użytkownika definiuje i kontroluje środowisko użytkownika. Po zakończeniu przepływu użytkownika usługa Azure AD B2C generuje token, a następnie przekierowuje użytkowników z powrotem do aplikacji.

Jeśli jeszcze tego nie zrobiono, utwórz przepływ użytkownika lub zasady niestandardowe. Powtórz kroki, aby utworzyć trzy oddzielne przepływy użytkownika w następujący sposób:

• Połączony przepływ logowania i rejestracji użytkownika, taki jak susi. Ten przepływ użytkownika obsługuje również środowisko Nie pamiętasz hasła .
• Przepływ użytkownika do edycji profilu, taki jak edit_profile.
• Przepływ użytkownika resetowania hasła, taki jak reset_password.

Usługa Azure AD B2C poprzedza B2C_1_ nazwę przepływu użytkownika. Na przykład, susi staje się B2C_1_susi.

Krok 2. Rejestrowanie usługi Angular SPA i interfejsu API

W tym kroku utworzysz rejestracje dla spa Angular i aplikacji internetowego interfejsu API. Określasz również zakresy internetowego interfejsu API.

2.1 Rejestrowanie aplikacji internetowego interfejsu API

Aby utworzyć rejestrację aplikacji internetowego interfejsu API (identyfikator aplikacji: 2), wykonaj następujące kroki:

1. Zaloguj się w witrynie Azure Portal.

2. Upewnij się, że używasz katalogu zawierającego dzierżawę usługi Azure AD B2C. Wybierz ikonę Katalogi i subskrypcje na pasku narzędzi portalu.

3. W ustawieniach portalu | Strona Katalogi i subskrypcje , znajdź katalog usługi Azure AD B2C na liście Nazwa katalogu, a następnie wybierz pozycję Przełącz.

4. W witrynie Azure Portal wyszukaj i wybierz pozycję Azure AD B2C.

5. Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.

6. W polu Nazwa wprowadź nazwę aplikacji (na przykład my-api1). Pozostaw wartości domyślne dla identyfikatora URI przekierowania i obsługiwanych typów kont.

7. Wybierz pozycję Zarejestruj.

8. Po zakończeniu rejestracji aplikacji wybierz pozycję Przegląd.

9. Zarejestruj wartość identyfikatora aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji internetowej.

   

2.2. Konfigurowanie zakresów

1. Wybierz utworzoną aplikację my-api1 (identyfikator aplikacji: 2), aby otworzyć stronę Przegląd.

2. W obszarze Zarządzanie wybierz pozycję Uwidaczniaj interfejs API.

3. Obok pozycji Identyfikator URI identyfikatora aplikacji wybierz link Ustaw . Zastąp wartość domyślną (GUID) unikatową nazwą (na przykład tasks-api), a następnie wybierz pozycję Zapisz.

   Gdy aplikacja internetowa żąda tokenu dostępu dla internetowego interfejsu API, powinien dodać ten identyfikator URI jako prefiks dla każdego zakresu zdefiniowanego dla interfejsu API.

4. W obszarze Zakresy zdefiniowane przez ten interfejs API wybierz pozycję Dodaj zakres.

5. Aby utworzyć zakres definiujący dostęp do odczytu do interfejsu API:

   1. W polu Nazwa zakresu wprowadź ciąg tasks.read.
   2. W przypadku Administracja nazwy wyświetlanej zgody wprowadź odczyt dostępu do interfejsu API zadań.
   3. Aby uzyskać Administracja opis zgody, wprowadź zezwalanie na dostęp do odczytu do interfejsu API zadań.

6. Wybierz Dodaj zakres.

7. Wybierz pozycję Dodaj zakres, a następnie dodaj zakres definiujący dostęp do zapisu do interfejsu API:

   1. W polu Nazwa zakresu wprowadź ciąg tasks.write.
   2. W przypadku Administracja nazwy wyświetlanej zgody wprowadź wartość Write access to tasks API (Zapis dostępu do interfejsu API zadań).
   3. Aby uzyskać Administracja opis zgody, wprowadź zezwalanie na dostęp do zapisu do interfejsu API zadań.

8. Wybierz Dodaj zakres.

2.3 Rejestrowanie aplikacji Angular

Wykonaj następujące kroki, aby utworzyć rejestrację aplikacji Angular:

1. Zaloguj się w witrynie Azure Portal.
2. Jeśli masz dostęp do wielu dzierżaw, wybierz ikonę Ustawienia w górnym menu, aby przełączyć się do dzierżawy usługi Azure AD B2C z menu Katalogi i subskrypcje.
3. W witrynie Azure Portal wyszukaj i wybierz pozycję Azure AD B2C.
4. Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.
5. W polu Nazwa wprowadź nazwę aplikacji. Na przykład wprowadź ciąg MyApp.
6. W obszarze Obsługiwane typy kont wybierz Konta w dowolnym dostawcy tożsamości lub katalogu organizacyjnym (do uwierzytelniania użytkowników za pomocą przepływów użytkownika).
7. W obszarze Identyfikator URI przekierowania wybierz pozycję Aplikacja jednostronicowa (SPA), a następnie wprowadź http://localhost:4200 w polu Adres URL.
8. W obszarze Uprawnienia zaznacz pole wyboru Udziel zgody administratora na uprawnienia do otwierania i dostępu w trybie offline.
9. Wybierz pozycję Zarejestruj.
10. Zapisz wartość identyfikatora aplikacji (klienta) do użycia w późniejszym kroku podczas konfigurowania aplikacji internetowej.

2.5 Udzielanie uprawnień

Aby udzielić aplikacji (identyfikator aplikacji: 1) uprawnień, wykonaj następujące kroki:

1. Wybierz Rejestracje aplikacji, a następnie wybierz utworzoną aplikację (identyfikator aplikacji: 1).

2. W obszarze Zarządzanie wybierz pozycję Uprawnienia interfejsu API.

3. W obszarze Skonfigurowane uprawnienia wybierz pozycję Dodaj uprawnienie.

4. Wybierz kartę Moje interfejsy API.

5. Wybierz interfejs API (identyfikator aplikacji: 2), do którego ma zostać udzielona aplikacja internetowa. Na przykład wprowadź ciąg my-api1.

6. W obszarze Uprawnienie rozwiń węzeł zadania, a następnie wybierz zdefiniowane wcześniej zakresy (na przykład tasks.read i tasks.write).

7. Wybierz Przyznaj uprawnienia.

8. Wybierz pozycję Udziel zgody administratora dla< swojej nazwy> dzierżawy.

9. Wybierz opcję Tak.

10. Wybierz pozycję Odśwież, a następnie sprawdź, czy w obszarze Stan dla obu zakresów jest wyświetlana wartość Przyznane dla ... .

11. Z listy Skonfigurowane uprawnienia wybierz zakres, a następnie skopiuj pełną nazwę zakresu.

    

Krok 3. Pobieranie przykładowego kodu angular

W tym przykładzie pokazano, w jaki sposób jednostronicowa aplikacja angular może używać usługi Azure AD B2C do rejestracji i logowania użytkownika. Następnie aplikacja uzyskuje token dostępu i wywołuje chroniony internetowy interfejs API.

Pobierz plik zip z przykładu lub sklonuj przykład z repozytorium GitHub przy użyciu następującego polecenia:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Konfigurowanie przykładu Angular

Teraz, po uzyskaniu przykładu SPA, zaktualizuj kod przy użyciu wartości usługi Azure AD B2C i internetowego interfejsu API. W folderze przykładowym w folderze src/app otwórz plik auth-config.ts . Zaktualizuj klucze odpowiednimi wartościami:

Sekcja	Klucz	Wartość
b2cPolicies	nazwy	Przepływ użytkownika lub zasady niestandardowe utworzone w kroku 1.
b2cPolicies	Władze	Zastąp your-tenant-name ciąg nazwą dzierżawy usługi Azure AD B2C. Użyj na przykład nazwy contoso.onmicrosoft.com. Następnie zastąp nazwę zasad przepływem użytkownika lub zasadami niestandardowymi utworzonymi w kroku 1. Na przykład: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2cPolicies	authorityDomain	Nazwa dzierżawy usługi Azure AD B2C. Na przykład: contoso.onmicrosoft.com.
Konfigurowanie	clientId	Identyfikator aplikacji Angular z kroku 2.3.
protectedResources	endpoint	Adres URL internetowego interfejsu API: http://localhost:5000/api/todolist.
protectedResources	scopes	Zakresy internetowego interfejsu API utworzone w kroku 2.2. Na przykład: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

Wynikowy kod src/app/auth-config.ts powinien wyglądać podobnie do poniższego przykładu:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

Krok 4. Pobieranie przykładowego kodu internetowego interfejsu API

Po zarejestrowaniu internetowego interfejsu API i zdefiniowaniu jego zakresów skonfiguruj kod internetowego interfejsu API do pracy z dzierżawą usługi Azure AD B2C.

Pobierz archiwum *.zip lub sklonuj przykładowy projekt internetowego interfejsu API z usługi GitHub. Możesz również przejść bezpośrednio do projektu Azure-Samples/active-directory-b2c-javascript-nodejs-webapi w usłudze GitHub przy użyciu następującego polecenia:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1. Konfigurowanie internetowego interfejsu API

W folderze przykładowym otwórz plik config.json . Ten plik zawiera informacje o dostawcy tożsamości usługi Azure AD B2C. Aplikacja internetowego interfejsu API używa tych informacji do sprawdzania poprawności tokenu dostępu, który aplikacja internetowa przekazuje jako token elementu nośnego. Zaktualizuj następujące właściwości ustawień aplikacji:

Sekcja	Klucz	Wartość
poświadczenia	tenantName	Pierwsza część nazwy dzierżawy usługi Azure AD B2C. Na przykład: contoso.
poświadczenia	Clientid	Identyfikator aplikacji internetowego interfejsu API z kroku 2.1. Na wcześniejszym diagramie jest to aplikacja o identyfikatorze aplikacji: 2.
poświadczenia	issuer	(Opcjonalnie) Wartość oświadczenia wystawcy iss tokenu. Usługa Azure AD B2C domyślnie zwraca token w następującym formacie: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Zastąp <your-tenant-name> element pierwszą częścią nazwy dzierżawy usługi Azure AD B2C. Zastąp <your-tenant-ID> element identyfikatorem dzierżawy usługi Azure AD B2C.
policies	policyName	Przepływ użytkownika lub zasady niestandardowe utworzone w kroku 1. Jeśli aplikacja używa wielu przepływów użytkownika lub zasad niestandardowych, określ tylko jeden. Na przykład użyj przepływu rejestracji lub logowania użytkownika.
zasób	zakres	Zakresy rejestracji aplikacji internetowego interfejsu API z kroku 2.5.

Ostateczny plik konfiguracji powinien wyglądać podobnie do następującego kodu JSON:

{
    "credentials": {
        "tenantName": "<your-tenant-namee>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
} 

Krok 5. Uruchamianie usługi Angular SPA i internetowego interfejsu API

Teraz możesz przetestować dostęp w zakresie platformy Angular do interfejsu API. W tym kroku uruchom zarówno internetowy interfejs API, jak i przykładową aplikację Angular na komputerze lokalnym. Następnie zaloguj się do aplikacji Angular i wybierz przycisk TodoList , aby rozpocząć żądanie do chronionego interfejsu API.

Uruchamianie internetowego interfejsu API

1. Otwórz okno konsoli i przejdź do katalogu zawierającego przykład internetowego interfejsu API. Przykład:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Uruchom następujące polecenia:

   npm install && npm update
   node index.js
   

   W oknie konsoli zostanie wyświetlony numer portu, w którym jest hostowana aplikacja:

   Listening on port 5000...
   

Uruchamianie aplikacji Angular

1. Otwórz kolejne okno konsoli i przejdź do katalogu zawierającego przykład Angular. Przykład:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. Uruchom następujące polecenia:

   npm install && npm update
   npm start
   

   W oknie konsoli zostanie wyświetlony numer portu, w którym jest hostowana aplikacja:

   Listening on port 4200...
   

3. Przejdź do http://localhost:4200 witryny w przeglądarce, aby wyświetlić aplikację.

4. Wybierz Zaloguj.

   

5. Ukończ proces rejestracji lub logowania.

6. Po pomyślnym zalogowaniu powinien zostać wyświetlony profil. Z menu wybierz pozycję TodoList.

   

7. Wybierz pozycję Dodaj , aby dodać nowe elementy do listy lub użyj ikon, aby usunąć lub edytować elementy.

   

Wdrażanie aplikacji

W aplikacji produkcyjnej identyfikator URI przekierowania dla rejestracji aplikacji jest zazwyczaj publicznie dostępnym punktem końcowym, w którym aplikacja jest uruchomiona, na przykład https://contoso.com.

W dowolnym momencie możesz dodawać i modyfikować identyfikatory URI przekierowania w zarejestrowanych aplikacjach. Następujące ograniczenia dotyczą identyfikatorów URI przekierowania:

• Adres URL odpowiedzi musi zaczynać się od schematu https.
• W adresie URL odpowiedzi jest uwzględniana wielkość liter. Jego wielkość liter musi być zgodna ze wielkością ścieżki adresu URL uruchomionej aplikacji.

Następne kroki

• Dowiedz się więcej o przykładzie kodu
• Włączanie uwierzytelniania we własnej aplikacji Angular
• Konfigurowanie opcji uwierzytelniania w aplikacji Angular
• Włączanie uwierzytelniania we własnym internetowym interfejsie API