Szybki start: wprowadzenie do rozszerzenia Tożsamość zewnętrzna Microsoft Entra dla programu Visual Studio Code

Dotyczy: Dzierżawcy siły roboczej — dzierżawcy zewnętrzni (dowiedz się więcej)

Integrowanie uwierzytelniania z aplikacjami klientów konsumenckich i biznesowych jest niezbędne do zabezpieczania zasobów i danych klientów. Rozszerzenie Tożsamość zewnętrzna Microsoft Entra dla programu Visual Studio Code umożliwia szybkie tworzenie dzierżaw zewnętrznych, konfigurowanie środowisk logowania dla użytkowników zewnętrznych i konfigurowanie przykładu identyfikatora zewnętrznego bezpośrednio w programie Visual Studio Code. Korzystając z przewodnika po rozszerzeniu, możesz dowiedzieć się, jak skonfigurować dostosowane, oznaczone marką środowisko logowania dla użytkowników zewnętrznych aplikacji i uruchamiać projekty przy użyciu wstępnie skonfigurowanych przykładowych aplikacji.

To rozszerzenie zapewnia podstawową konfigurację, która automatycznie tworzy dzierżawę dla aplikacji i przygotowuje ją dla użytkowników. Usprawnia również przepływ pracy przez automatyczne wypełnianie wartości, takich jak identyfikatory aplikacji w pliku konfiguracji w celu zapewnienia bezproblemowego procesu konfiguracji.

Identyfikator zewnętrzny to usługa, którą można dodać do subskrypcji platformy Azure. Jeśli masz go już, możesz łatwo dołączyć identyfikator zewnętrzny. W przeciwnym razie skonfiguruj bezpłatną wersję próbną Tożsamość zewnętrzna Microsoft Entra w programie Visual Studio Code i rozpocznij od skonfigurowania przykładowej aplikacji.

Instalowanie rozszerzenia

Rozszerzenie Tożsamość zewnętrzna Microsoft Entra jest dostępne w witrynie Visual Studio Code Marketplace.

1. Jeśli nie masz jeszcze zainstalowanego programu Visual Studio Code, pobierz program Visual Studio Code i wykonaj kroki instalacji.
2. Zainstaluj rozszerzenie Tożsamość zewnętrzna Microsoft Entra dla programu Visual Studio Code z witryny https://aka.ms/vscodequickstart/marketplace.

Po zainstalowaniu rozszerzenia możesz uzyskać do niego dostęp przy użyciu ikony na pasku działań.

Możesz również otworzyć rozszerzenie na stronie powitalnej programu Visual Studio Code: wybierz pozycję Pomoc>powitalna, a następnie w obszarze Wskazówki wybierz pozycję Rozpocznij pracę z Tożsamość zewnętrzna Microsoft Entra. Może być konieczne wybranie pozycji Więcej... w celu rozwinięcia listy rozszerzeń.

Wprowadzenie do konfiguracji identyfikatora zewnętrznego

Rozszerzenie Tożsamość zewnętrzna Microsoft Entra tworzy dzierżawę w konfiguracji zewnętrznej, która zawiera aplikację i katalog użytkowników zewnętrznych. Możesz dodać tę nową dzierżawę do istniejącej subskrypcji platformy Azure. Jeśli nie masz subskrypcji platformy Azure, utwórz dzierżawę wersji próbnej, która nie wymaga tej subskrypcji (dowiedz się więcej).

• Na stronie powitalnej Wprowadzenie do Tożsamość zewnętrzna Microsoft Entra wybierz opcję:

  • Jeśli nie masz jeszcze konta platformy Azure, wybierz pozycję Skonfiguruj bezpłatną wersję próbną.
  • Jeśli masz już konto platformy Azure, wybierz pozycję Użyj mojej subskrypcji.

  

Konfigurowanie bezpłatnej wersji próbnej (wersja zapoznawcza)

1. Wybierz pozycję Skonfiguruj bezpłatną wersję próbną.

2. W komunikacie potwierdzenia logowania wybierz pozycję Zezwalaj.

3. Zostanie otwarte nowe okno przeglądarki. Zaloguj się przy użyciu konta osobistego, konta Microsoft (MSA) lub konta usługi GitHub. Po zalogowaniu zamknij okno przeglądarki.

4. Wróć do programu Visual Studio Code. W menu Gdzie powinna znajdować się dzierżawa? wybierz lokalizację danych dzierżawy. Tego wyboru nie można później zmienić.

5. Wprowadź unikatową nazwę dzierżawy.

   

6. Rozszerzenie tworzy dzierżawę wersji próbnej. Postęp można wyświetlić, otwierając okno Wyświetl>dane wyjściowe. Po zakończeniu procesu zostanie wyświetlona dzierżawa.

