Quickstart: Gebruikers aanmelden in een voorbeeldweb-app

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platform-configuratie: Web
  • omleidings-URI: http://localhost:3000/auth/redirect
  • Frontkanaal afmeldings-URL: https://localhost:5001/signout-callback-oidc
• Node.js

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platform-configuratie: Web
  • Redirect URI: https://localhost:5001/signin-oidc
  • afmeldings-URL van frontkanaal: https://localhost:5001/signout-callback-oidc
• Een minimale vereiste voor .NET 8.0 SDK-

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platform-configuratie: Web
  • omleidings-URI-: http://localhost:5000/getAToken
• Python 3 +

Maak een clientgeheim voor de geregistreerde toepassing. De toepassing gebruikt het clientgeheim om de identiteit te bewijzen wanneer er tokens worden aangevraagd:

1. Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals webapp client secret) om de pagina Overzicht te openen.
2. Selecteer onder BeherenCertificaten & geheimen>Clientgeheimen>Nieuw clientgeheim.
3. Voer in het vak Beschrijving een beschrijving in voor het clientgeheim (bijvoorbeeld clientgeheim van de web-app).
4. Selecteer onder Verlooptde duur waarvoor het geheim geldig is (volgens de beveiligingsregels van uw organisatie) en klik vervolgens op Toevoegen.
5. Noteer de waarde van geheim . U gebruikt deze waarde voor configuratie in een latere stap. De geheime waarde wordt niet opnieuw weergegeven en kan op geen enkele manier worden opgehaald nadat u weg navigeert van de Certificaten en geheimen. Zorg ervoor dat u deze opneemt.

Als u een certificaatreferentie voor uw web-app wilt gebruiken, moet u het certificaat maken en vervolgens uploaden. Voor testdoeleinden kunt u een zelfondertekend certificaat gebruiken. Gebruik de volgende stappen om een zelfondertekend certificaat te maken en te uploaden:

1. Navigeer met behulp van uw terminal naar een map van uw keuze en maak vervolgens het zelfondertekende certificaat met behulp van de volgende opdracht.

   dotnet dev-certs https -ep ./certificate.crt --trust
   

2. Ga terug naar het Microsoft Entra-admincentrum en selecteer onder BeheerCertificaten & Geheimen>Certificaat uploaden.

3. Selecteer het tabblad Certificaten (0) en selecteer vervolgens Certificaat uploaden.

4. Er wordt een deelvenster Certificaat uploaden weergegeven. Gebruik het pictogram om naar het certificaatbestand te gaan dat u in de vorige stap hebt gemaakt en selecteer openen.

5. Voer een beschrijving in voor het certificaat, bijvoorbeeld Certificaat voor aspnet-web-app-en selecteer Toevoegen.

6. Noteer de vingerafdruk waarde voor gebruik in de volgende stap.

Maak een clientgeheim voor de geregistreerde toepassing. De toepassing gebruikt het clientgeheim om de identiteit te bewijzen wanneer er tokens worden aangevraagd:

1. Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals clientgeheim voor web-apps) om de pagina Overzicht te openen.
2. Selecteer onder BeherenCertificaten, & geheimen>Clientgeheimen>Nieuw clientgeheim.
3. Voer in het vak Beschrijving een beschrijving in voor het clientgeheim (bijvoorbeeld clientgeheim van de web-app).
4. Selecteer onder verloopteen duur waarvoor het geheim geldig is (volgens de beveiligingsregels van uw organisatie) en selecteer vervolgens Toevoegen.
5. Noteer de waarde van het geheim. U gebruikt deze waarde voor configuratie in een latere stap. De geheime waarde wordt niet opnieuw weergegeven en kan op geen enkele manier worden opgehaald nadat u weg navigeert van de Certificaten en geheimen. Zorg ervoor dat u deze opneemt.

• Download het .zip bestanden pak het uit naar een bestandspad waarin de lengte van de naam minder dan 260 tekens is of kloon de opslagplaats:

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Download het .zip bestanden pak het uit naar een bestandspad waarin de lengte van de naam minder dan 260 tekens is of kloon de opslagplaats:

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Download het Python-codevoorbeeld pak het vervolgens uit naar een bestandspad waarin de lengte van de naam minder dan 260 tekens is of kloon de opslagplaats:

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

