Snabbstart: Kom igång med Microsoft Entra External ID-tillägget för Visual Studio Code

Gäller för: Personalklientorganisationer Externa klienter (läs mer)

Det är viktigt att integrera autentisering i dina konsument- och företagskundprogram för att skydda resurser och kunddata. Med Microsoft Entra External ID-tillägget för Visual Studio Code kan du snabbt skapa externa klienter, konfigurera inloggningsupplevelser för externa användare och konfigurera ett externt ID-exempel, allt direkt i Visual Studio Code. Med hjälp av tilläggsgenomgången kan du lära dig hur du konfigurerar en anpassad, anpassad inloggningsupplevelse för externa användare av ditt program och startar dina projekt med förkonfigurerade exempelprogram.

Det här tillägget tillhandahåller en grundläggande konfiguration som automatiskt skapar en klientorganisation för program och förbereder den för användare. Det effektiviserar också arbetsflödet genom att automatiskt fylla i värden som program-ID:t i konfigurationsfilen för en smidigare installationsprocess.

Externt ID är en tjänst som kan läggas till i en Azure-prenumeration. Om du redan har ett kan du enkelt inkludera externt ID. Annars konfigurerar du en kostnadsfri utvärderingsversion av Microsoft Entra Externt ID i Visual Studio Code och börjar med att konfigurera en exempelapp.

Installera tillägget

Microsoft Entra External ID-tillägget är tillgängligt på Visual Studio Code Marketplace.

1. Om du inte redan har Visual Studio Code installerat laddar du ned Visual Studio Code och slutför installationsstegen.
2. Installera Microsoft Entra External ID-tillägget för Visual Studio Code från https://aka.ms/vscodequickstart/marketplace.

När tillägget har installerats kan du komma åt det med hjälp av ikonen i aktivitetsfältet.

Du kan också öppna tillägget från välkomstsidan för Visual Studio Code: Välj Välkommen till hjälp> och välj sedan Kom igång med Externt ID för Microsoft Entra under Genomgångar. Du kan behöva välja Mer... för att expandera listan över tillägg.

Kom igång med konfigurationen av ditt externa ID

Microsoft Entra External ID-tillägget skapar en klientorganisation i en extern konfiguration som innehåller din app och katalog med externa användare. Du kan lägga till den här nya klientorganisationen i din befintliga Azure-prenumeration. Eller om du inte har en Azure-prenumeration skapar du en utvärderingsklientorganisation som inte kräver en (läs mer).

• På välkomstsidan Kom igång med externt ID för Microsoft Entra väljer du ett alternativ:

  • Om du inte redan har ett Azure-konto väljer du Konfigurera en kostnadsfri utvärderingsversion.
  • Om du redan har ett Azure-konto väljer du Använd min prenumeration.

  

Konfigurera en kostnadsfri utvärderingsversion (förhandsversion)

1. Välj Konfigurera en kostnadsfri utvärderingsversion.

2. I bekräftelsemeddelandet för inloggning väljer du Tillåt.

3. Ett nytt webbläsarfönster öppnas. Logga in med ditt personliga konto, Microsoft-konto (MSA) eller GitHub-konto. När du har loggat in stänger du webbläsarfönstret.

4. Gå tillbaka till Visual Studio Code. I menyn Var ska klientorganisationen finnas? väljer du en plats för dina klientdata. Det här valet kan inte ändras senare.

5. Ange ett unikt namn för klientorganisationen.

   

6. Tillägget skapar din utvärderingsklientorganisation. Du kan visa förloppet genom att öppna fönstret Visa>utdata. När processen är klar visas Klientorganisationen.

Använda din prenumeration

1. Välj Använd min prenumeration.

2. Om det finns flera klienter som är associerade med ditt konto visas menyn Välj en katalog . Välj den katalog (klientorganisation) som är associerad med den prenumeration som du vill använda.

   

   Kommentar

   Om meddelandet Inga tillgängliga prenumerationer visas kan du konfigurera en kostnadsfri utvärderingsversion i stället.

3. En webbläsarsida öppnas där du kan logga in på ditt konto. När du har loggat in går du tillbaka till Visual Studio Code.

4. I menyn Lägg till en prenumeration väljer du din prenumeration.

5. I menyn Välj en resursgrupp väljer du en resursgrupp.

6. I menyn Var ska klientorganisationen finnas? väljer du en plats för dina klientdata. Det här valet kan inte ändras senare.

7. Ange ett namn för klientorganisationen och välj sedan Retur för att skapa klientorganisationen.

   

   Kommentar

   Processen för att skapa klientorganisationen kan ta upp till 30 minuter. När klientorganisationen har skapats kan du komma åt den i både administrationscentret för Microsoft Entra och Azure Portal.

Konfigurera inloggning för dina användare

Du kan konfigurera din app så att användarna kan logga in med sin e-post och ett lösenord eller ett engångslösenord. Du kan också utforma användarupplevelsens utseende genom att lägga till företagets logotyp, ändra bakgrundsfärgen eller justera inloggningslayouten. Dessa ändringar gäller för utseendet och känslan för alla dina appar i den nya klientorganisationen.

1. Under Konfigurera inloggning för dina användare väljer du Konfigurera inloggning och varumärkesanpassning.

   

2. Du uppmanas att logga in på den nya klientorganisationen. Välj Tillåt och välj det konto som du använder och logga in i webbläsarfönstret som öppnas. Gå tillbaka till Visual Studio Code.

