Snabbstart: Logga in användare i en exempelwebbapp

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

• Ett Azure-konto med en aktiv prenumeration. Om du inte redan har ett Skapa ett konto kostnadsfritt.
• Det här Azure-kontot måste ha behörighet att hantera program. Någon av följande Microsoft Entra-roller innehåller de behörigheter som krävs:
  • Appadministratör
  • Programutvecklare
  • Molnprogramadministratör
• En hyresgäst för arbetskraft. Du kan använda din standardkatalog eller konfigurera en ny klientorganisation.
• Visual Studio Code eller någon annan kodredigerare.

Node

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: http://localhost:3000/auth/redirect
  • URL för utloggning i frontkanalen: https://localhost:5001/signout-callback-oidc
• Node.js

ASP.NET Core

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: https://localhost:5001/signin-oidc
  • URL för utloggning i frontkanalen: https://localhost:5001/signout-callback-oidc
• Ett minimikrav för .NET 8.0 SDK

Python Flask

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: http://localhost:5000/getAToken
• Python 3 +

Lägga till appklienthemlighet eller certifikat

Node

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.

ASP.NET Core

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:

1. 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
   

2. Gå tillbaka till administrationscentret för Microsoft Entra och under Hanteraväljer du Certifikat & hemligheter>Ladda upp certifikat.

3. Välj fliken certifikat (0) och välj sedan Ladda upp certifikat.

4. 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.

5. Ange en beskrivning för certifikatet, till exempel Certifikat för aspnet-web-appoch välj Lägg till.

6. Registrera värdet Tumavtryck för användning i nästa steg.

Python Flask

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.

Node

• 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
  

ASP.NET Core

• 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-docs-code-dotnet.git
  

Python Flask

• 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:

Node

I mappen ms-identity-node öppnar du filen App/.env och ersätter sedan 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

ASP.NET Core

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

2. Ö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",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "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.

Python Flask

1. Öppna det program som du laddade ned i en IDE och gå till rotmappen för exempelappen.

   cd flask-web-app
   

2. Skapa en .env-fil i rotmappen i projektet med hjälp av .env.sample.entra-id 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 .env-filen checkas in.

Kör och testa exempelwebbapp

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

Node

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

   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.

ASP.NET Core

1. I projektkatalogen använder du terminalen för att ange följande kommandon:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. 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.

3. 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.

4. 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

1. Leta reda på länken Logga ut i det övre högra hörnet på sidan och välj den.
2. 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.
3. Ett meddelande visas som anger att du har loggat ut. Nu kan du stänga webbläsarfönstret.

Python Flask

1. 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
   

2. Installera kraven med hjälp av pip:

   pip install -r requirements.txt
   

3. 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
   

4. 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.

5. 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.

6. 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.

   

7. Följande skärmbild visas, vilket anger att du har loggat in på programmet.

Så här fungerar appen

Följande diagram visar hur exempelappen fungerar:

1. 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.

2. 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.

Relaterat innehåll

Node

• 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.

ASP.NET Core

• Lär dig genom att skapa den här ASP.NET webbappen med serien Självstudie: Registrera ett program med Microsofts identitetsplattform.
• Snabbstart: Skydda ett ASP.NET Core-webb-API med Microsofts identitetsplattform.
• snabbstart: Distribuera en ASP.NET webbapp till Azure App Service

Python Flask

• Lär dig hur du skapar en Python-webbapp som loggar in användare och anropar ett skyddat webb-API i Självstudie: Webbapp som loggar in användare.

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 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

• Ett Azure-konto med en aktiv prenumeration. Om du inte redan har ett Skapa ett konto kostnadsfritt.
• Det här Azure-kontot måste ha behörighet att hantera program. Någon av följande Microsoft Entra-roller innehåller de behörigheter som krävs:
  • Appadministratör
  • Programutvecklare
  • Molnprogramadministratör
• En extern hyresgäst. Om du vill skapa en väljer du mellan följande metoder:
  • Använd Microsoft Entra External ID-tillägget för att konfigurera en extern hyresgäst direkt i Visual Studio Code. (rekommenderas)
  • Skapa en ny extern klient i Microsoft Entras admincenter.
• Ett användarflöde. Mer information finns i skapa användarflöden för självbetjäningsregistrering för appar i externa klientorganisationer. Det här användarflödet kan användas för flera program.
• Visual Studio Code eller någon annan kodredigerare.

Node

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration och registrera dess identifierare från sidan Översikt. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: http://localhost:3000/auth/redirect
• Lägga till ditt program i användarflödet
• Node.js.

ASP.NET Core

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration och registrera dess identifierare från sidan Översikt. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: https://localhost:7274/signin-oidc
  • URL för utloggning i frontkanalen: https://localhost:7274/signout-callback-oidc
