Samouczek: kompleksowe uwierzytelnianie i autoryzacja użytkowników w usłudze Azure App Service

Usługa Azure App Service oferuje wysoce skalowalną i samonaprawialną usługę hostingu w Internecie. Ponadto usługa App Service zapewnia wbudowaną obsługę uwierzytelniania i autoryzacji użytkowników. Ten samouczek przedstawia sposób zabezpieczania aplikacji za pomocą uwierzytelniania i autoryzacji usługi App Service. Jako przykład używa Express.js z frontonem widoków. Usługa App Service obsługuje uwierzytelnianie i autoryzację dla wszystkich języków programowania; śledząc kroki w samouczku, możesz dowiedzieć się, jak zastosować je w preferowanym języku.

Usługa aplikacji Azure oferuje wysoce skalowalną, samopatchującą się usługę hostingu internetowego działającą na systemie operacyjnym Linux. Ponadto usługa App Service zapewnia wbudowaną obsługę uwierzytelniania i autoryzacji użytkowników. Ten samouczek przedstawia sposób zabezpieczania aplikacji za pomocą uwierzytelniania i autoryzacji usługi App Service. Używa Express.js z widokami. Usługa App Service obsługuje uwierzytelnianie i autoryzację dla wszystkich języków programowania; śledząc kroki w samouczku, możesz dowiedzieć się, jak zastosować je w preferowanym języku.

Z tego samouczka dowiesz się:

• Włączanie wbudowanego uwierzytelniania i autoryzacji
• Zabezpieczanie aplikacji przed nieuwierzytelnionymi żądaniami
• Używanie identyfikatora Entra firmy Microsoft jako dostawcy tożsamości
• Uzyskiwanie dostępu do zdalnej aplikacji w imieniu zalogowanego użytkownika
• Zabezpieczanie wywołań między usługami, korzystając z uwierzytelniania przy użyciu tokenów
• Używanie tokenów dostępu z poziomu kodu serwera

Napiwek

Po ukończeniu tego scenariusza przejdź do następnej procedury, aby dowiedzieć się, jak połączyć się z usługami platformy Azure jako uwierzytelniony użytkownik. Typowe scenariusze obejmują uzyskiwanie dostępu do usługi Azure Storage lub bazy danych jako użytkownika, który ma określone możliwości lub dostęp do określonych tabel lub plików.

Uwierzytelnianie w tej procedurze jest udostępniane w warstwie platformy hostingowej przez usługę Azure App Service. Musisz wdrożyć aplikację frontend i backend oraz skonfigurować uwierzytelnianie dla tej aplikacji internetowej, aby można było z niej korzystać.

Pobieranie profilu użytkownika

Aplikacja frontendowa jest skonfigurowana do bezpiecznego korzystania z interfejsu API backendu. Aplikacja frontendowa zapewnia użytkownikowi logowanie Microsoft, a następnie pozwala mu uzyskać swój fałszywy profil z backendu. W tym samouczku użyto fałszywego profilu, aby uprościć kroki potrzebne do ukończenia scenariusza.

Przed wykonaniem kodu źródłowego na frontonie usługa App Service wprowadza uwierzytelnione accessToken z nagłówka usługi App Service x-ms-token-aad-access-token . Następnie kod źródłowy frontendu uzyskuje accessToken i wysyła go do serwera zaplecza jako bearerToken, aby bezpiecznie uzyskać dostęp do API zaplecza. Serwer zaplecza weryfikuje element bearerToken przed przekazaniem go do kodu źródłowego zaplecza. Kiedy kod źródłowy zaplecza otrzyma bearerToken, można go użyć.

W następnym artykule z tej serii element bearerToken jest wymieniany dla tokenu z zakresem umożliwiającym dostęp do interfejsu API programu Microsoft Graph. Interfejs API programu Microsoft Graph zwraca informacje o profilu użytkownika.

Wymagania wstępne

Jeśli nie masz jeszcze konta platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

• Node.js (LTS)

• Używaj środowiska Bash w Azure Cloud Shell. Aby uzyskać więcej informacji, zobacz Rozpoczynanie pracy z usługą Azure Cloud Shell.

  

