Share via

Gebruikers aanmelden in een Python Flask-voorbeeldwebtoepassing

  • Artikel

In dit artikel verkent u een Python Flask-web-app die wordt beveiligd door Microsoft Entra Externe ID. Dit voorbeeld leidt u door de aanmeldingservaring voor klanten die zich verifiëren bij een Python Flask-web-app. De voorbeeldweb-app maakt gebruik van de Microsoft Authentication Library voor Python (MSAL Python) voor het afhandelen van gebruikersverificatie.

Vereisten

De web-app registreren

Als u wilt dat uw toepassing gebruikers kan aanmelden met Microsoft Entra, moet Microsoft Entra Externe ID op de hoogte worden gesteld van de toepassing die u maakt. De app-registratie brengt een vertrouwensrelatie tot stand tussen de app en Microsoft Entra. Wanneer u een toepassing registreert, genereert externe id een unieke id die bekend staat als een toepassings-id (client), een waarde die wordt gebruikt om uw app te identificeren bij het maken van verificatieaanvragen.

De volgende stappen laten zien hoe u uw app registreert in het Microsoft Entra-beheercentrum:

  1. Meld u als toepassingsontwikkelaar aan bij het Microsoft Entra-beheercentrum.

  2. Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram Instellingenin het bovenste menu om over te schakelen naar uw externe tenant vanuit het menu Mappen en abonnementen.

  3. Blader naar identiteitstoepassingen>> App-registraties.

  4. Selecteer + Nieuwe registratie.

  5. Op de pagina Een toepassing registreren die wordt weergegeven;

    1. Voer een betekenisvolle toepassingsnaam in die wordt weergegeven aan gebruikers van de app, bijvoorbeeld ciam-client-app.
    2. Onder Ondersteunde accounttypen selecteert u Enkel accounts in deze organisatieadreslijst.

  6. Selecteer Registreren.

  7. Het deelvenster Overzicht van de toepassing wordt weergegeven bij een geslaagde registratie. Noteer de toepassings-id (client) die moet worden gebruikt in de broncode van uw toepassing.

Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:

  1. Selecteer Verificatie onder Beheren
  2. Selecteer op de pagina Platformconfiguraties de optie Een platform toevoegen en selecteer vervolgens de optie Web.
  3. Voer voor de omleidings-URI's in http://localhost:3000/getAToken. Deze omleidings-URI is de locatie waar de autorisatieserver het toegangstoken verzendt. U kunt deze aanpassen aan uw use-case.
  4. Selecteer Configureren om uw wijzigingen op te slaan.

App-clientgeheim toevoegen

Maak vervolgens 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 ciam-client-app) om de overzichtspagina te openen.
  2. Selecteer onder Beheren de optie Certificaten en geheimen.
  3. Selecteer Nieuw clientgeheim.
  4. Voer in het vak Beschrijving een beschrijving in voor het clientgeheim (bijvoorbeeld ciam-app-clientgeheim).
  5. Selecteer onder Verlopen een duur waarvoor het geheim geldig is (volgens de beveiligingsregels van uw organisatie) en selecteer vervolgens Toevoegen.
  6. 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.

  1. Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals ciam-client-app) om de overzichtspagina te openen.

  2. Selecteer onder Beheren de optie API-machtigingen. In de lijst met geconfigureerde machtigingen is aan uw toepassing de machtiging User.Read toegewezen. Omdat de tenant echter een externe tenant is, kunnen de consumentengebruikers zelf geen toestemming geven voor deze machtiging. U als beheerder moet toestemming geven voor deze machtiging namens alle gebruikers in de tenant:

    1. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam> en selecteer Vervolgens Ja.
    2. Selecteer Vernieuwen en controleer vervolgens of Verleend voor <uw tenantnaam> wordt weergegeven onder Status voor beide bereiken.

Een gebruikersstroom maken

