Snabbstart: Logga in användare i en exempelwebbapp
Artikel
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.
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.
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.
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 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.
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",
"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.
Ö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.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.
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 kommandon:
cd ms-identity-docs-code-dotnet/web-app-aspnet
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.
Så här fungerar appen
Följande diagram visar hur exempelappen 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.
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.
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)
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)
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)
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)
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 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:
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.
Välj Bevilja administratörsmedgivande för <ditt klientnamn>och välj sedan Ja.
Välj Uppdatera och kontrollera sedan att Beviljat för <ditt klientnamn> visas under Status för behörigheten.
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.
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.external-id 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 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 klientunderdomänen kan du lära dig hur du kan läsa klientinformationen.
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 hjälp av .env.sample.external-id 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 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.
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.
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.
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.
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.
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.
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.