• Jeśli wolisz uruchamiać polecenia referencyjne interfejsu wiersza polecenia lokalnie, zainstaluj interfejs wiersza polecenia platformy Azure. Jeśli korzystasz z systemu Windows lub macOS, rozważ uruchomienie interfejsu wiersza polecenia platformy Azure w kontenerze Docker. Aby uzyskać więcej informacji, zobacz Jak uruchomić interfejs wiersza polecenia platformy Azure w kontenerze platformy Docker.

  • Jeśli korzystasz z instalacji lokalnej, zaloguj się do interfejsu wiersza polecenia platformy Azure za pomocą polecenia az login. Aby ukończyć proces uwierzytelniania, wykonaj kroki wyświetlane w terminalu. Aby uzyskać inne opcje logowania, zobacz Uwierzytelnianie na platformie Azure przy użyciu interfejsu wiersza polecenia platformy Azure.

  • Zainstaluj rozszerzenie Azure CLI przy pierwszym użyciu, gdy pojawi się monit. Aby uzyskać więcej informacji na temat rozszerzeń, zobacz Używanie rozszerzeń i zarządzanie nimi za pomocą interfejsu wiersza polecenia platformy Azure.

  • Uruchom polecenie az version, aby znaleźć zainstalowane wersje i biblioteki zależne. Aby uaktualnić do najnowszej wersji, uruchom polecenie az upgrade.

1. Sklonuj przykładową aplikację

1. W usłudze Azure Cloud Shell uruchom następujące polecenie, aby sklonować przykładowe repozytorium.

   git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
   

2. Tworzenie i wdrażanie aplikacji

Utwórz grupę zasobów, plan aplikacji internetowej, aplikację internetową i wdróż w jednym kroku.

1. Przejdź do katalogu aplikacji internetowej frontendowej.

   cd js-e2e-web-app-easy-auth-app-to-app/frontend
   

2. Utwórz i wdróż aplikację internetową frontonu za pomocą polecenia az webapp up. Ponieważ nazwa aplikacji internetowej musi być globalnie unikatowa, zastąp <front-end-app-name> unikatową nazwą.

   az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
   

3. Przejdź do katalogu aplikacji internetowej zaplecza.

   cd ../backend
   

4. Wdróż aplikację internetową zaplecza w tej samej grupie zasobów i planie aplikacji. Ponieważ nazwa aplikacji internetowej musi być globalnie unikatowa, zastąp <back-end-app-name> unikatowym zestawem inicjałów lub liczb.

   az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
   

1. Przejdź do katalogu aplikacji internetowej frontendowej.

   cd frontend
   

2. Utwórz i wdróż aplikację internetową frontonu za pomocą polecenia az webapp up. Ponieważ nazwa aplikacji internetowej musi być globalnie unikatowa, zastąp <front-end-app-name> unikatowym zestawem inicjałów lub liczb.

   az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"
   

3. Przejdź do katalogu aplikacji internetowej zaplecza.

   cd ../backend
   

4. Wdróż aplikację internetową zaplecza w tej samej grupie zasobów i planie aplikacji. Ponieważ nazwa aplikacji internetowej musi być globalnie unikatowa, zastąp <back-end-app-name> unikatowym zestawem inicjałów lub liczb.

   az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"
   

3. Konfigurowanie ustawienia aplikacji

Aplikacja frontonu musi znać adres URL aplikacji zaplecza dla żądań interfejsu API. Użyj następującego polecenia interfejsu wiersza polecenia platformy Azure, aby skonfigurować ustawienie aplikacji. Adres URL powinien mieć format https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4. Fronton wywołuje zaplecze

Przejdź do aplikacji frontendowej i zwróć fałszywy profil z backendu. Ta akcja sprawdza, czy fronton pomyślnie żąda profilu z zaplecza, a zaplecze zwraca profil.

1. Otwórz aplikację internetową frontonu w przeglądarce https://<front-end-app-name>.azurewebsites.net.

   

2. Wybierz link Get user's profile.

3. Wyświetl fałszywy profil zwrócony z aplikacji internetowej zaplecza.

   

   Wartość withAuthenticationfalse wskazuje, że uwierzytelnianie nie zostało jeszcze skonfigurowane.

5. Konfigurowanie uwierzytelniania

W tym kroku włączysz uwierzytelnianie i autoryzację dla dwóch aplikacji internetowych. W tym samouczku użyto identyfikatora Entra firmy Microsoft jako dostawcy tożsamości.

Należy również skonfigurować aplikację frontonu w taki sposób, aby:

• Udzielanie aplikacji frontonu dostępu do aplikacji zaplecza
• Skonfigurowanie usługi App Service do zwracania tokenu nadającego się do użycia
• Użyj tokenu w kodzie.