Volg deze stappen om een gebruikersstroom te maken die een klant kan gebruiken om zich aan te melden of zich te registreren voor een toepassing.

  1. Meld u aan bij het Microsoft Entra-beheercentrum als ten minste een externe id-gebruikersstroom Beheer istrator.

  2. Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram Instellingenin het bovenste menu om over te schakelen naar uw externe tenant vanuit het menu Mappen en abonnementen.

  3. Blader naar gebruikersstromen> voor externe identiteiten.>

  4. Selecteer + Nieuwe gebruikersstroom.

  5. Op de pagina Maken :

    1. Voer een naam in voor de gebruikersstroom, zoals SignInSignUpSample.

    2. Selecteer E-mailaccounts in de lijst met id-providers. Met deze id-provider kunnen gebruikers zich aanmelden of registreren met hun e-mailadres.

      Notitie

      Aanvullende id-providers worden hier alleen vermeld nadat u federatie met hen hebt ingesteld. Als u bijvoorbeeld federatie met Google of Facebook instelt, kunt u deze extra id-providers hier selecteren.

    3. Onder E-mailaccounts kunt u een van de twee opties selecteren. Voor deze zelfstudie selecteert u E-mail met wachtwoord.

      • E-mail met wachtwoord: hiermee kunnen nieuwe gebruikers zich registreren en aanmelden met een e-mailadres als de aanmeldingsnaam en een wachtwoord als hun eerste factorreferentie.
      • Eenmalige wachtwoordcode per e-mail verzenden: hiermee kunnen nieuwe gebruikers zich registreren en aanmelden met behulp van een e-mailadres als de aanmeldingsnaam en eenmalige wachtwoordcode per e-mail als hun eerste factorreferentie. Wachtwoordcode voor eenmalige e-mail moet zijn ingeschakeld op tenantniveau (Alle id-providers>voor eenmalige wachtwoordcode) om deze optie beschikbaar te maken op gebruikersstroomniveau.

    4. Kies onder Gebruikerskenmerken de kenmerken die u wilt verzamelen van de gebruiker bij het aanmelden. Als u Meer weergeven selecteert, kunt u kenmerken en claims kiezen voor land/regio, weergavenaam en postcode. Selecteer OK. (Gebruikers worden alleen om kenmerken gevraagd wanneer ze zich voor het eerst registreren.)

  6. Selecteer Maken. De nieuwe gebruikersstroom wordt weergegeven in de lijst gebruikersstromen . Vernieuw de pagina indien nodig.

Als u selfservice voor wachtwoordherstel wilt inschakelen, gebruikt u de stappen in het artikel Selfservice voor wachtwoordherstel inschakelen.

De webtoepassing koppelen aan de gebruikersstroom

Hoewel veel toepassingen aan uw gebruikersstroom kunnen worden gekoppeld, kan één toepassing slechts worden gekoppeld aan één gebruikersstroom. Met een gebruikersstroom kan de gebruikerservaring voor specifieke toepassingen worden geconfigureerd. U kunt bijvoorbeeld een gebruikersstroom configureren waarvoor gebruikers zich moeten aanmelden of zich moeten aanmelden met een e-mailadres.

  1. Selecteer Identiteit in het zijbalkmenu.

  2. Selecteer Externe identiteiten en vervolgens Gebruikersstromen.

  3. Selecteer op de pagina Gebruikersstromen de naam van de gebruikersstroom die u eerder hebt gemaakt, bijvoorbeeld SignInSignUpSample.

  4. Selecteer Toepassingen onder Gebruiken.

  5. Selecteer Toepassing toevoegen.

  6. Selecteer de toepassing in de lijst, zoals ciam-client-app of gebruik het zoekvak om de toepassing te zoeken en selecteer deze.

  7. Kies Selecteren.

Voorbeeldwebtoepassing klonen of downloaden

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

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

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

    python3 -m pip install -r requirements.txt

De voorbeeldweb-app configureren

  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 . env.sample-bestand als richtlijn.

  3. Geef in uw .env-bestand de volgende omgevingsvariabelen op:

    • CLIENT_ID dit is de toepassings-id (client) van de app die u eerder hebt geregistreerd.
    • CLIENT_SECRET dit is de app-geheime waarde die u eerder hebt gekopieerd.
    • AUTHORITY dit is de URL waarmee een tokeninstantie wordt geïdentificeerd. Deze moet de 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, leest u de details van uw tenant.

  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. Dit is geconfigureerd in het app_config.py-bestand als REDIRECT_PATH.

Voorbeeld-web-app uitvoeren en testen

Voer de app uit om de aanmeldervaring tijdens het afspelen te bekijken.

Notitie

In dit voorbeeld wordt de bibliotheek van derden van de Python-identiteit gebruikt. De bibliotheek wordt niet officieel onderhouden door Microsoft, maar wordt aanbevolen voor uw gebruik. Met deze bibliotheek kunt u eenvoudiger verificatie toevoegen aan uw web-app, omdat hiermee veel MSAL Python-details worden geabstraheerd.

  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 naar http://localhost:3000. De pagina ziet er ongeveer als volgt uit:

    Schermopname van de voorbeeldpagina van flask-web-app.

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

  4. Typ uw e-mailadres op de aanmeldingspagina, selecteer Volgende, typ uw wachtwoord en selecteer Vervolgens 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 de aanmeldingsstroom. 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:

    Schermopname van flask-web-appvoorbeeld na geslaagde verificatie.

  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 leidt de gebruiker om naar Microsoft Entra Externe ID. Een gebruiker meldt zich vervolgens aan of registreert de pagina op de pagina die wordt weergegeven. Nadat u de vereiste referenties hebt opgegeven en toestemming hebt gegeven voor de vereiste bereiken, Microsoft Entra Externe ID de gebruiker terugleidt naar de web-app met een autorisatiecode. De web-app gebruikt vervolgens deze autorisatiecode om een token van Microsoft Entra Externe ID te verkrijgen.

Wanneer de gebruikers de afmeldingskoppeling selecteren, wist de app de sessie, de gebruiker omleiden naar Microsoft Entra Externe ID afmeldingseindpunt om te melden dat de gebruiker zich heeft afgemeld. De gebruiker wordt vervolgens teruggeleid naar de web-app.

Gerelateerde inhoud