Snabbstart – Logga in användare i en exempelwebbapp - Microsoft identity platform

Artikel
03/05/2025

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

En prenumeration på Azure. Skapa en Azure-prenumeration kostnadsfritt.
Node.js
Visual Studio Code eller någon annan kodredigerare.
En Microsoft Entra-arbetskraftsorganisation. För mer information, se hur du får en Microsoft Entra-klientorganisation.

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.

Logga in på administrationscentret för Microsoft Entra.
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.
Bläddra till Identity>Applications>App registrations, välj Ny registrering.
Ange ett namn för applikationen, till exempel identity-client-web-app.
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.
Välj Registrera.
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.

Not

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:

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

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

I Hanteraväljer du Autentisering.
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet Web.
För omdirigerings-URI:eranger du https://localhost:5001/signin-oidc.
Under URL för utloggning av frontkanalenanger du https://localhost:5001/signout-callback-oidc för utloggning.
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:

På sidan Appregistreringar väljer du det program som du skapade (till exempel webbappens klienthemlighet) för att öppna sidan Översikt.
Under Hanteraväljer du Certifikat & hemligheter>Klienthemligheter>Ny klienthemlighet.
I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel webbappens klienthemlighet).
Under Upphörväljer du en varaktighet för vilken hemligheten är giltig (enligt organisationens säkerhetsregler) och väljer sedan Lägg till.
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.

Om du vill använda en certifikatautentiseringsuppgift för webbappen måste du skapa och sedan ladda upp certifikatet. I testsyfte kan du använda ett självsignerat certifikat. Använd följande steg för att skapa och ladda upp ett självsignerat certifikat:

Använd terminalen, navigera till valfri katalog och skapa sedan det självsignerade certifikatet med hjälp av följande kommando.
```
dotnet dev-certs https -ep ./certificate.crt --trust
```
Gå tillbaka till administrationscentret för Microsoft Entra och under Hanteraväljer du Certifikat & hemligheter>Ladda upp certifikat.
Välj fliken certifikat (0) och välj sedan Ladda upp certifikat.
Panelen Ladda upp certifikat visas. Använd ikonen för att navigera till certifikatfilen som du skapade i föregående steg och välj Öppna.
Ange en beskrivning för certifikatet, till exempel Certifikat för aspnet-web-appoch välj Lägg till.
Registrera värdet Tumavtryck för användning i nästa steg.

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:
```
git clone https://github.com/Azure-Samples/ms-identity-node.git
```

