Ćwiczenie — konfigurowanie dostawców uwierzytelniania i dostępu

4 min

Aplikacja internetowa listy zakupów musi zabezpieczyć dostęp do niektórych tras i wyłączyć określonych dostawców uwierzytelniania. W tym ćwiczeniu zaktualizujesz konfigurację routingu aplikacji internetowej, aby osiągnąć ten wynik.

W tym ćwiczeniu należy wykonać następujące kroki:

Dodaj reguły do konfiguracji routingu, aby wyłączyć niektórych dostawców uwierzytelniania.
Zabezpiecz listę produktów, aby tylko uwierzytelnieni użytkownicy mogli uzyskiwać do niej dostęp.
Wdróż zaktualizowaną aplikację.
Przetestuj, czy ograniczenia są skuteczne.

Wyłączanie dostawców uwierzytelniania

Zaktualizujemy konfigurację routingu aplikacji, aby wyłączyć dostawcę uwierzytelniania Firmy Microsoft Entra.

Otwórz projekt w programie Visual Studio Code.

Otwórz następujący plik.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

W katalogu głównym obiektu JSON dodaj następującą konfigurację routingu.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
Dodając tę regułę routingu, uniemożliwiamy naszym użytkownikom dostęp do dostawcy uwierzytelniania Firmy Microsoft Entra.

Zabezpieczanie dostępu do listy produktów

Następnie chcemy zabezpieczyć listę produktów, aby tylko uwierzytelnieni mogli uzyskać dostęp do interfejsu API. W tym celu dodamy kolejną regułę routingu staticwebapp.config.json w pliku konfiguracji.

Dodaj następującą regułę w górnej części tablicy routes .

{
  "route": "/api/products/*",
  "allowedRoles": ["authenticated"]
},

Ukończony staticwebapp.config.json plik powinien wyglądać następująco:

{
  "routes": [
    {
      "route": "/api/products/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/aad",
      "statusCode": 404
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

Wdrażanie zmian

Przed przetestowaniem wyniku tej konfiguracji ponownie wdrożymy naszą aplikację.

W programie Visual Studio Code otwórz paletę poleceń, naciskając F1.
Wprowadź i wybierz pozycję Git: Zatwierdź wszystko.
Wprowadź Secure access jako komunikat zatwierdzenia, a następnie naciśnij Enter.
Naciśnij klawisz F1, aby otworzyć paletę poleceń.
Wprowadź i wybierz pozycję Git: Wypchnij, a następnie naciśnij Enter.

Po wypchnięciu zmian poczekaj na uruchomienie procesu kompilacji i wdrożenia. Zmiany powinny być widoczne w wdrożonej aplikacji.

Testowanie nowych ograniczeń

Po ponownym uruchomieniu aplikacji możesz sprawdzić, czy nowe ograniczenia są skuteczne.

W oknie Eksplorator programu Visual Studio Code wróć do sekcji Static Web Apps , kliknij prawym przyciskiem myszy pozycję my-static-web-app-and-authn, a następnie wybierz pozycję Przeglądaj witrynę , aby wyświetlić aplikację w przeglądarce.
Jeśli nie zalogowano się, powinien zostać wyświetlony komunikat Brak autoryzacji zamiast listy produktów.
Wybierz pozycję Microsoft Entra ID na liście dostawców uwierzytelniania, aby się zalogować.

Powinna zostać wyświetlona strona błędu 404 podobna do następującej:
Naciśnij przycisk Wstecz przeglądarki, aby wrócić do aplikacji.
Wybierz pozycję GitHub na liście dostawców uwierzytelniania, aby się zalogować.
Wprowadź poświadczenia usługi GitHub, jeśli zostanie wyświetlony monit, a następnie wybierz pozycję Udziel zgody na stronie zgody platformy Azure.

Teraz zalogowano się i powinno zostać wyświetlona lista produktów.

Następne kroki