3. I menyn Hur vill du att användarna ska logga in? längst upp väljer du den inloggningsmetod som du vill göra tillgänglig för dina användare: E-post och lösenord eller E-post och engångslösenord.

   

4. Välj OK.

5. Välj var du vill att inloggningssidan ska visas i webbläsarfönstret, antingen centerjusterad eller högerjusterad.

   

6. Välj en bakgrundsfärg för registreringssidan.

   

7. Därefter öppnas ett Utforskaren fönster så att du kan lägga till företagets logotyp. Bläddra till företagslogotypen och välj sedan Ladda upp.

   Kommentar

   Bildkraven är följande:

   • Bildstorlek 245 x 36 px
   • Maximal filstorlek 50 KB
   • Filtyp: Transparent PNG eller JPEG

8. Meddelandet Konfigurera inloggningsflödet visas. Du kan visa förloppet i fönstret Utdata. När konfigurationen är klar visas meddelandet Användarflödeskonfigurationen är klar .

Prova din inloggningsupplevelse

I steget Testa inloggningsupplevelsen i genomgången kan du förhandsgranska inloggningsupplevelsen som du har konfigurerat.

1. Välj knappen Kör nu. En ny webbläsarflik öppnas med registreringssidan för din klientorganisation som kan användas för att skapa och logga in användare.

2. Välj Inget konto? Skapa en för att skapa en ny användare i klientorganisationen.

3. Lägg till den nya användarens e-postadress och välj Nästa. Använd inte samma e-post som du använde för att skapa utvärderingsversionen.

4. Slutför registreringsstegen på skärmen. När användaren loggar in omdirigeras de vanligtvis tillbaka till din app. Men eftersom du inte har konfigurerat en app i det här steget omdirigeras du till JWT.ms i stället, där du kan visa innehållet i token som utfärdades under inloggningsprocessen.

Om du vill hitta den användare som du skapade under det här steget kan du gå till administrationscentret för Microsoft Entra och leta efter användaren i användarlistan.

Konfigurera och köra en exempelapp

Tillägget innehåller flera kodexempel som visar hur autentisering implementeras i olika programtyper och utvecklingsspråk. Exempel ingår för ensidesappar (JavaScript, React, Angular) och webbappar [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet]. Välj ett exempel från tillägget och tillägget konfigurerar automatiskt programmet med din inloggningsupplevelse.

1. Under Konfigurera och kör en exempelapp väljer du knappen Konfigurera exempelapp .

   

2. I menyn väljer du den typ av app som du vill ladda ned. Om du uppmanas att välja ditt konto igen väljer du samma konto som du har använt.

   

3. Ett Utforskaren fönster öppnas så att du kan välja var du vill spara exempellagringsplatsen. Välj en mapp och välj sedan Ladda ned lagringsplats här.

4. När nedladdningen är klar öppnas en ny Visual Studio Code-projektarbetsyta med den nedladdade appmappen som visas i Utforskaren.

5. Öppna en ny terminal i Visual Studio Code-fönstret.

6. På den översta menyn väljer du Kör>kör utan felsökning. Felsökningskonsolen visar förloppet för startskriptet. Det är en kort fördröjning när projektet har konfigurerats och byggskriptet körs.

När tillägget laddar ned programmet uppdateras automatiskt msal-konfigurationen (Microsoft Authentication Library) för att ansluta till den nya klientorganisationen och för att använda den upplevelse som du har konfigurerat. Ingen ytterligare konfiguration krävs. du kan köra programmet så snart projektet har skapats. Till exempel i filen authConfig är clientId inställt på ditt program-ID och utfärdaren är inställd på underdomänen för den nya klientorganisationen.

Kör upplevelsen

När installationen är klar kan du prova inloggningsupplevelsen genom att ange den lokala värdomdirigerings-URI:n för programmet i en webbläsare. Omdirigerings-URL:en är tillgänglig i programmets README.md-fil.

Använda Explorer-vyn

Utforskarvyn visar avsnitten Hantera resurser, Komma igång och Hjälp och feedback . Om du vill öppna Explorer-vyn väljer du tilläggsikonen som visas i aktivitetsfältet i Visual Studio Code.

Hantera resurser

I avsnittet Hantera resurser kan du visa och hantera externa klienter, registrerade program, användarflöden och företagsanpassning. Om du vill visa projektresurser expanderar du noderna i den vänstra panelen under Hantera resurser.

I avsnittet Hantera resurser kan du välja en resurs och gå direkt till administrationscentret för Microsoft Entra för att hantera eller konfigurera den. Högerklicka till exempel på ett program och välj Öppna i administrationscentret. Du uppmanas att logga in och sedan öppnas administrationscentret för Microsoft Entra direkt på appregistreringssidan för programmet.

Komma igång åtgärder

I avsnittet Komma igång kan du komma åt dokumentationen för den kostnadsfria utvärderingsversionen eller gå direkt till konfigurationen av inloggningsupplevelsen eller exempelappens nedladdningssidor utan att öppna tilläggsgenomgången.

Nästa steg

• Om du vill anpassa klientorganisationen ytterligare och utforska alla konfigurationsalternativ går du till administrationscentret för Microsoft Entra.
• Information om det senaste utvecklarinnehållet och resurserna finns i utvecklarcentret för externt ID.
• Information om hur du konfigurerar din egen app för autentisering finns i självstudielänkarna. De här självstudierna hjälper dig att skapa och integrera dina egna appar med Microsoft Entra Externt ID. Du kan också lägga till anpassade autentiseringstillägg på specifika platser i autentiseringsflödet.