Korzystanie z subskrypcji

1. Wybierz pozycję Użyj mojej subskrypcji.

2. Jeśli istnieje wiele dzierżaw skojarzonych z twoim kontem, zostanie wyświetlone menu Wybierz katalog . Wybierz katalog (dzierżawę) skojarzony z subskrypcją, której chcesz użyć.

   

   Uwaga

   Jeśli zostanie wyświetlony komunikat Brak dostępnych subskrypcji, możesz zamiast tego skonfigurować bezpłatną wersję próbną.

3. Zostanie otwarta strona przeglądarki, na której można się zalogować na koncie. Po zalogowaniu wróć do programu Visual Studio Code.

4. W menu Dodawanie subskrypcji wybierz swoją subskrypcję.

5. W menu Wybierz grupę zasobów wybierz grupę zasobów.

6. W menu Gdzie powinna znajdować się dzierżawa? wybierz lokalizację danych dzierżawy. Tego wyboru nie można później zmienić.

7. Wprowadź nazwę dzierżawy, a następnie wybierz Enter , aby utworzyć dzierżawę.

   

   Uwaga

   Proces tworzenia dzierżawy może potrwać do 30 minut. Po utworzeniu dzierżawy możesz uzyskać do niej dostęp zarówno w centrum administracyjnym firmy Microsoft Entra, jak i w witrynie Azure Portal.

Konfigurowanie logowania dla użytkowników

Możesz skonfigurować aplikację, aby umożliwić użytkownikom logowanie się przy użyciu poczty e-mail i hasła lub jednorazowego kodu dostępu. Możesz również zaprojektować wygląd i działanie środowiska użytkownika, dodając logo firmy, zmieniając kolor tła lub dostosowując układ logowania. Te zmiany dotyczą wyglądu i działania wszystkich aplikacji w tej nowej dzierżawie.

1. W obszarze Konfigurowanie logowania dla użytkowników wybierz pozycję Skonfiguruj logowanie i znakowanie.

   

2. Zostanie wyświetlony monit o zalogowanie się do nowej dzierżawy. Wybierz pozycję Zezwalaj, a następnie w wyświetlonym oknie przeglądarki wybierz aktualnie używane konto i zaloguj się. Wróć do programu Visual Studio Code.

3. W menu Jak chcesz, aby użytkownicy logować się? w górnej części strony wybierz metodę logowania, którą chcesz udostępnić użytkownikom: Adres e-mail i hasło lub Adres e-mail i jednorazowy kod dostępu.

   

4. Wybierz przycisk OK.

5. Wybierz miejsce, w którym ma być wyświetlana strona logowania w oknie przeglądarki, wyrównana do środka lub wyrównana do prawej.

   

6. Wybierz kolor tła strony rejestracji.

   

7. Następnie zostanie otwarte okno Eksplorator plików umożliwiające dodanie logo firmy. Przejdź do pliku logo firmy, a następnie wybierz pozycję Przekaż.

   Uwaga

   Wymagania dotyczące obrazów są następujące:

   • Rozmiar obrazu 245 x 36 pikseli
   • Maksymalny rozmiar pliku 50 KB
   • Typ pliku: Transparent PNG lub JPEG

8. Zostanie wyświetlony komunikat Konfigurowanie przepływu logowania. Postęp można wyświetlić w oknie Dane wyjściowe. Po zakończeniu konfiguracji zostanie wyświetlony komunikat Konfiguracja przepływu użytkownika zostanie ukończona .

Wypróbuj środowisko logowania

Krok Wypróbuj logowanie w przewodniku umożliwia wyświetlenie podglądu skonfigurowanego środowiska logowania.

1. Wybierz przycisk Uruchom teraz. Zostanie otwarta nowa karta przeglądarki ze stroną rejestracji dzierżawy, która może służyć do tworzenia i logowania użytkowników.

2. Wybierz pozycję Nie ma konta? Utwórz go , aby utworzyć nowego użytkownika w dzierżawie.

3. Dodaj adres e-mail nowego użytkownika i wybierz pozycję Dalej. Nie używaj tej samej wiadomości e-mail użytej do utworzenia wersji próbnej.

4. Wykonaj kroki rejestracji na ekranie. Zazwyczaj po zalogowaniu się użytkownika nastąpi przekierowanie z powrotem do aplikacji. Ponieważ jednak nie skonfigurowano aplikacji w tym kroku, nastąpi przekierowanie do JWT.ms, gdzie można wyświetlić zawartość tokenu wystawionego podczas procesu logowania.

Aby znaleźć użytkownika utworzonego w tym kroku, możesz przejść do centrum administracyjnego firmy Microsoft Entra i wyszukać użytkownika na liście użytkowników.