• Lägga till ditt program i användarflödet
• En lägsta version av .NET 8.0 SDK.

Python Django

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration och registrera dess identifierare från sidan Översikt. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: http://localhost:5000/getAToken
• Lägga till ditt program i användarflödet
• Python 3+.

Python Flask

• Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration och registrera dess identifierare från sidan Översikt. Mer information finns i Registrera ett program.
  • Namn: identity-client-web-app
  • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
  • Plattformskonfiguration: Web
  • omdirigerings-URI: http://localhost:3000/getAToken
• Lägga till ditt program i användarflödet
• Python 3+

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 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.

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 Uppdatera och kontrollera sedan att Beviljat för <ditt klientnamn> visas under Status för behörigheten.

Klona eller ladda ned exempelwebbprogram

Node

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

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

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

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

   npm install
   

ASP.NET Core

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.

Python Django

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 filnamnets längd är färre än 260 tecken.

Installera projektets beroenden

1. Öppna ett konsolfönster och ändra till katalogen som innehåller Flask-exempelwebbappen:

   cd django-web-app
   

2. 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
   

3. Installera appberoenden genom att köra följande kommandon:

   python3 -m pip install -r requirements.txt
   

Python Flask

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 filnamnets längd är färre än 260 tecken.

Installera projektets beroenden

1. Öppna ett konsolfönster och ändra till katalogen som innehåller Flask-exempelwebbappen:

   cd flask-web-app
   

2. 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
   

3. 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:

Node

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 namnet på din hyresgäst, läs hur du kan hitta hyresgästens information.
   • Enter_the_Client_Secret_Here och ersätt det med det apphemlighetsvärde som du kopierade tidigare.

ASP.NET Core

1. Gå till rotkatalogen som innehåller ASP.NET Core-exempelappen:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Öppna filen appsettings.json.

3. 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.

4. 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.

5. Ersätt Enter_the_Client_Secret_Here med det klienthemlighetsvärde som du konfigurerade i Lägg till appklienthemlighet.

Python Django

1. Öppna dina projektfiler i Visual Studio Code eller redigeraren som du använder.

2. Skapa en .env-fil i rotmappen i projektet med hjälp av .env.sample.external-id fil som guide.

3. 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 kan läsa klientinformationen.
   4. REDIRECT_URI som bör likna den omdirigerings-URI som du registrerade tidigare bör matcha konfigurationen.

Python Flask

1. Öppna dina projektfiler i Visual Studio Code eller redigeraren som du använder.

2. Skapa en .env-fil i rotmappen i projektet med hjälp av .env.sample.external-id fil som guide.

3. 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 apphemlighetsvärde 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 katalogens (hyresgäst) underdomän. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har din klientunderdomän kan du lära dig hur du läser klientinformationen.

4. 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

Node

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:

   npm start 
   

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

   

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.

   

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.

ASP.NET Core

1. Kör följande kommandon från gränssnittet eller kommandoraden:

   dotnet run
   

2. Öppna webbläsaren och gå till https://localhost:7274.

3. Logga in med ett konto som är registrerat i den externa klientorganisationen.

4. När du har loggat in visas visningsnamnet bredvid knappen Logga ut enligt följande skärmbild.

   

5. Om du vill logga ut från programmet väljer du knappen Logga ut.

Python Django

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

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

   python manage.py runserver localhost:5000                                             
   

   Du kan använda ett valfritt portnummer.

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

   

3. När sidan har lästs in väljer du länken Logga in. Du uppmanas att logga in.

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 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.

6. När du har loggat in eller registrerat dig omdirigeras du tillbaka till webbappen. Du ser en sida som liknar följande skärmbild:

   

7. 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.

Python Flask

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

1. 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.

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

   

3. När sidan har lästs in väljer du länken Logga in. Du uppmanas att logga in.

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 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.

6. När du har loggat in eller registrerat dig omdirigeras du tillbaka till webbappen. Du ser en sida som liknar följande skärmbild:

   

7. 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.

Relaterat innehåll

Node

• Logga in användare i ditt Node.js webbprogram
• Snabbstart – Logga in användare och anropa ett webb-API i Node.js
• Snabbstart – Redigera profil i ett exempel Node.js webbapp

ASP.NET Core

• Använd vår självstudieserie i flera delar för att skapa den här ASP.NET webbappen från grunden
• Aktivera för lösenordsåterställning
• Anpassa standardvarumärket

Python Django

• Logga in användare med en exempel-Flask-webbapplikation
• Aktivera för lösenordsåterställning
• Anpassa standardvarumärket

Python Flask

• Aktivera för lösenordsåterställning
• Anpassa standardvarumärket