Läs på engelska

Dela via

Snabbstart: Logga in användare i en exempelwebbapp

  • Artikel
Välj en klienttyp

I den här snabbstarten använder du en exempelwebbapp för att visa hur du loggar in användare och anropar Microsoft Graph API i din klientorganisation för anställda. Exempelappen använder Microsoft Authentication Library för att hantera autentisering.

Innan du börjar, använd Välj en hyrestyp alternativet överst på den här sidan för att välja hyrestyp. Microsoft Entra ID tillhandahåller två klientkonfigurationer, personal och externa. En klientkonfiguration för personal är avsedd för dina anställda, interna appar och andra organisationsresurser. En extern hyresgäst är för dina kundinriktade appar.

Förutsättningar

Registrera webbappen

För att din applikation ska kunna logga in användare måste Microsoft Entra ID informeras om den applikation du skapar. Appregistreringen upprättar en förtroenderelation mellan appen och Microsoft Entra. När du registrerar ett program genererar externt ID en unik identifierare som kallas ett program-ID (klient)-ID, ett värde som används för att identifiera din app när du skapar autentiseringsbegäranden.

För att slutföra registreringen anger du ett namn för programmet och anger vilka kontotyper som stöds. När du har registrerat dig visas i översiktsfönstret de identifierare som behövs i ansökans källkod.

  1. Logga in på administrationscentret för Microsoft Entra.

  2. Om du har åtkomst till flera klienter använder du ikonen Inställningar på den översta menyn för att växla till klientorganisationen där du vill registrera programmet från menyn Kataloger + prenumerationer.

  3. Bläddra till Identity>Applications>App registrations, välj Ny registrering.

  4. Ange ett namn för applikationen, till exempel identity-client-web-app.

  5. För kontotyper som stödsväljer du endast Konton i den här organisationskatalogen. Om du vill ha information om olika kontotyper väljer du alternativet Hjälp mig att välja.

  6. Välj Registrera.

    Skärmbild som visar hur du anger ett namn och väljer kontotypen i administrationscentret för Microsoft Entra.

  7. Programmets översiktsfönster visas när registreringen är klar. Registrera Directory-ID:t (hyresgäst) och Applikations-ID (klient) för att användas i programmets källkod.

    Skärmbild som visar identifierarvärdena på översiktssidan i administrationscentret för Microsoft Entra.

    Anteckning

    De kontotyper som stöds kan ändras genom att hänvisa till Ändra de kontotyper som stöds av ett program.

Lägga till plattforms- och URL:er

En plattform anger vilken typ av program som du vill integrera. En omdirigerings-URI är den plats där identitetsplattformens autentiseringsserver skickar användaren när de har auktoriserats och beviljats säkerhetstoken.

Om du vill logga in en användare måste ditt program skicka en inloggningsbegäran med en omdirigerings-URI som anges som en parameter, och den måste matcha någon av de omdirigerings-URI:er som du har lagt till i din appregistrering.

Följ dessa steg om du vill ange din apptyp för din appregistrering:

  1. Under Hantera, välj Autentisering.
  2. På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet Web.
  3. För omdirigerings-URI:er anger du http://localhost:3000/auth/redirect.
  4. Under URL för utloggning av frontkanalenanger du https://localhost:5001/signout-callback-oidc för att logga ut.
  5. Välj Konfigurera för att spara ändringarna.

Lägga till appklienthemlighet eller certifikat

Skapa en klienthemlighet för det registrerade programmet. Programmet använder klienthemligheten för att bevisa sin identitet när den begär token:

  1. På sidan Appregistreringar väljer du det program som du skapade (till exempel webbappens klienthemlighet) för att öppna sidan Översikt.
  2. Under Hanteraväljer du Certifikat & hemligheter>Klienthemligheter>Ny klienthemlighet.
  3. I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel webbappens klienthemlighet).
  4. Under Upphörväljer du en varaktighet för vilken hemligheten är giltig (enligt organisationens säkerhetsregler) och väljer sedan Lägg till.
  5. Registrera hemlighetens Värde. Du använder det här värdet för konfiguration i ett senare steg. Det hemliga värdet visas inte igen och kan inte hämtas på något sätt när du har navigerat bort från -certifikat och hemligheter. Se till att du registrerar den.

När du skapar autentiseringsuppgifter för ett konfidentiellt klientprogram:

  • Microsoft rekommenderar att du använder ett certifikat i stället för en klienthemlighet innan du flyttar programmet till en produktionsmiljö. Mer information om hur du använder ett certifikat finns i anvisningarna för autentiseringscertifikat för Microsoft identity platform-applikationer .

  • I testsyfte kan du skapa ett självsignerat certifikat och konfigurera dina appar så att de autentiserar med det. Men i produktionsmiljönbör du köpa ett certifikat som signerats av en välkänd certifikatutfärdare och sedan använda Azure Key Vault- för att hantera certifikatåtkomst och livslängd.