Aby uzyskać więcej informacji, zobacz Configure Microsoft Entra authentication for your App Services application (Konfigurowanie uwierzytelniania entra firmy Microsoft dla aplikacji usługi App Services).

Włączanie uwierzytelniania i autoryzacji dla aplikacji zaplecza

1. W menu witryny Azure Portal wybierz pozycję Grupy zasobów lub wyszukaj i wybierz pozycję Grupy zasobów na dowolnej stronie.

2. W Grupach zasobów znajdź i wybierz swoją grupę zasobów. W obszarze Przegląd wybierz aplikację zaplecza.

3. W menu po lewej stronie aplikacji backendu wybierz Uwierzytelnianie, a następnie Dodaj dostawcę tożsamości.

4. Na stronie Dodaj dostawcę tożsamości wybierz Microsoft jako dostawcę tożsamości, aby zalogować się przy użyciu tożsamości Microsoft i Microsoft Entra.

5. Zaakceptuj ustawienia domyślne i wybierz pozycję Dodaj.

   

6. Otwiera się strona Uwierzytelniania. Skopiuj identyfikator klienta aplikacji Microsoft Entra do Notatnika. Ta wartość będzie potrzebna później.

   

Jeśli zatrzymasz się tutaj, masz samodzielną aplikację, która jest już zabezpieczona przez uwierzytelnianie i autoryzację usługi App Service. W pozostałych sekcjach pokazano, jak zabezpieczyć rozwiązanie z wieloma aplikacjami poprzez "przepływ" uwierzytelnionego użytkownika z frontendu do backendu.

Włącz uwierzytelnianie i autoryzację dla aplikacji frontendowej

1. W menu witryny Azure Portal wybierz pozycję Grupy zasobów lub wyszukaj i wybierz pozycję Grupy zasobów na dowolnej stronie.

2. W Grupach zasobów znajdź i wybierz swoją grupę zasobów. W obszarze Przegląd wybierz stronę zarządzania aplikacją frontendową.

3. W menu po lewej stronie aplikacji frontend wybierz pozycję Uwierzytelnianie, a następnie wybierz pozycję Dodaj dostawcę tożsamości.

4. Na stronie Dodaj dostawcę tożsamości wybierz Microsoft jako dostawcę tożsamości, aby zalogować się przy użyciu tożsamości Microsoft i Microsoft Entra.

5. Zaakceptuj ustawienia domyślne i wybierz pozycję Dodaj.

6. Otwiera się strona Uwierzytelniania. Skopiuj identyfikator klienta aplikacji Microsoft Entra do Notatnika. Ta wartość będzie potrzebna później.

Udzielanie aplikacji frontend dostępu do backendu

Teraz, po włączeniu uwierzytelniania i autoryzacji dla obu aplikacji, każda z nich jest wspierana przez aplikację usługi AD. Aby ukończyć uwierzytelnianie, należy wykonać trzy czynności:

• Udzielanie aplikacji frontonu dostępu do aplikacji zaplecza
• Skonfigurowanie usługi App Service do zwracania tokenu nadającego się do użycia
• Użyj tokenu w kodzie.

Napiwek

Jeśli napotkasz błędy i zmienisz konfigurację ustawień uwierzytelniania/autoryzacji aplikacji, tokeny w magazynie tokenów mogą nie zostać ponownie wygenerowane na podstawie nowych ustawień. Aby mieć pewność, że tokeny zostaną ponownie wygenerowane, musisz wylogować się z aplikacji i zalogować się do niej ponownie. Łatwo to zrobić, korzystając z przeglądarki w trybie prywatnym. Po zmianie ustawień w aplikacjach zamknij przeglądarkę i otwórz ją ponownie w trybie prywatnym.

W tym kroku przyznasz aplikacji frontendowej dostęp do aplikacji backendowej w imieniu użytkownika. (Technicznie podajesz frontonowi Aplikacja usługi AD uprawnienia dostępu do aplikacji usługi AD zaplecza w imieniu użytkownika).

1. Na stronie Uwierzytelnianie aplikacji frontendowej wybierz nazwę aplikacji frontendowej w obszarze Dostawca tożsamości. Ta rejestracja aplikacji została wygenerowana automatycznie. Wybierz Uprawnienia interfejsu API w menu po lewej stronie.

2. Wybierz Dodaj uprawnienie, a następnie wybierz Moje API><back-end-app-name>.