Ladda ner filen .zip, och extrahera den sedan till en filsökväg där namnets längd är färre än 260 tecken, eller klona arkivet:
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:
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
```

Ladda ned Python-kodexemplet sedan extrahera det till en filsökväg där namnets längd är färre än 260 tecken eller klona lagringsplatsen:
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:

git clone https://github.com/Azure-Samples/ms-identity-docs-code-python/

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:

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

I din IDE öppnar du projektmappen ms-identity-docs-code-dotnet\web-app-aspnet, som innehåller exemplet.

Öppna appsettings.json och ersätt filinnehållet med följande kodfragment.

{
"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
  "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
  "ClientCertificates": [
    {
      "SourceType": "StoreWithThumbprint",
      "CertificateStorePath": "CurrentUser/My",
      "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
    }   
  ],
  "CallbackPath": "/signin-oidc"
},
  "DownstreamApi": {
    "BaseUrl": "https://graph.microsoft.com/v1.0/",
    "RelativePath": "me",
    "Scopes": [ 
      "user.read" 
    ]
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

TenantId – ID:t för den hyrdtagare där programmet är registrerat. Ersätt texten inom citattecken med Directory (tenant) ID som spelades in tidigare från översiktssidan för det registrerade programmet.
ClientId – Programmets identifierare, även kallad klienten. Ersätt texten med citattecken med det Application (client) ID värde som registrerades tidigare från översiktssidan för det registrerade programmet.
ClientCertificates – Ett självsignerat certifikat används för autentisering i programmet. Ersätt texten i CertificateThumbprint med tumavtrycket för certifikatet som tidigare registrerades.

Öppna det program som du laddade ned i en IDE och gå till rotmappen för exempelappen.
```
cd flask-web-app
```
Skapa en .env-fil i rotmappen i projektet med hjälp av .env.sample som en guide.
```
# The following variables are required for the app to run.
CLIENT_ID=<Enter_your_client_id>
CLIENT_SECRET=<Enter_your_client_secret>
AUTHORITY=<Enter_your_authority_url>
```
- Ange värdet för CLIENT_ID till program-ID(klient)-ID:t för det registrerade programmet, som finns på översiktssidan.
- Ange värdet för CLIENT_SECRET till den klienthemlighet som du skapade i Certifikat & Hemligheter för det registrerade programmet.
- Ange värdet på AUTHORITY till en https://login.microsoftonline.com/<TENANT_GUID>. Katalog-ID (hyresgäst) finns på appregistreringens översiktssida.
Miljövariablerna refereras i app_config.pyoch lagras i en separat .env--fil för att hålla dem borta från källkontrollen. Den angivna filen .gitignore förhindrar att filen .env checkas in.

Kör och testa exempelwebbapp

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

Starta servern genom att köra följande kommandon från projektkatalogen:
```
cd App
npm install
npm start
```
Gå till http://localhost:3000/.
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.

I projektkatalogen använder du terminalen för att ange följande kommando.
```
dotnet run
```
Kopiera den https URL som visas i terminalen, till exempel https://localhost:5001och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du uppmanas att ange en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.
Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas. Det anger att du är inloggad i programmet och visar din profilinformation från Microsoft Graph-API:et.

Logga ut från programmet

Leta reda på länken Logga ut i det övre högra hörnet på sidan och välj den.
Du uppmanas att välja ett konto att logga ut från. Välj det konto som du använde för att logga in.
Ett meddelande visas som anger att du har loggat ut. Nu kan du stänga webbläsarfönstret.

Skapa en virtuell miljö för appen:
- Kör följande kommandon för Windows:
```
py -m venv .venv
.venv\scripts\activate
```
- Kör följande kommandon för macOS/Linux:
```
python3 -m venv .venv
source .venv/bin/activate
```
Installera kraven med hjälp av pip:
```
pip install -r requirements.txt
```
Kör appen från kommandoraden. Kontrollera att appen körs på samma port som den omdirigerings-URI som du konfigurerade tidigare.
```
flask run --debug --host=localhost --port=5000
```
Kopiera https-URL:en som visas i terminalen, till exempel https://localhost:5000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.
Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du uppmanas att ange en e-postadress och ett lösenord för att logga in.
Programmet begär behörighet att behålla åtkomsten till data som du tillåter åtkomst till och logga in dig och sedan läsa din profil, som du ser på skärmbilden. Välj Acceptera.
Följande skärmbild visas, vilket anger att du har loggat in på programmet.

diagram som visar hur exempelappen har loggat in en användare.

Så här fungerar appen

Följande diagram visar hur exempelappen fungerar:

diagram som visar hur exempelappen som genereras av den här snabbstarten fungerar.

Programmet använder identity-paketet för att hämta en åtkomsttoken från Microsofts identitetsplattform. Det här paketet bygger på Microsoft Authentication Library (MSAL) för Python för att förenkla autentisering och auktorisering i webbappar.
Den åtkomsttoken som du fick i föregående steg används som en ägartoken för att autentisera användaren när du anropar Microsoft Graph API.

Lär dig hur du skapar en Node.js webbapp som loggar in användare och anropar Microsoft Graph API i Självstudie: Logga in användare och hämta en token för Microsoft Graph i en Node.js & Express-webbapp.

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

Visual Studio Code eller någon annan kodredigerare.
Node.js.
En extern hyresgäst. Om du vill skapa en väljer du mellan följande metoder:
- (Rekommenderas) Använd Microsoft Entra Externt ID-tillägg för att konfigurera en extern tenant direkt i Visual Studio Code.
- Skapa en ny extern klient i Microsoft Entras admincenter.

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:

Logga in på administrationscentret för Microsoft Entra som minst en Programutvecklare.
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.
Bläddra till Identitet>Applikationer>Applikationsregistreringar.
Välj + Ny registrering.
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.
Välj Registrera.
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

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

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

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

Under Hanteraväljer du Autentisering.
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet Web.
För omdirigerings-URI, angehttps://localhost:7274/signin-oidc.
Under URL för utloggning av frontkanalenanger du https://localhost:7274/signout-callback-oidc för utloggning.
Välj Konfigurera för att spara ändringarna.

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

Under Hanteraväljer du Autentisering
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet Web.
För omdirigerings-URI:er angerhttp://localhost:5000/redirect. Den här omdirigerings-URI:n är den plats där auktoriseringsservern skickar åtkomsttoken. Du kan anpassa den så att den passar ditt användningsfall.
Välj Konfigurera för att spara ändringarna.

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

Under Hanteraväljer du Autentisering
På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativet Web.
För omdirigerings-URI:er angerhttp://localhost:3000/getAToken. Den här omdirigerings-URI:n är den plats där auktoriseringsservern skickar åtkomsttoken. Du kan anpassa den så att den passar ditt användningsfall.
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:

På sidan Appregistreringar väljer du det program som du skapade (till exempel webbappens klienthemlighet) för att öppna sidan Översikt.
Under Hanteraväljer du Certifikat & hemligheter>Klienthemligheter>Ny klienthemlighet.
I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel webbappens klienthemlighet).
Under Upphörväljer du en varaktighet för vilken hemligheten är giltig (enligt organisationens säkerhetsregler) och väljer sedan Lägg till.
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.

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:

På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt.
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.

Logga in på administrationscentret för Microsoft Entra som minst en administratör för externt ID-användarflöde.
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.
Bläddra till Identitet>Externa Identiteter>Användarflöden.
Välj + Nytt användarflöde.
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.)
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.

På sidomenyn väljer du Identitet.
Välj externa identiteteroch sedan Användarflöden.
På sidan Användarflöden väljer du namnet på användarflöde som du skapade tidigare, till exempel SignInSignUpSample.
I Använd, välj Program.
Välj Lägg till program.
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.
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:
```
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

