Rychlý start: Začínáme s rozšířením Microsoft Entra Externí ID pro Visual Studio Code

Platí pro: Tenanti pracovních sil – externí tenanti (další informace)

Integrace ověřování do zákaznických a obchodních zákaznických aplikací je nezbytná pro zabezpečení prostředků a zákaznických dat. Rozšíření Microsoft Entra Externí ID pro Visual Studio Code umožňuje rychle vytvářet externí tenanty, konfigurovat přihlašovací prostředí pro externí uživatele a nastavit ukázku externího ID přímo v editoru Visual Studio Code. V názorném postupu rozšíření se dozvíte, jak nastavit přizpůsobené přihlašovací prostředí s značkou pro externí uživatele vaší aplikace a spustit projekty pomocí předkonfigurovaných ukázkových aplikací.

Toto rozšíření poskytuje základní nastavení, které automaticky vytvoří tenanta pro aplikace a připraví ho pro uživatele. Zjednodušuje také váš pracovní postup automatickým naplněním hodnot, jako jsou ID aplikací do konfiguračního souboru pro plynulejší proces nastavení.

Externí ID je služba, kterou je možné přidat do předplatného Azure. Pokud ho už máte, můžete snadno zahrnout externí ID. V opačném případě nastavte bezplatnou zkušební verzi Microsoft Entra Externí ID v editoru Visual Studio Code a začněte konfigurací ukázkové aplikace.

Instalace rozšíření

Rozšíření Microsoft Entra Externí ID je k dispozici na webu Visual Studio Code Marketplace.

1. Pokud ještě nemáte visual Studio Code nainstalovaný, stáhněte si Visual Studio Code a dokončete kroky instalace.
2. Nainstalujte rozšíření Microsoft Entra Externí ID pro Visual Studio Code z https://aka.ms/vscodequickstart/marketplace.

Po instalaci rozšíření se k němu dostanete pomocí ikony na panelu aktivit.

Rozšíření můžete otevřít také z úvodní stránky editoru Visual Studio Code: Vyberte úvodní stránku nápovědy>a pak v části Návody vyberte Možnost Začínáme s Microsoft Entra Externí ID. Možná budete muset vybrat Další... a rozbalit seznam rozšíření.

Začínáme s nastavením externího ID

Rozšíření Microsoft Entra Externí ID vytvoří tenanta v externí konfiguraci, která obsahuje vaši aplikaci a adresář externích uživatelů. Tento nový tenant můžete přidat do stávajícího předplatného Azure. Nebo pokud nemáte předplatné Azure, vytvořte si zkušebního tenanta, který ho nevyžaduje (další informace).

• Na úvodní stránce Začínáme s Microsoft Entra Externí ID zvolte možnost:

  • Pokud ještě nemáte účet Azure, vyberte Nastavit bezplatnou zkušební verzi.
  • Pokud už účet Azure máte, vyberte Použít moje předplatné.

  

Nastavení bezplatné zkušební verze (Preview)

1. Vyberte Nastavit bezplatnou zkušební verzi.

2. V potvrzovací zprávě pro přihlášení vyberte Povolit.

3. Otevře se nové okno prohlížeče. Přihlaste se pomocí svého osobního účtu, účtu Microsoft (MSA) nebo účtu GitHub. Po přihlášení zavřete okno prohlížeče.

4. Vraťte se do editoru Visual Studio Code. V nabídce Kde by se měl tenant nacházet? vyberte umístění dat tenanta. Tento výběr není možné později změnit.

5. Zadejte jedinečný název tenanta.

   

6. Rozšíření vytvoří vašeho zkušebního tenanta. Průběh můžete zobrazit otevřením okna Zobrazit>výstup. Po dokončení procesu se zobrazí tenant.

Použití předplatného

1. Vyberte Použít moje předplatné.

2. Pokud je k vašemu účtu přidružených více tenantů, zobrazí se nabídka Zvolit adresář . Vyberte adresář (tenant) přidružený k předplatnému, které chcete použít.

   

   Poznámka:

   Pokud se zobrazí zpráva Žádná předplatná, můžete místo toho nastavit bezplatnou zkušební verzi.