Konfigurowanie i uruchamianie przykładowej aplikacji

Rozszerzenie zawiera kilka przykładów kodu, które pokazują, jak uwierzytelnianie jest implementowane w różnych typach aplikacji i językach programowania. Przykłady są uwzględniane w aplikacjach jednostronicowych (JavaScript, React, Angular) i aplikacjach internetowych [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet]. Wybierz przykład z poziomu rozszerzenia, a rozszerzenie automatycznie konfiguruje aplikację przy użyciu środowiska logowania.

1. W obszarze Konfigurowanie i uruchamianie przykładowej aplikacji wybierz przycisk Skonfiguruj przykładową aplikację .

   

2. W menu wybierz typ aplikacji, którą chcesz pobrać. Jeśli zostanie wyświetlony monit o ponowne wybranie konta, wybierz to samo konto, którego używasz.

   

3. Zostanie otwarte okno Eksplorator plików umożliwiające wybranie miejsca, w którym chcesz zapisać przykładowe repozytorium. Wybierz folder, a następnie wybierz pozycję Pobierz repozytorium tutaj.

4. Po zakończeniu pobierania zostanie otwarty nowy obszar roboczy projektu programu Visual Studio Code z pobranym folderem aplikacji wyświetlanym w Eksploratorze.

5. Otwórz nowy terminal w oknie programu Visual Studio Code.

6. W górnym menu wybierz pozycję Uruchom>bez debugowania. W konsoli debugowania jest wyświetlany postęp skryptu uruchamiania. Istnieje krótkie opóźnienie podczas konfigurowania projektu i uruchamiania skryptu kompilacji.

Gdy rozszerzenie pobiera aplikację, automatycznie aktualizuje konfigurację biblioteki Microsoft Authentication Library (MSAL) w celu nawiązania połączenia z nową dzierżawą i korzystania z skonfigurowanego środowiska. Nie jest wymagana żadna dalsza konfiguracja; Aplikację można uruchomić natychmiast po skompiluj projekt. Na przykład w pliku authConfig identyfikator clientId jest ustawiony na identyfikator aplikacji, a urząd jest ustawiony na poddomenę dla nowej dzierżawy.

Uruchamianie środowiska

Po zakończeniu instalacji wypróbuj środowisko logowania, wprowadzając identyfikator URI przekierowania hosta lokalnego dla aplikacji w przeglądarce. Adres URL przekierowania jest dostępny w pliku README.md aplikacji.

Korzystanie z widoku Eksploratora

W widoku Eksploratora są wyświetlane sekcje Zarządzanie zasobami, Wprowadzenie i Pomoc i Opinie . Aby otworzyć widok Eksploratora, wybierz ikonę rozszerzenia widoczną na pasku działań programu Visual Studio Code.

Zarządzanie zasobami

W sekcji Zarządzanie zasobami można wyświetlać dzierżawy zewnętrzne, zarejestrowane aplikacje, przepływy użytkowników i znakowanie firmowe oraz zarządzać nimi. Aby wyświetlić zasoby projektu, rozwiń węzły w panelu po lewej stronie w obszarze Zarządzanie zasobami.

W sekcji Zarządzanie zasobami możesz wybrać zasób i przejść bezpośrednio do centrum administracyjnego firmy Microsoft Entra, aby nim zarządzać lub konfigurować. Na przykład kliknij prawym przyciskiem myszy aplikację i wybierz polecenie Otwórz w centrum administracyjnym. Zostanie wyświetlony monit o zalogowanie się, a następnie centrum administracyjne firmy Microsoft Entra zostanie otwarte bezpośrednio na stronie rejestracji aplikacji dla tej aplikacji.

Akcje wprowadzenie

W sekcji Wprowadzenie możesz uzyskać dostęp do dokumentacji bezpłatnej wersji próbnej lub przejść bezpośrednio do konfiguracji środowiska logowania lub strony pobierania przykładowej aplikacji bez otwierania przewodnika po rozszerzeniu.

Następne kroki

• Aby jeszcze bardziej dostosować dzierżawę i zapoznać się z pełnym zakresem opcji konfiguracji, odwiedź centrum administracyjne firmy Microsoft Entra.
• Aby uzyskać najnowszą zawartość i zasoby dla deweloperów, sprawdź Centrum deweloperów identyfikatorów zewnętrznych.
• Aby skonfigurować własną aplikację do uwierzytelniania, zobacz linki samouczka. Te samouczki ułatwiają tworzenie i integrowanie własnych aplikacji z Tożsamość zewnętrzna Microsoft Entra. Niestandardowe rozszerzenia uwierzytelniania można również dodawać w określonych punktach w przepływie uwierzytelniania.