Klona eller ladda ned exempelwebbprogram

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.

  • Ladda ner .zip-filen, sedan extrahera den till en filsökväg där namnets längd inte överstiger 260 tecken eller klona repositoryt:

  • Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:

    Console 
    git clone https://github.com/Azure-Samples/ms-identity-node.git

Konfigurera exempelwebbappen

Om du vill logga in användare med exempelappen måste du uppdatera den med din app- och klientinformation:

I mappen ms-identity-node-main öppnar du filen .env i mappen App. Ersätt följande platshållare:

Variabel Beskrivning Exempel
Enter_the_Cloud_Instance_Id_Here Azure-molninstansen där ditt program är registrerat https://login.microsoftonline.com/ (inkludera avslutande snedstreck)
Enter_the_Tenant_Info_here Hyresgäst-ID eller primär domän contoso.microsoft.com eller aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Klient-ID för det program som du registrerade 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here Klienthemlighet för det program som du registrerade A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here Molninstansen för Microsoft Graph API som appen anropar https://graph.microsoft.com/ (inkludera avslutande snedstreck)
Enter_the_Express_Session_Secret_Here En slumpmässig sträng med tecken som används för att signera Express-sessionscookien A1b-C2d_E3f.H4...

När du har ändrat bör filen se ut ungefär som följande kodfragment:

env 
CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Kör och testa exempelwebbapp

Du har konfigurerat exempelappen. Du kan fortsätta att köra och testa den.

  1. Starta servern genom att köra följande kommandon från projektkatalogen:

    Console 
    cd App
npm install
npm start

  2. Gå till http://localhost:3000/.

  3. Välj Logga in för att starta inloggningsprocessen.

Första gången du loggar in uppmanas du att ge ditt medgivande så att programmet kan logga in dig och komma åt din profil. När du har loggat in omdirigeras du tillbaka till programmets startsida.

Så här fungerar appen

Exemplet är värd för en webbserver på localhost, port 3000. När en webbläsare kommer åt den här adressen renderar appen startsidan. När användaren väljer Logga inomdirigerar appen webbläsaren till Microsoft Entra-inloggningsskärmen via den URL som genereras av MSAL Node-biblioteket. Efter användarens medgivande omdirigerar webbläsaren användaren tillbaka till programmets startsida, tillsammans med ett ID och en åtkomsttoken.

Relaterat innehåll

I den här snabbstarten använder du en exempelwebbapp för att visa hur du loggar in användare i din externa klientorganisation. Exempelappen använder Microsoft Authentication Library för att hantera autentisering.

Innan du börjar, använd urvalet Välj en klienttyp högst upp på den här sidan för att välja klienttyp. Microsoft Entra ID tillhandahåller två klientkonfigurationer, personal och externa. En klientkonfiguration för personal är avsedd för dina anställda, interna appar och andra organisationsresurser. En extern hyresgäst är avsedd för dina kundinriktade appar.

Förutsättningar

Registrera webbappen

För att din applikation ska kunna logga in användare med Microsoft Entra måste Microsoft Entras externa ID känna till den applikation du skapar. Appregistreringen upprättar en förtroenderelation mellan appen och Microsoft Entra. När du registrerar ett program genererar externt ID en unik identifierare som kallas ett program-ID (klient)-ID, ett värde som används för att identifiera din app när du skapar autentiseringsbegäranden.

Följande steg visar hur du registrerar din app i administrationscentret för Microsoft Entra:

  1. Logga in på administrationscentret för Microsoft Entra som minst en Programutvecklare.

  2. Om du har åtkomst till flera klienter använder du ikonen Inställningar i huvudmenyn för att byta till din externa klient från menyn Kataloger + prenumerationerna.

  3. Bläddra till Identitet>Applikationer>Applikationsregistreringar.

  4. Välj + Ny registrering.

  5. På sidan Registrera en applikation som visas.

    1. Ange ett beskrivande program Namn som visas för appens användare, till exempel ciam-client-app.
    2. Under Kontotyper som stödsväljer du endast Konton i den här organisationskatalogen.

  6. Välj Registrera.

  7. Programmets översiktsfönster visas vid lyckad registrering. Registrera program-ID (klient)-ID:t som ska användas i programmets källkod.

Lägga till plattforms- och URL:er