3. Otevře se stránka prohlížeče, kde se můžete přihlásit ke svému účtu. Po přihlášení se vraťte do editoru Visual Studio Code.

4. V nabídce Přidat předplatné vyberte své předplatné.

5. V nabídce Vybrat skupinu prostředků zvolte skupinu prostředků.

6. V nabídce Kde by se měl tenant nacházet? vyberte umístění dat tenanta. Tento výběr není možné později změnit.

7. Zadejte název tenanta a pak výběrem klávesy Enter vytvořte tenanta.

   

   Poznámka:

   Proces vytváření tenanta může trvat až 30 minut. Po vytvoření tenanta k němu budete mít přístup v Centru pro správu Microsoft Entra i na webu Azure Portal.

Nastavení přihlášení pro uživatele

Aplikaci můžete nakonfigurovat tak, aby se uživatelé mohli přihlásit pomocí svého e-mailu a hesla nebo jednorázového hesla. Vzhled a chování uživatele můžete také navrhnout přidáním loga společnosti, změnou barvy pozadí nebo úpravou rozložení přihlašování. Tyto změny platí pro vzhled a chování všech vašich aplikací v tomto novém tenantovi.

1. V části Nastavit přihlášení pro uživatele vyberte Nastavit přihlášení a branding.

   

2. Zobrazí se výzva k přihlášení k novému tenantovi. Vyberte Povolit a v okně prohlížeče, které se otevře, zvolte účet, který právě používáte, a přihlaste se. Vraťte se do editoru Visual Studio Code.

3. V nabídce Jak chcete, aby se vaši uživatelé přihlásili? v horní části zvolte metodu přihlašování, kterou chcete uživatelům zpřístupnit: e-mail a heslo nebo e-mail a jednorázové heslo.

   

4. Vyberte OK.

5. Zvolte, kam se má přihlašovací stránka zobrazovat v okně prohlížeče, a to buď zarovnané na střed, nebo zarovnané doprava.

   

6. Vyberte barvu pozadí pro vaši registrační stránku.

   

7. Dále se otevře okno Průzkumník souborů, abyste mohli přidat logo vaší společnosti. Přejděte do souboru s logem vaší společnosti a pak vyberte Nahrát.

   Poznámka:

   Požadavky na image jsou následující:

   • Velikost obrázku 245 x 36 px
   • Maximální velikost souboru 50 kB
   • Typ souboru: Průhledné PNG nebo JPEG

8. Zobrazí se zpráva Konfigurace toku přihlášení. Průběh můžete zobrazit v okně Výstup. Po dokončení konfigurace se zobrazí zpráva , že je dokončeno nastavení toku uživatele.

Vyzkoušejte si přihlašovací prostředí

Krok Vyzkoušet přihlašovací prostředí v názorném postupu umožňuje zobrazit náhled prostředí přihlašování, které jste nakonfigurovali.

1. Vyberte tlačítko Spustit. Otevře se nová karta prohlížeče s registrační stránkou vašeho tenanta, kterou můžete použít k vytváření a přihlašování uživatelů.

2. Vyberte Žádný účet? Vytvořte ho pro vytvoření nového uživatele v tenantovi.

3. Přidejte e-mailovou adresu nového uživatele a vyberte Další. Nepoužívejte stejný e-mail, který jste použili k vytvoření zkušební verze.

4. Dokončete kroky registrace na obrazovce. Když se uživatel přihlásí, obvykle se přesměruje zpět do vaší aplikace. Vzhledem k tomu, že jste v tomto kroku nenastavili aplikaci, budete přesměrováni na JWT.ms místo toho, kde můžete zobrazit obsah tokenu vystaveného během procesu přihlášení.

Pokud chcete najít uživatele, který jste vytvořili v tomto kroku, můžete přejít do Centra pro správu Microsoft Entra a vyhledat uživatele v seznamu uživatelů.

Nastavení a spuštění ukázkové aplikace