3. Na stronie Żądanie uprawnień interfejsu API dla aplikacji zaplecza wybierz Delegowane uprawnienia i user_impersonation, a następnie wybierz Dodaj uprawnienia.

   

Konfigurowanie usługi App Service do zwracania nadającego się do użycia tokenu dostępu

Aplikacja frontendowa ma teraz wymagane uprawnienia, aby uzyskać dostęp do aplikacji backendowej jako zalogowany użytkownik. W tym kroku skonfigurujesz uwierzytelnianie i autoryzację usługi App Service w celu udzielenia użytecznego tokenu dostępu na potrzeby uzyskiwania dostępu do zaplecza. W tym kroku potrzebny jest identyfikator klienta zaplecza, który skopiowałeś z Włącz uwierzytelnianie i autoryzację dla zaplecza aplikacji.

W usłudze Cloud Shell uruchom następujące polecenia w aplikacji frontendowej, aby dodać parametr scope do ustawienia uwierzytelniania identityProviders.azureActiveDirectory.login.loginParameters. Zastąp <nazwa-aplikacji-frontowej> i <identyfikator-klienta-zaplecza>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Polecenia skutecznie dodają loginParameters właściwość z dodatkowymi niestandardowymi zakresami. Oto wyjaśnienie żądanych zakresów:

• openid jest żądane przez App Service domyślnie. Aby uzyskać informacje, zobacz OpenID Connect Scopes (Zakresy połączeń OpenID).
• offline_access jest uwzględniona w tym miejscu dla wygody (na wypadek, gdy chcesz odświeżyć tokeny).
• api://<back-end-client-id>/user_impersonation to udostępniony interfejs API w rejestracji aplikacji zaplecza. Jest to zakres, który zapewnia JWT, który zawiera aplikację zaplecza jako odbiorców tokenów.

Napiwek

• Aby wyświetlić api://<back-end-client-id>/user_impersonation zakres w portalu Azure, przejdź do strony Uwierzytelnianie dla aplikacji zaplecza, kliknij link w sekcji Dostawca tożsamości, a następnie kliknij na Uwypuklij interfejs API w menu po lewej stronie.
• Aby zamiast tego skonfigurować wymagane zakresy przy użyciu interfejsu internetowego, zobacz kroki firmy Microsoft w temacie Odświeżanie tokenów uwierzytelniania.
• Niektóre zakresy wymagają zgody administratora lub użytkownika. To wymaganie powoduje wyświetlenie strony żądania zgody, gdy użytkownik loguje się do aplikacji frontendowej w przeglądarce. Aby uniknąć tej strony zgody, dodaj rejestrację aplikacji frontendowej jako autoryzowaną aplikację kliencką na stronie Eksponowanie interfejsu API, klikając pozycję Dodaj aplikację kliencką i podając identyfikator klienta rejestracji aplikacji frontendowej.

Aplikacje są teraz skonfigurowane. Fronton jest teraz gotowy do uzyskania dostępu do zaplecza przy użyciu odpowiedniego tokenu dostępu.

Aby uzyskać informacje na temat konfigurowania tokenu dostępu dla innych dostawców, zobacz Odśwież tokeny dostawcy tożsamości.

6. Skonfiguruj usługę App Service zaplecza, aby akceptowała tokeny tylko z usługi App Service warstwy frontowej

Należy również skonfigurować usługę App Service zaplecza tak, aby akceptowała token tylko z usługi App Service frontendu. Niezastosowanie się do tego może skutkować błędem "403: Zabronione" podczas przekazywania tokenu z frontendu do backendu.

Można to ustawić za pomocą tego samego procesu interfejsu wiersza polecenia platformy Azure, który został użyty w poprzednim kroku.

1. Pobierz appId frontendu usługi App Service (możesz to znaleźć w panelu "Uwierzytelnianie" frontendu usługi App Service).

2. Uruchom następujący Azure CLI, zastępując zmienne <back-end-app-name> i <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. Frontend używa uwierzytelnionego zaplecza

Aplikacja frontendowa musi przekazać uwierzytelnienie użytkownika z prawidłowym user_impersonation zakresem do backendu. W poniższych krokach zapoznaj się z kodem podanym w przykładzie dla tej funkcji.

Wyświetl kod źródłowy aplikacji frontonu:

1. Użyj nagłówka z wstrzykniętej Usługi frontowej App Service, aby programowo uzyskać token dostępu użytkownika.

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. Użyj tokenu accessToken w nagłówku Authentication jako bearerToken wartości.

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   Ten samouczek zwraca fałszywy profil, aby uprościć scenariusz. W następnym samouczku z tej serii samouczków pokazano, jak wymienić zapleczowy token uwierzytelniający na nowy token z zakresem usługi Azure z niższego poziomu, takiej jak Microsoft Graph.

7. Backend zwraca profil do frontendu

Jeśli żądanie z interfejsu użytkownika nie jest autoryzowane, usługa zaplecza App Service odrzuca żądanie z kodem błędu HTTP 401, zanim dotrze do kodu aplikacji. Po dotarciu do kodu zaplecza (ponieważ zawiera on autoryzowany token), wyodrębnij token bearer, aby uzyskać token dostępu.

Wyświetl kod źródłowy aplikacji zaplecza:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8. Przejdź do aplikacji

1. Użyj witryny internetowej front-endu w przeglądarce. Adres URL ma format https://<front-end-app-name>.azurewebsites.net/.

2. Przeglądarka żąda uwierzytelnienia do aplikacji internetowej. Ukończ uwierzytelnianie.

   

3. Po zakończeniu uwierzytelniania aplikacja frontonu zwraca stronę główną aplikacji.

   

4. Wybierz opcję Get user's profile. Spowoduje to przekazanie uwierzytelniania w tokenie elementu nośnego do zaplecza.

5. Zaplecze odpowiada za pomocą fałszywej zakodowanej nazwy profilu: John Doe.

   

   Wartość withAuthenticationtrue wskazuje, że uwierzytelnianie nie zostało jeszcze skonfigurowane.

9. Czyszczenie zasobów

W poprzednich krokach utworzono zasoby platformy Azure w grupie zasobów.

1. Usuń grupę zasobów, uruchamiając następujące polecenie w usłudze Cloud Shell. Wykonanie tego polecenia może potrwać około minutę.

   az group delete --name myAuthResourceGroup
   

2. Użyj identyfikatora klienta aplikacji do uwierzytelniania, który wcześniej znaleziono i zanotowano w Enable authentication and authorization sekcjach aplikacji zaplecza i interfejsu użytkownika.

3. Usuń rejestracje aplikacji zarówno dla aplikacji frontonu, jak i zaplecza.

   # delete app - do this for both frontend and backend client ids
   az ad app delete <client-id>
   

Często zadawane pytania

Jak mogę przetestować to uwierzytelnianie na maszynie deweloperów lokalnych?

Uwierzytelnianie w tej procedurze jest udostępniane w warstwie platformy hostingowej przez usługę Azure App Service. Nie ma równoważnego emulatora. Aby móc skorzystać z uwierzytelniania, należy wdrożyć aplikacje frontendową i backendową oraz skonfigurować uwierzytelnianie dla każdej z nich.

Aplikacja nie wyświetla fałszywego profilu, jak ją debugować?

Aplikacje frontendowa i backendowa mają /debug ścieżki ułatwiające debugowanie uwierzytelniania, gdy aplikacja nie zwraca profilu fałszywego. Trasa debugowania frontonu udostępnia krytyczne elementy do weryfikacji:

• Zmienne środowiskowe:
  • Element BACKEND_URL jest poprawnie skonfigurowany jako https://<back-end-app-name>.azurewebsites.net. Nie dołączaj tego ukośnika do przodu ani trasy.
• Nagłówki HTTP:
  • Nagłówki x-ms-token-* są wstrzykiwane.
• Zostanie wyświetlona nazwa profilu programu Microsoft Graph dla zalogowanych użytkowników.
• Zakres aplikacji frontendowej dla tokenu ma . Jeśli zakres tego nie obejmuje, może to być kwestia czasu. Sprawdź parametry aplikacji front-end login w zasobach Azure. Poczekaj kilka minut na replikację uwierzytelniania.

Czy kod źródłowy aplikacji został prawidłowo wdrożony w każdej aplikacji internetowej?

1. W witrynie Azure Portal dla aplikacji internetowej wybierz pozycję Narzędzia programistyczne —> Narzędzia zaawansowane, a następnie wybierz pozycję Przejdź ->. Spowoduje to otwarcie nowej karty lub okna przeglądarki.

2. Na nowej karcie przeglądarki wybierz pozycję Przeglądaj katalog —> witryna wwwroot.

