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.

Przegląd

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 Angulara użyto MSAL Angular i MSAL Browser. Biblioteka MSAL to narzędzie udostępniane przez firmę Microsoft, które upraszcza dodawanie wsparcia dla uwierzytelniania i autoryzacji do jednostronicowych aplikacji (SPA) w Angularze.

Proces logowania

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

1. Użytkownik otworzy aplikację i wybierze pozycję Zaloguj się.
2. Aplikacja uruchamia żądanie uwierzytelniania i przekierowuje użytkownika do usługi Azure AD B2C.
3. Użytkownik się zarejestruje lub zaloguje się i resetuje hasłolub loguje 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 informacje tokenu identyfikatora.
   3. Przechowuje token dostępu i token odświeżania w pamięci podręcznej RAM 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 logowanie się aplikacji 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 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. Udziel aplikacji (ID aplikacji: 1) uprawnień do zakresów webowego API (ID aplikacji: 2).

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

Wezwanie do API sieciowego

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 za pomocą tokenu nosiciela. 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.

Przepływ wylogowywania

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

1. Z aplikacji użytkownicy się wylogowują.
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:

• Visual Studio Code lub dowolnego innego edytora kodu.
• Node.js środowiska uruchomieniowego i npm .
• Angular CLI.

Krok 1. Konfigurowanie przepływu użytkownika

Gdy użytkownicy próbują zalogować się do aplikacji, aplikacja uruchamia żądanie uwierzytelniania za pośrednictwem przepływu użytkownika do punktu końcowego autoryzacji. 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 zrobiłeś/zrobiłaś, utwórz przepływ użytkownika lub niestandardowe zasady. 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 także funkcję Nie pamiętasz hasła.
• Przepływ użytkownika dotyczący edycji profilu, taki jak edit_profile.
• Przepływ użytkownika dotyczący resetowania Password reset, taki jak reset_password.

Usługa Azure AD B2C dodaje B2C_1_ do nazwy 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 Angular SPA oraz aplikacji web API. Określasz również zakresy internetowego interfejsu API.

2.1 Zarejestruj aplikację web 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 twojego dzierżawcę 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 adresu 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ądzajwybierz pozycję Uwidaczniaj interfejs API.

3. Obok 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 API, powinna dodać ten identyfikator URI jako prefiks dla każdego zakresu zdefiniowanego dla 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. Dla Nazwa zakresu, wprowadź tasks.read.
   2. W polu Nazwa wyświetlana zgody administratora, wprowadź Odczyt dostępu do interfejsu API zadań.
   3. W polu Opis zgody administratora wprowadź Zezwala na dostęp do odczytu do 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. Dla Nazwa zakresu wpisz tasks.write.
   2. W polu Wyświetlana nazwa zgody administratora wprowadź Zapis dostępu do interfejsu API zadań.
   3. W polu Opis zgody administratora wprowadź wartość Zezwalaj 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ę na dzierżawę Azure AD B2C z menu Katalogi + 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 wpisz MyApp.
6. W obszarze Obsługiwane typy kontwybierz Konta w dowolnym dostawcy tożsamości lub katalogu organizacyjnym, aby uwierzytelniać użytkowników za pomocą przepływów użytkowników.
7. W obszarze Identyfikator URI przekierowaniawybierz pozycję aplikacji jednostronicowej (SPA), a następnie wprowadź http://localhost:4200 w polu Adres URL.
8. W obszarze Uprawnienia zaznacz pole wyboru Udziel zgody administratora na uprawnienia openid i dostęp offline.
9. Wybierz pozycję Zarejestruj.
10. Zanotuj wartość identyfikatora aplikacji (klienta) do użycia w późniejszym kroku podczas konfigurowania aplikacji webowej.

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 sekcji Zarządzanie wybierz Uprawnienia 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ć udzielony dostęp aplikacji internetowej. 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 pozycję Dodaj uprawnienia.

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

9. Wybierz opcję Tak.

10. Wybierz Odśwież, a następnie sprawdź, czy pod Stanem dla obu zakresów pojawia się 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 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

Skoro już uzyskałeś próbkę SPA, zaktualizuj kod, używając wartości swojego Azure AD B2C i web API. W przykładowym folderze, w folderze src/app, otwórz plik auth-config.ts. Zaktualizuj klucze odpowiednimi wartościami:

Sekcja	Klucz	Wartość
b2cPolicies (polityki B2C)	Nazwy	Przepływ użytkownika lub zasady niestandardowe utworzone w kroku 1.
b2cPolicies	władze	Zastąp your-tenant-name nazwą dzierżawy usługi Azure AD B2C . Użyj na przykład nazwy contoso.onmicrosoft.com. Następnie zastąp nazwę zasady przepływem użytkownika lub zasadą niestandardową utworzoną w kroku 1 . Na przykład: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2cPolicies	domena autorytetów	Nazwa dzierżawy usługi Azure AD B2C . Na przykład: contoso.onmicrosoft.com.
Konfiguracja	clientId	Identyfikator aplikacji Angular z kroku 2.3.
chronione zasoby	punkt końcowy	Adres URL internetowego interfejsu API: http://localhost:5000/api/todolist.
chronioneZasoby	zakresy	Zakresy interfejsu API sieci 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 instancją Azure AD B2C.

Pobierz archiwum *.ziplub 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 na GitHubie 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 API wykorzystuje te informacje do weryfikacji tokenu dostępu, który aplikacja internetowa przekazuje jako token nosiciela. Zaktualizuj następujące właściwości ustawień aplikacji:

Sekcja	Klucz	Wartość
dane uwierzytelniające	nazwa najemcy	Pierwsza część nazwy dzierżawy usługi Azure AD B2C . Na przykład: contoso.
dane uwierzytelniające	identyfikator klienta	Identyfikator aplikacji API z kroku 2.1. Na wcześniejszym diagramie jest to aplikacja z identyfikatorem aplikacji : 2.
dane uwierzytelniające	emitent	(Opcjonalnie) Wartość roszczenia wystawcy tokenu iss. 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> pierwszą częścią nazwy dzierżawy usługi Azure AD B2C . Zastąp <your-tenant-ID> identyfikatorem dzierżawy usługi Azure AD B2C.
polityki	policyName	Przepływ użytkownika lub zasady niestandardowe, które utworzyłeś 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-name>",
        "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. Na 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. Na 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 w przeglądarce, aby wyświetlić aplikację.

4. Wybierz pozycję Login.

   

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ą adresów URL 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 z wielkością liter w ścieżce URL twojej uruchomionej aplikacji.

Powiązana zawartość

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