Open in de map ms-identity-node-main het bestand .env in de map App. Vervang de volgende tijdelijke aanduidingen:

Nadat u wijzigingen hebt aangebracht, ziet het bestand er ongeveer als volgt uit:

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

1. Open in uw IDE de projectmap ms-identity-docs-code-dotnet\web-app-aspnet, met het voorbeeld.

2. Open appsettings.json en vervang de bestandsinhoud door het volgende codefragment;

   {
   "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: de id van de tenant waar de toepassing is geregistreerd. Vervang de tekst tussen aanhalingstekens door de Directory (tenant) ID die eerder is vastgelegd op de overzichtspagina van de geregistreerde toepassing.
   • ClientId : de id van de toepassing, ook wel de client genoemd. Vervang de tekst tussen aanhalingstekens door de Application (client) ID waarde die eerder is vastgelegd op de overzichtspagina van de geregistreerde toepassing.
   • ClientCertificates: er wordt een zelfondertekend certificaat gebruikt voor verificatie in de toepassing. Vervang de tekst van de CertificateThumbprint door de vingerafdruk van het certificaat dat eerder is vastgelegd.

1. Open de toepassing die u hebt gedownload in een IDE en navigeer naar de hoofdmap van de voorbeeld-app.

   cd flask-web-app
   

2. Maak een .env-bestand in de hoofdmap van het project met behulp van .env.sample als richtlijn.

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

   • Stel de waarde van CLIENT_ID in op de applicatie-id (client-id) voor de geregistreerde toepassing, die beschikbaar is op de overzichtspagina.
   • Stel de waarde van CLIENT_SECRET in op het clientgeheim dat u hebt gemaakt in de Certificates & Secrets voor de geregistreerde toepassing.
   • Stel de waarde van AUTHORITY in op een https://login.microsoftonline.com/<TENANT_GUID>. De Directory-id (tenant) is beschikbaar op de overzichtspagina van de app-registratie.

   Er wordt in app_config.pynaar de omgevingsvariabelen verwezen en in een afzonderlijk .env--bestand bewaard om ze buiten broncodebeheer te houden. Het opgegeven bestand .gitignore voorkomt dat het .env--bestand wordt ingecheckt.

1. Voer de volgende opdrachten uit vanuit de projectmap om de server te starten:

   cd App
   npm install
   npm start
   

2. Ga naar http://localhost:3000/.

3. Klik op Aanmelden om het aanmeldingsproces te starten.

De eerste keer dat u zich aanmeldt, wordt u gevraagd uw toestemming te geven om de toepassing toe te staan u aan te melden en toegang te krijgen tot uw profiel. Nadat u bent aangemeld, wordt u teruggeleid naar de startpagina van de toepassing.

Hoe de app werkt

Het voorbeeld fungeert als host voor een webserver op localhost, poort 3000. Wanneer een webbrowser dit adres opent, wordt de startpagina weergegeven in de app. Zodra de gebruiker Aanmeldenselecteert, wordt de browser omgeleid naar het aanmeldingsscherm van Microsoft Entra via de URL die is gegenereerd door de MSAL Node-bibliotheek. Nadat de gebruiker toestemming heeft gegeven, leidt de browser de gebruiker terug naar de startpagina van de toepassing, samen met een id en toegangstoken.

1. Gebruik de terminal in uw projectmap om de volgende opdracht in te voeren;

   dotnet run
   

2. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:5001en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

3. Volg de stappen en voer de benodigde gegevens in om u aan te melden met uw Microsoft-account. U wordt gevraagd een e-mailadres op te geven, zodat een eenmalige wachtwoordcode naar u kan worden verzonden. Voer de code in wanneer u hierom wordt gevraagd.

4. De toepassing vraagt toestemming om toegang te behouden tot de gegevens waartoe u eerder toegang hebt verleend, en om u aan te melden en uw profiel te lezen. Selecteer Accepteren. De volgende schermopname wordt weergegeven. Het geeft aan dat u bent aangemeld bij de toepassing en uw profielgegevens bekijkt vanuit de Microsoft Graph API.

   

Afmelden bij de toepassing

1. Zoek de koppeling Afmelden in de rechterbovenhoek van de pagina en selecteer deze.
2. U wordt gevraagd een account te kiezen om u af te melden. Selecteer het account dat u hebt gebruikt om u aan te melden.
3. Er verschijnt een bericht dat aangeeft dat u bent afgemeld. U kunt nu het browservenster sluiten.

1. Maak een virtuele omgeving voor de app:

   • Voer voor Windowsde volgende opdrachten uit:

   py -m venv .venv
   .venv\scripts\activate
   

   • Voer voor macOS-/Linux-de volgende opdrachten uit:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Installeer de vereisten met behulp van pip:

   pip install -r requirements.txt
   

3. Voer de app uit vanaf de command line. Zorg ervoor dat uw app wordt uitgevoerd op dezelfde poort als de omleidings-URI die u eerder hebt geconfigureerd.

   flask run --debug --host=localhost --port=5000
   

4. Kopieer de https-URL die wordt weergegeven in de terminal, bijvoorbeeld https://localhost:5000en plak deze in een browser. U wordt aangeraden een privé- of incognitobrowsersessie te gebruiken.

5. Volg de stappen en voer de benodigde gegevens in om u aan te melden met uw Microsoft-account. U wordt gevraagd een e-mailadres en wachtwoord op te geven om u aan te melden.

6. De toepassing vraagt toestemming om de toegang tot gegevens te behouden waar u toegang tot hebt en om u aan te melden en vervolgens uw profiel te lezen, zoals wordt weergegeven in de schermopname. Selecteer Accepteren.

   

7. De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing.

Hoe de app werkt

In het volgende diagram ziet u hoe de voorbeeld-app werkt:

1. De toepassing maakt gebruik van het identity-pakket om een toegangstoken te verkrijgen van het Microsoft Identity Platform. Dit pakket is gebouwd boven op de Microsoft Authentication Library (MSAL) voor Python om verificatie en autorisatie in web-apps te vereenvoudigen.

2. Het toegangstoken dat u in de vorige stap verkrijgt, wordt gebruikt als bearer-token om de gebruiker te verifiëren bij het aanroepen van de Microsoft Graph API.

• Leer hoe je een Node.js-web-app bouwt die gebruikers aanmeldt en de Microsoft Graph API aanroept in de zelfstudie: Gebruikers aanmelden en een token verkrijgen voor Microsoft Graph in een Node.js & Express-web-app.

• Leer hoe u deze ASP.NET-web-app bouwt met de reeks Zelfstudie: Een toepassing registreren bij het Microsoft Identity Platform.
• quickstart: Een ASP.NET Core-web-API beveiligen met het Microsoft Identity Platform.
• quickstart: Een ASP.NET-web-app implementeren in Azure App Service-

• Meer informatie over het bouwen van een Python-web-app die gebruikers aanmeldt en een beveiligde web-API aanroept in Zelfstudie: Web-app waarmee gebruikers worden aangemeld.

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app op de overzichtspagina. Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app-
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platformconfiguratie: Web
  • omleidings-URI: http://localhost:3000/auth/redirect
• uw toepassing toevoegen aan de gebruikersstroom
• Node.js.

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's vanaf de overzichtspagina van de app . Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platformconfiguratie: Web
  • Redirect URI: https://localhost:7274/signin-oidc
  • afmeldings-URL van frontkanaal: https://localhost:7274/signout-callback-oidc
• uw toepassing toevoegen aan de gebruikersstroom
• Een minimale versie van .NET 8.0 SDK.

• Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de ID's van de app Overzichtspagina. Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platform-configuratie: Web
  • omleidings-URI-: http://localhost:5000/getAToken
• uw toepassing toevoegen aan de gebruikersstroom
• Python 3+.

• ** Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie en noteer de id's van de app vanaf de Overzicht-pagina. Zie Een toepassing registrerenvoor meer informatie.
  • naam: identity-client-web-app
  • Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
  • Platform-configuratie: Web
  • Redirect URI: http://localhost:3000/getAToken
• uw toepassing toevoegen aan de gebruikersstroom
• Python 3+

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand:

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Als alternatief het voorbeeldbestand .zip downloadenen vervolgens uitpakken naar een bestandspad waarin de lengte van de naam minder dan 260 tekens is.

Projectafhankelijkheden installeren

1. Open een consolevenster en ga naar de map met de Node.js voorbeeld-app:

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

2. Voer de volgende opdrachten uit om app-afhankelijkheden te installeren:

   npm install
   

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

Projectafhankelijkheden installeren

1. Open een consolevenster en ga naar de map met de Flask-voorbeeldweb-app:

   cd django-web-app
   

2. Virtuele omgeving instellen:

   • Voer voor Windowsde volgende opdrachten uit:

   py -m venv .venv
   .venv\scripts\activate
   

   • Voer voor macOS-/Linux-de volgende opdrachten uit:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Voer de volgende opdrachten uit om app-afhankelijkheden te installeren:

   python3 -m pip install -r requirements.txt
   

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• Download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

Projectafhankelijkheden installeren

1. Open een consolevenster en ga naar de map met de Flask-voorbeeldweb-app:

   cd flask-web-app
   

2. Virtuele omgeving instellen:

   • Voer voor Windowsde volgende opdrachten uit:

   py -m venv .venv
   .venv\scripts\activate
   

   • Voer voor macOS-/Linux-de volgende opdrachten uit:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Voer de volgende opdrachten uit om app-afhankelijkheden te installeren:

   python3 -m pip install -r requirements.txt
   

1. In uw code-editor, open het App\authConfig.js-bestand.

2. Zoek de tijdelijke aanduiding:

   • Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.
   • Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leert u hoe u uw tenantgegevens kunt lezen.
   • Enter_the_Client_Secret_Here en vervang deze door de waarde van het app-geheim die u eerder hebt gekopieerd.

1. Navigeer naar de hoofdmap met de ASP.NET Core-voorbeeld-app:

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

2. Open het bestand appsettings.json.

3. Zoek in AuthorityEnter_the_Tenant_Subdomain_Here en vervang deze door het subdomein van uw tenant. Als uw primaire tenantdomein bijvoorbeeld is caseyjensen@onmicrosoft.com, is de waarde die u moet invoeren casyjensen.

4. Zoek de waarde Enter_the_Application_Id_Here en vervang deze door de toepassings-id (clientId) van de app die u hebt geregistreerd in het Microsoft Entra-beheercentrum.

5. Vervang Enter_the_Client_Secret_Here door de waarde van het clientgeheim die u hebt ingesteld in App-clientgeheim toevoegen.

1. Open uw projectbestanden in Visual Studio Code of de editor die u gebruikt.

2. Maak een .env-bestand in de hoofdmap van het project met behulp van .env.sample-bestand als richtlijn.

3. Geef in het bestand .env de volgende omgevingsvariabelen op:

   1. CLIENT_ID de toepassings-id (client) van de app die u eerder hebt geregistreerd.
   2. CLIENT_SECRET de waarde van het app-geheim die u eerder hebt gekopieerd.
   3. AUTHORITY de URL die een tokeninstantie identificeert. Deze moet de volgende indeling hebben https://{subdomein}.ciamlogin.com/{subdomein}.onmicrosoft.com. Vervang subdomein door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantsubdomein niet hebt, leert u hoe u uw tenantgegevens kunt bekijken.
   4. REDIRECT_URI die vergelijkbaar moet zijn met de omleidings-URI die u eerder hebt geregistreerd, moet overeenkomen met uw configuratie.

1. Open uw projectbestanden in Visual Studio Code of de editor die u gebruikt.

2. Maak een .env-bestand in de hoofdmap van het project met behulp van .env.sample-bestand als richtlijn.

3. Geef in het bestand .env de volgende omgevingsvariabelen op:

   • CLIENT_ID de toepassings-id (client) van de app die u eerder hebt geregistreerd.
   • CLIENT_SECRET is de waarde van het app-sleutel die u eerder hebt gekopieerd.
   • AUTHORITY, dat is de URL die een tokenautoriteit identificeert. Dit moet het formaat hebben https://{subdomein}.ciamlogin.com/{subdomein}.onmicrosoft.com. Vervang subdomein door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantsubdomein niet hebt, leert u hoe u uw tenantgegevens kunt lezen.

4. Controleer of de omleidings-URI goed is geconfigureerd. De omleidings-URI die u eerder hebt geregistreerd, moet overeenkomen met uw configuratie. In dit voorbeeld wordt standaard het omleidings-URI-pad ingesteld op /getAToken. Deze configuratie bevindt zich in het app_config.py bestand als REDIRECT_PATH.

U kunt nu de voorbeeld-Node.js-web-app testen. U moet de Node.js-server starten en toegankelijk maken via uw browser op http://localhost:3000.

1. Voer in de terminal de volgende opdracht uit:

   npm start 
   

2. Open uw browser en ga vervolgens naar http://localhost:3000. De pagina ziet er ongeveer als volgt uit:

   

3. Nadat de pagina is geladen, selecteert u Aanmelden wanneer hierom wordt gevraagd.

4. Typ op de aanmeldingspagina uw e-mailadres, selecteer Volgende, typ uw wachtwoorden selecteer Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.

5. Als u de registratieoptie kiest, voltooit u de volledige aanmeldingsstroom nadat u uw e-mail hebt ingevuld, eenmalige wachtwoordcode, nieuw wachtwoord en meer accountgegevens. U ziet een pagina die vergelijkbaar is met de volgende schermopname. U ziet een vergelijkbare pagina als u de aanmeldingsoptie kiest.

   

6. Selecteer Afmelden om de gebruiker af te melden bij de web-app of selecteer Id-tokenclaims weergeven om id-tokenclaims weer te geven die door Microsoft Entra worden geretourneerd.

Hoe het werkt

Wanneer gebruikers de koppeling Aanmelden selecteren, initieert de app een verificatieaanvraag en worden gebruikers omgeleid naar externe Microsoft Entra-id. Op de aanmeldings- of registratiepagina die wordt weergegeven, wanneer een gebruiker zich heeft aangemeld of een account maakt, retourneert Microsoft Entra External ID een id-token naar de app. De app valideert het id-token, leest de claims en retourneert een beveiligde pagina aan de gebruikers.

Wanneer de gebruikers de koppeling Afmelden selecteren, wordt de sessie gewist en wordt de gebruiker omgeleid naar het afmeldingseindpunt van Microsoft Entra External ID om te melden dat de gebruiker zich heeft afgemeld.

Als u een app wilt bouwen die vergelijkbaar is met het voorbeeld dat u hebt uitgevoerd, voert u de stappen uit in Gebruikers aanmelden in uw eigen Node.js webtoepassing artikel.

1. Voer vanuit uw shell of opdrachtregel de volgende opdrachten uit:

   dotnet run
   

2. Open uw webbrowser en navigeer naar https://localhost:7274.

3. Meld u aan met een account dat is geregistreerd bij de externe tenant.

4. Nadat u bent aangemeld, wordt de weergavenaam weergegeven naast de knop Afmelden, zoals wordt weergegeven in de volgende schermopname.

   

5. Als u zich wilt afmelden bij de toepassing, selecteert u de knop Afmelden.

Start de app om de inlogervaring in actie te zien.

1. Voer in de terminal de volgende opdracht uit:

   python manage.py runserver localhost:5000                                             
   

   U kunt een poortnummer van uw keuze gebruiken.

2. Open uw browser en ga vervolgens naar http://localhost:5000. U zou een pagina moeten zien die lijkt op de volgende schermafbeelding:

   

3. Nadat de pagina is geladen, selecteert u de koppeling Aanmelden. U wordt gevraagd u aan te melden.

4. Typ op de aanmeldingspagina uw e-mailadres, selecteer Volgende, typ uw wachtwoorden selecteer Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.

5. Als u de registratieoptie kiest, doorloopt u het registratieproces. Vul uw e-mail, eenmalige wachtwoordcode, nieuw wachtwoord en meer accountgegevens in om de volledige aanmeldingsstroom te voltooien.

6. Nadat u zich hebt aangemeld of zich hebt geregistreerd, wordt u teruggeleid naar de web-app. U ziet een pagina die er ongeveer als volgt uitziet:

   

7. Selecteer afmelden om de gebruiker af te melden bij de web-app of selecteer Een downstream-API aanroepen om een microsoft Graph-eindpunt aan te roepen.

Hoe het werkt

Wanneer gebruikers de koppeling Aanmelden selecteren, initieert de app een verificatieaanvraag en worden gebruikers omgeleid naar externe Microsoft Entra-id. Een gebruiker meldt zich vervolgens aan of registreert zich op de pagina die verschijnt. Nadat u de vereiste referenties hebt opgegeven en toestemming hebt gegeven voor de vereiste access scopes, stuurt Microsoft Entra External ID de gebruiker terug naar de webapp met een autorisatiecode. De web-app gebruikt vervolgens deze autorisatiecode om een token te verkrijgen van externe Microsoft Entra-id.

Wanneer de gebruikers de afmeldingskoppeling selecteren, wist de app de sessie en leidt de gebruiker om naar het afmeldingseindpunt van Microsoft Entra External ID om te melden dat de gebruiker is afgemeld. De gebruiker wordt vervolgens teruggeleid naar de web-app.

Voer de app uit om de aanmeldervaring in actie te zien.

1. Voer in de terminal de volgende opdracht uit:

   python3 -m flask run --debug --host=localhost --port=3000
   

   U kunt de poort van uw keuze gebruiken. Dit moet vergelijkbaar zijn met de poort van de omleidings-URI die u eerder hebt geregistreerd.

2. Open uw browser en ga vervolgens naar http://localhost:3000. De pagina ziet er ongeveer als volgt uit:

   

3. Nadat de pagina is geladen, selecteert u de koppeling Aanmelden. U wordt gevraagd u aan te melden.

4. Typ op de aanmeldingspagina uw e-mailadres, selecteer Volgende, typ uw wachtwoorden selecteer Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.

5. Als u de registreeroptie kiest, doorloopt u het registratieproces. Vul uw e-mail, eenmalige wachtwoordcode, nieuw wachtwoord en meer accountgegevens in om de volledige registratiestroom te voltooien.

6. Nadat u zich hebt aangemeld of zich hebt geregistreerd, wordt u teruggeleid naar de web-app. U ziet een pagina die er ongeveer als volgt uitziet:

   

7. Selecteer afmelden om de gebruiker af te melden bij de web-app of selecteer Een downstream-API aanroepen om een microsoft Graph-eindpunt aan te roepen.

Hoe het werkt

Wanneer gebruikers de koppeling Aanmelden selecteren, initieert de app een verificatieaanvraag en worden gebruikers omgeleid naar externe Microsoft Entra-id. Een gebruiker meld zich vervolgens aan of registreert zich op de pagina die wordt weergegeven. Nadat u de vereiste inloggegevens hebt opgegeven en toestemming hebt gegeven voor de benodigde machtigingen, stuurt Microsoft Entra External ID de gebruiker terug naar de web-app met een autorisatiecode. De web-app gebruikt vervolgens deze autorisatiecode om een token te verkrijgen van externe Microsoft Entra-id.

Wanneer de gebruikers de afmeldingskoppeling selecteren, wist de app de sessie en leidt de gebruiker om naar het afmeldingseindpunt van Microsoft Entra External ID om te bevestigen dat de gebruiker zich heeft afgemeld. De gebruiker wordt vervolgens teruggeleid naar de webapp.

• Gebruikers aanmelden bij uw Node.js-webtoepassing
• Quickstart - gebruikers aanmelden en een web-API aanroepen in Node.js voorbeeld-
• quickstart: profiel bewerken in een voorbeeld-Node.js-web-app

• Gebruik onze reeks meerdelige zelfstudies om deze ASP.NET webtoepassing helemaal zelf te bouwen
• Wachtwoordherstel inschakelen
• het standaardmerk aanpassen

• gebruikers aanmelden met behulp van een flask-voorbeeldwebtoepassing
• Wachtwoord opnieuw instellen inschakelen
• het standaardmerk aanpassen

• wachtwoord opnieuw instellen inschakelen
• het standaardmerk aanpassen