Öppna ett konsolfönster och ändra till katalogen som innehåller Node.js exempelappen:
```
cd 1-Authentication\5-sign-in-express\App
```
Kör följande kommandon för att installera appberoenden:
```
npm install
```

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:
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
```
Ladda ned filen .zip. Extrahera den till en filsökväg där filnamnets längd är färre än 260 tecken.

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:
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
```
Ladda ned filen .zip. Extrahera den till en filväg där namnets längd är mindre än 260 tecken.

Installera beroenden för projektet

Öppna ett konsolfönster och ändra till katalogen som innehåller Flask-exempelwebbappen:
```
cd django-web-app
```
Konfigurera virtuell miljö:
- Kör följande kommandon för Windows:
```
py -m venv .venv
.venv\scripts\activate
```
- Kör följande kommandon för macOS/Linux:
```
python3 -m venv .venv
source .venv/bin/activate
```
Installera appberoenden genom att köra följande kommandon:
```
python3 -m pip install -r requirements.txt
```

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:
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
```
Ladda ned filen .zip. Extrahera den till en filsökväg där namnets längd är mindre än 260 tecken.

Installera projektberoenden

Öppna ett konsolfönster och ändra till katalogen som innehåller Flask-exempelwebbappen:
```
cd flask-web-app
```
Konfigurera virtuell miljö:
- Kör följande kommandon för Windows:
```
py -m venv .venv
.venv\scripts\activate
```
- Kör följande kommandon för macOS/Linux:
```
python3 -m venv .venv
source .venv/bin/activate
```
Installera appberoenden genom att köra följande kommandon:
```
python3 -m pip install -r requirements.txt
```

Konfigurera exempelwebbappen

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

Öppna filen App\authConfig.js i kodredigeraren.
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.

Gå till rotkatalogen som innehåller ASP.NET Core-exempelappen:
```
cd 1-Authentication\1-sign-in-aspnet-core-mvc
```
Öppna filen appsettings.json.
I auktoritet letar du upp Enter_the_Tenant_Subdomain_Here och ersätter den med underdomänen för din tenant. Om din primära klientdomän till exempel är caseyjensen@onmicrosoft.comär värdet du bör ange casyjensen.
Leta upp värdet Enter_the_Application_Id_Here och ersätt det med program-ID (clientId) för appen som du registrerade i administrationscentret för Microsoft Entra.
Ersätt Enter_the_Client_Secret_Here med det klienthemlighetsvärde som du konfigurerade i Lägg till appklienthemlighet.

Öppna dina projektfiler i Visual Studio Code eller redigeraren som du använder.
Skapa en .env-fil i rotmappen i projektet med hjälp av .env.sample-filen som en guide.
I filen .env anger du följande miljövariabler:
1. CLIENT_ID som är program-ID :t (klient) för den app som du registrerade tidigare.
2. CLIENT_SECRET som är det apphemlighetsvärde som du kopierade tidigare.
3. AUTHORITY som är den URL som identifierar en tokenutfärdare. Det bör ha formatet https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Ersätt underdomän med katalogens (hyresgäst) underdomän. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har klientunderdomänen kan du lära dig hur du läsa klientinformationen.
4. REDIRECT_URI som bör likna den omdirigerings-URI som du registrerade tidigare bör matcha konfigurationen.

Öppna dina projektfiler i Visual Studio Code eller redigeraren som du använder.
Skapa en .env-fil i rotmappen i projektet med .env.sample-fil som guide.
I filen .env anger du följande miljövariabler:
- CLIENT_ID som är program-ID :t (klient) för den app som du registrerade tidigare.
- CLIENT_SECRET som är det hemlighetsvärde för appen som du kopierade tidigare.
- AUTHORITY som är den URL som identifierar en tokenutfärdare. Det bör ha formatet https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Ersätt underdomän med Katalog (klient) underdomänen. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har klientunderdomänen kan du lära dig hur du läsa klientinformationen.
Bekräfta att omdirigerings-URI:n är väl konfigurerad. Omdirigerings-URI:n som du registrerade tidigare ska matcha konfigurationen. Det här exemplet anger som standard omdirigerings-URI-sökvägen till /getAToken. Den här konfigurationen finns i filen app_config.py som REDIRECT_PATH.

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.

Kör följande kommando i terminalen:
```
npm start 
```
Öppna webbläsaren och gå sedan till http://localhost:3000. Du bör se sidan som liknar följande skärmbild:
När sidan har lästs in väljer du Logga in när du uppmanas att göra det.
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.
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.
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.

Kör följande kommandon från gränssnittet eller kommandoraden:
```
dotnet run
```
Öppna webbläsaren och gå till https://localhost:7274.
Logga in med ett konto som är registrerat i den externa klientorganisationen.
När du har loggat in visas visningsnamnet bredvid knappen Logga ut enligt följande skärmbild.
Om du vill logga ut från programmet väljer du knappen Logga ut.

Kör appen för att se inloggningsupplevelsen som spelas upp.

Anteckning

Det här exemplet använder Python-identitetsbiblioteket från tredje part. Biblioteket underhålls inte officiellt av Microsoft, men rekommenderas för din användning. Det här biblioteket gör det enklare att lägga till autentisering i webbappen eftersom det sammanfattar en stor del av MSAL Python-informationen.

Kör följande kommando i terminalen:

python manage.py runserver localhost:5000

Du kan använda ett valfritt portnummer.

Öppna webbläsaren och gå sedan till http://localhost:5000. Du bör se en sida som liknar följande skärmbild:
När sidan har lästs in väljer du länken Logga in. Du uppmanas att logga in.
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.
Om du väljer registreringsalternativet går du igenom registreringsflödet. Fyll i e-post, engångslösenord, nytt lösenord och mer kontoinformation för att slutföra hela registreringsflödet.
När du har loggat in eller registrerat dig omdirigeras du tillbaka till webbappen. Du ser en sida som liknar följande skärmbild:
Välj Utloggning för att logga ut användaren från webbappen eller välj Anropa ett underordnat API för att göra ett anrop till en Microsoft Graph-slutpunkt.

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. En användare loggar sedan in eller registrerar sig på sidan som visas. När du har angett nödvändiga autentiseringsuppgifter och samtyckt till nödvändiga omfång omdirigerar Microsoft Entras externa ID användaren tillbaka till webbappen med en auktoriseringskod. Webbappen använder sedan den här auktoriseringskoden för att hämta en token från microsoft entra externt ID.

När användarna väljer länken Utloggning rensar appen sin session, omdirigerar användaren till Microsoft Entras utloggningsslutpunkt för externt ID för att meddela att användaren har loggat ut. Användaren omdirigeras sedan tillbaka till webbappen.

Kör appen för att se inloggningsupplevelsen som spelas upp.

Not

Kör följande kommando i terminalen:
```
python3 -m flask run --debug --host=localhost --port=3000
```
Du kan använda valfri port. Detta bör likna porten för den omdirigerings-URI som du registrerade tidigare.
Öppna webbläsaren och gå sedan till http://localhost:3000. Du bör se sidan som liknar följande skärmbild:
När sidan har lästs in väljer du länken Logga in. Du uppmanas att logga in.
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.
Om du väljer registreringsalternativet går du igenom registreringsflödet. Fyll i e-post, engångslösenord, nytt lösenord och mer kontoinformation för att slutföra hela registreringsflödet.
När du har loggat in eller registrerat dig omdirigeras du tillbaka till webbappen. Du ser en sida som liknar följande skärmbild:
Välj Utloggning för att logga ut användaren från webbappen eller välj Anropa ett underordnat API för att göra ett anrop till en Microsoft Graph-slutpunkt.

Dela via

Förutsättningar

Registrera webbappen

Lägga till plattforms- och URL:er

Lägga till appklienthemlighet eller certifikat

Klona eller ladda ned exempelwebbprogram

Konfigurera exempelwebbappen

Kör och testa exempelwebbapp

Så här fungerar appen

Logga ut från programmet

Så här fungerar appen

Förutsättningar

Registrera webbappen

Lägga till plattforms- och URL:er

Lägg till appklienthemlighet

Skapa ett användarflöde

Associera webbprogrammet med användarflödet

Klona eller ladda ned exempelwebbprogram

Installera projektets beroenden

Installera beroenden för projektet

Installera projektberoenden

Konfigurera exempelwebbappen

Kör och testa exempelwebbapp

Så här fungerar det

Så här fungerar det

Så här fungerar det

Feedback

Ytterligare resurser

Dela via

Snabbstart: Logga in användare i en exempelwebbapp

Förutsättningar

Registrera webbappen

Lägga till plattforms- och URL:er

Lägga till appklienthemlighet eller certifikat

Klona eller ladda ned exempelwebbprogram

Konfigurera exempelwebbappen

Kör och testa exempelwebbapp

Så här fungerar appen

Relaterat innehåll

Förutsättningar

Registrera webbappen

Lägga till plattforms- och URL:er

Lägg till appklienthemlighet

Bevilja administratörsmedgivande

Skapa ett användarflöde

Associera webbprogrammet med användarflödet

Klona eller ladda ned exempelwebbprogram

Installera projektets beroenden

Konfigurera exempelwebbappen

Kör och testa exempelwebbapp

Så här fungerar det

Relaterat innehåll

Feedback

Ytterligare resurser