Rozšíření obsahuje několik ukázek kódu, které ukazují, jak se ověřování implementuje v různých typech aplikací a vývojových jazycích. Ukázky jsou zahrnuté pro jednostráčkové aplikace (JavaScript, React, Angular) a webové aplikace [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet]. Zvolte ukázku z rozšíření a rozšíření automaticky nakonfiguruje aplikaci s vaším přihlašovacím prostředím.

1. V části Nastavení a spuštění ukázkové aplikace vyberte tlačítko Nastavit ukázkovou aplikaci .

   

2. V nabídce vyberte typ aplikace, kterou chcete stáhnout. Pokud se zobrazí výzva k opětovnému výběru účtu, zvolte stejný účet, který používáte.

   

3. Otevře se okno Průzkumník souborů, abyste mohli zvolit, kam chcete ukázkové úložiště uložit. Vyberte složku a pak vyberte Stáhnout úložiště sem.

4. Po dokončení stahování se otevře nový pracovní prostor projektu editoru Visual Studio Code se staženou složkou aplikace zobrazenou v Průzkumníku.

5. Otevřete nový terminál v okně editoru Visual Studio Code.

6. V horní nabídce vyberte Spustit>bez ladění. Konzola ladění zobrazuje průběh spouštěcího skriptu. Během nastavení projektu a spuštění skriptu sestavení je k dispozici krátká prodleva.

Když rozšíření stáhne aplikaci, automaticky aktualizuje konfiguraci knihovny MICROSOFT Authentication Library (MSAL) tak, aby se připojila k novému tenantovi a používala prostředí, které jste nastavili. Není nutná žádná další konfigurace; aplikaci můžete spustit hned po sestavení projektu. Například v souboru authConfig je id klienta nastaveno na ID vaší aplikace a autorita je nastavena na subdoménu pro vašeho nového tenanta.

Spuštění prostředí

Po dokončení instalace zkuste přihlašovací prostředí zadáním identifikátoru URI přesměrování místního hostitele pro aplikaci v prohlížeči. Adresa URL pro přesměrování je dostupná v souboru README.md aplikace.

Použití zobrazení Průzkumníka

V zobrazení Průzkumníka se zobrazí oddíly Správa prostředků, Začínáme a Nápověda a Zpětná vazba . Pokud chcete otevřít zobrazení Průzkumníka, vyberte ikonu rozšíření zobrazenou na panelu aktivit editoru Visual Studio Code.

Řízení zdrojů

V části Spravovat prostředky můžete zobrazit a spravovat externí tenanty, registrované aplikace, toky uživatelů a firemní branding. Pokud chcete zobrazit zdroje projektu, rozbalte uzly na levém panelu v části Spravovat zdroje.

V části Správa prostředků můžete vybrat prostředek a přejít přímo do Centra pro správu Microsoft Entra, kde ho můžete spravovat nebo konfigurovat. Klikněte například pravým tlačítkem myši na aplikaci a vyberte Otevřít v Centru pro správu. Zobrazí se výzva k přihlášení a pak se Centrum pro správu Microsoft Entra otevře přímo na stránce registrace aplikace pro danou aplikaci.

Akce Začínáme

V části Začínáme můžete získat přístup k dokumentaci k bezplatné zkušební verzi nebo přejít přímo na konfigurační prostředí přihlašování nebo stránky pro stažení ukázkové aplikace bez otevření návodu k rozšíření.

Další kroky

• Pokud chcete tenanta dále přizpůsobit a prozkoumat celou řadu možností konfigurace, navštivte Centrum pro správu Microsoft Entra.
• Nejnovější obsah a materiály pro vývojáře najdete v Centru pro vývojáře externího ID.
• Pokud chcete nakonfigurovat vlastní aplikaci pro ověřování, prohlédněte si odkazy na kurzy . Tyto kurzy vám pomůžou při sestavování a integraci vlastních aplikací s Microsoft Entra Externí ID. V rámci toku ověřování můžete také přidat vlastní rozšíření ověřování v konkrétních bodech.