En plattform anger vilken typ av program som du vill integrera. En omdirigerings-URI är den plats där identitetsplattformens autentiseringsserver skickar användaren när de har auktoriserats och beviljats säkerhetstoken.

Om du vill logga in en användare måste ditt program skicka en inloggningsbegäran med en omdirigerings-URI som anges som en parameter, och den måste matcha någon av de omdirigerings-URI:er som du har lagt till i din appregistrering.

Följ dessa steg om du vill ange din apptyp för din appregistrering:

  1. Under Hantera, välj Autentisering.
  2. På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet Web.
  3. För omdirigerings-URI:er angerhttp://localhost:3000/auth/redirect.
  4. Välj Konfigurera för att spara ändringarna.

Lägg till appklienthemlighet

Skapa en klienthemlighet för det registrerade programmet. Programmet använder klienthemligheten för att bevisa sin identitet när den begär token:

  1. På sidan Appregistreringar väljer du det program som du skapade (till exempel webbappens klienthemlighet) för att öppna sidan Översikt.
  2. Under Hanteraväljer du Certifikat & hemligheter>Klienthemligheter>Ny klienthemlighet.
  3. I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel webbappens klienthemlighet).
  4. Under Upphörväljer du en varaktighet för vilken hemligheten är giltig (enligt organisationens säkerhetsregler) och väljer sedan Lägg till.
  5. Registrera hemlighetens värde. Du använder det här värdet för konfiguration i ett senare steg. Det hemliga värdet visas inte igen och kan inte hämtas på något sätt när du har navigerat bort från -certifikat och hemligheter. Se till att du registrerar den.

När du skapar autentiseringsuppgifter för ett konfidentiellt klientprogram:

  • Microsoft rekommenderar att du använder ett certifikat i stället för en klienthemlighet innan du flyttar programmet till en produktionsmiljö. Mer information om hur du använder ett certifikat finns i anvisningarna i autentiseringsuppgifter för Microsoft identity platform-programautentiseringscertifikatet.

  • I testsyfte kan du skapa ett självsignerat certifikat och konfigurera dina appar så att de autentiserar med det. Men i produktionsmiljönbör du köpa ett certifikat som signerats av en välkänd certifikatutfärdare och sedan använda Azure Key Vault- för att hantera certifikatåtkomst och livslängd.

Bevilja administratörsmedgivande

När du har registrerat ditt program tilldelas det behörigheten User.Read. Men eftersom hyresgästen är en extern hyresgäst kan kundanvändarna inte själva samtycka till den här behörigheten. Du som klientadministratör måste godkänna den här behörigheten för alla användare i klientorganisationen:

  1. På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt.

  2. Under Hanteraväljer du API-behörigheter.

    1. Välj Bevilja administratörsmedgivande för <ditt klientnamn>och välj sedan Ja.
    2. Välj Uppdateraoch kontrollera sedan att Beviljas för <ditt klientnamn> visas under Status för behörigheten.

Skapa ett användarflöde

Följ de här stegen för att skapa ett användarflöde som en kund kan använda för att logga in eller registrera sig för ett program.

  1. Logga in på administrationscentret för Microsoft Entra som minst en administratör för externt ID-användarflöde.

  2. Om du har åtkomst till flera klientorganisationer, använder du ikonen Inställningar i den översta menyn för att växla till din externa klientorganisation från menyn Kataloger + prenumerationer.

  3. Bläddra till Identitet>Externa Identiteter>Användarflöden.

  4. Välj + Nytt användarflöde.

  5. På sidan Skapa:

    1. Ange ett Namn för användarflödet, till exempel SignInSignUpSample.

    2. I listan Identitetsleverantörer väljer du e-postkonto. Med den här identitetsprovidern kan användare logga in eller registrera sig med sin e-postadress.

      Anteckning

      Ytterligare identitetsprovidrar visas endast här när du har konfigurerat federation med dem. Om du till exempel konfigurerar federation med Google, Facebook, Apple eller en OIDC-identitetsproviderkan du välja dessa ytterligare identitetsprovidrar här.

    3. Under e-postkontonkan du välja något av de två alternativen. I den här handledningen väljer du e-posten med lösenordet.

      • e-post med lösenord: Tillåter att nya användare registrerar sig och loggar in med en e-postadress som inloggningsnamn och ett lösenord som sin första faktorautentiseringsuppgifter.
      • E-post engångslösenord: Tillåter att nya användare registrerar sig och loggar in med en e-postadress som inloggningsnamn och e-postlösenord som första faktorautentiseringsuppgifter. Engångslösenord för e-post måste vara aktiverat på klientnivå (Alla identitetsprovidrar>e-post engångslösenord) för att det här alternativet ska vara tillgängligt på användarflödesnivå.

    4. Under Användarattributväljer du de attribut som du vill samla in från användaren vid registreringen. Genom att välja Visa flerkan du välja attribut och anspråk för land/region, visningsnamnoch postnummer. Välj OK. (Användare uppmanas endast att ange attribut när de registrerar sig för första gången.)

  6. Välj Skapa. Det nya användarflödet visas i listan Användarflöden. Uppdatera sidan om det behövs.