3. Sprawdź, czy w katalogu znajdują się następujące elementy:

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. Sprawdź, czy właściwość package.json name jest taka sama jak nazwa sieciowa, czyli frontend lub backend.

5. Jeśli kod źródłowy został zmieniony i trzeba go ponownie wdrożyć, użyj polecenia az webapp up z katalogu zawierającego plik package.json dla tej aplikacji.

Czy aplikacja została uruchomiona poprawnie

Obie aplikacje internetowe powinny zwrócić odpowiedź na żądanie strony głównej. Jeśli nie możesz nawiązać połączenia z /debug aplikacją internetową, aplikacja nie uruchamiała się poprawnie. Przejrzyj dzienniki błędów dla tej aplikacji internetowej.

1. W witrynie Azure Portal dla aplikacji internetowej wybierz pozycję Narzędzia programistyczne —> Narzędzia zaawansowane, a następnie wybierz pozycję Przejdź ->. Spowoduje to otwarcie nowej karty lub okna przeglądarki.
2. Na nowej karcie przeglądarki wybierz pozycję Przeglądaj katalog —> dzienniki wdrażania.
3. Przejrzyj każdy dziennik, aby znaleźć zgłoszone problemy.

Czy aplikacja frontendowa może komunikować się z aplikacją backendową?

Ponieważ aplikacja frontendowa wywołuje aplikację backendową przez kod źródłowy serwera, nie jest widoczne w ruchu sieciowym przeglądarki. Użyj poniższej listy, aby określić powodzenie żądania profilu zaplecza:

• Aplikacja backendowa zwraca wszelkie błędy do aplikacji frontendowej, jeśli uda się do niej dotrzeć. Jeśli nie został uzyskany, aplikacja frontend zgłasza kod stanu i komunikat.
  • 401: Użytkownik nie przeszedł poprawnie uwierzytelniania. Może to wskazywać, że zakres nie jest poprawnie ustawiony.
  • 404: Adres URL serwera nie jest zgodny z trasą, którą ma serwer
• Użyj dzienników przesyłania strumieniowego aplikacji zaplecza, aby obserwować, jak wysyłasz żądanie dotyczące profilu użytkownika za pomocą interfejsu użytkownika. W kodzie console.log źródłowym znajdują się informacje debugowania, które pomagają określić, gdzie wystąpił błąd.

Co się dzieje, gdy wygasa token interfejsu użytkownika?

Token dostępu wygasa po pewnym czasie. Aby uzyskać informacje na temat odświeżania tokenów dostępu bez konieczności ponownego uwierzytelniania użytkowników w aplikacji, zobacz Odświeżanie tokenów dostawców tożsamości.

Jeśli mam aplikację front-end opartą na przeglądarce, czy może komunikować się bezpośrednio z zapleczem?

Takie podejście wymaga, aby kod serwera przekazał token dostępu do kodu JavaScript uruchomionego w przeglądarce klienta. Ponieważ nie ma możliwości zabezpieczenia tokenu dostępu w przeglądarce, nie jest to zalecane podejście. Obecnie zalecany jest wzorzec Backend-for-Frontend. Jeśli zastosować to do przykładu w tym samouczku, kod przeglądarki w aplikacji front-endu dokonywałby wywołań API w uwierzytelnionej sesji do kodu serwera jako pośrednika, a kod serwera w aplikacji front-endu z kolei wykonywałby wywołania API do aplikacji back-endu, używając wartości nagłówka x-ms-token-aad-access-token jako tokena nosiciela. Wszystkie wywołania z kodu przeglądarki do kodu serwera będą już chronione przez uwierzytelnioną sesją.

Następne kroki

Czego się nauczyłeś/nauczyłaś?

• Włączanie wbudowanego uwierzytelniania i autoryzacji
• Zabezpieczanie aplikacji przed nieuwierzytelnionymi żądaniami
• Używanie identyfikatora Entra firmy Microsoft jako dostawcy tożsamości
• Uzyskiwanie dostępu do zdalnej aplikacji w imieniu zalogowanego użytkownika
• Zabezpieczanie wywołań między usługami, korzystając z uwierzytelniania przy użyciu tokenów
• Używanie tokenów dostępu z poziomu kodu serwera

Przejdź do następnego samouczka, aby dowiedzieć się, jak używać tożsamości tego użytkownika do uzyskiwania dostępu do usługi platformy Azure.

  Utwórz bezpieczną aplikację n-warstwową w Azure App Service