För att aktivera självbetjänad lösenordsåterställning, använd stegen i artikeln Aktivera självbetjänad lösenordsåterställning.

Associera webbprogrammet med användarflödet

För att kundanvändarna ska kunna se registrerings- eller inloggningsupplevelsen när de använder din app måste du associera appen med ett användarflöde. Även om många program kan associeras med ditt användarflöde kan ett enda program bara associeras med ett användarflöde.

  1. På sidomenyn väljer du Identitet.

  2. Välj externa identiteteroch sedan Användarflöden.

  3. På sidan Användarflöden väljer du namnet på användarflöde som du skapade tidigare, till exempel SignInSignUpSample.

  4. I Använd, välj Program.

  5. Välj Lägg till program.

  6. Välj programmet i listan, till exempel ciam-client-app eller använd sökrutan för att hitta programmet och välj det sedan.

  7. Välj Välj.

När du har associerat din app med ett användarflöde kan du testa användarflödet genom att simulera en användares registrering eller inloggning med ditt program från administrationscentret för Microsoft Entra. Det gör du genom att använda stegen i Testa ditt registrerings- och inloggningsanvändarflöde.

Klona eller ladda ned exempelwebbprogram

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil:

  • Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:

    Console 
    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Du kan också ladda ned exempelfilen .zipoch sedan extrahera den till en filsökväg där namnets längd är färre än 260 tecken.

Installera projektets beroenden

  1. Öppna ett konsolfönster och ändra till katalogen som innehåller Node.js exempelappen:

    Console 
    cd 1-Authentication\5-sign-in-express\App

  2. Kör följande kommandon för att installera appberoenden:

    Console 
    npm install

Konfigurera exempelwebbappen

Om du vill logga in användare med exempelappen måste du uppdatera den med din app- och klientinformation:

  1. Öppna filen App\authConfig.js i kodredigeraren.

  2. Hitta platshållaren:

    • Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för den app som du registrerade tidigare.
    • Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn lär du dig att läsa klientinformationen.
    • Enter_the_Client_Secret_Here och ersätt det med det apphemlighetsvärde som du kopierade tidigare.

Kör och testa exempelwebbapp

Nu kan du testa Node.js-exempelwebbappen. Du måste starta Node.js-servern och komma åt den via webbläsaren på http://localhost:3000.

  1. Kör följande kommando i terminalen:

    Console 
    npm start

  2. Öppna webbläsaren och gå sedan till http://localhost:3000. Du bör se sidan som liknar följande skärmbild:

    Skärmbild av inloggning i en nodwebbapp.

  3. När sidan har lästs in väljer du Logga in när du uppmanas att göra det.

  4. På inloggningssidan skriver du din e-postadress, väljer Nästa, skriver Lösenordoch väljer sedan Logga in. Om du inte har något konto väljer du Inget konto? Skapa en länk som startar registreringsflödet.

  5. Om du väljer registreringsalternativet slutför du hela registreringsflödet när du har fyllt i din e-post, engångslösenord, nya lösenord och mer kontoinformation. Du ser en sida som liknar följande skärmbild. Du ser en liknande sida om du väljer inloggningsalternativet.

    Skärmbild av visnings-ID-tokenanspråk.

  6. Välj Logga ut för att logga ut användaren från webbappen eller välj Visa ID-tokenanspråk för att visa ID-tokenanspråk som returneras av Microsoft Entra.

Så här fungerar det

När användarna väljer länken Logga in initierar appen en autentiseringsbegäran och omdirigerar användare till Microsoft Entra Externt ID. På inloggnings- eller registreringssidan som visas, när en användare har loggat in eller skapat ett konto, returnerar Microsoft Entra Externt ID en ID-token till appen. Appen validerar ID-token, läser anspråken och returnerar en säker sida till användarna.

När användarna väljer länken Logga ut rensar appen sin session och omdirigerar sedan användaren till Microsoft Entras utloggningsslutpunkt för externt ID för att meddela att användaren har loggat ut.

Om du vill skapa en app som liknar det exempel som du har kört slutför du stegen i artikeln Logga in användare i din egen Node.js webbapp.

Relaterat innehåll