Zelfstudie: Uw externe tenant voorbereiden om gebruikers te verifiëren in een Angular-app met één pagina
Deze reeks zelfstudies laat zien hoe u een Angular-toepassing met één pagina (SPA) bouwt en voorbereidt op verificatie met behulp van het Microsoft Entra-beheercentrum. U gebruikt de Microsoft Authentication Library voor JavaScript om uw app te verifiëren met uw externe tenant. Ten slotte voert u de toepassing uit en test u de aanmeldings- en afmeldingservaringen.
In deze zelfstudie:
- Registreer een beveiligd-WACHTWOORDVERIFICATIE in het Microsoft Entra-beheercentrum en noteer de id's ervan
- Het platform en de URL's definiëren
- Machtigingen verlenen aan de BEVEILIGD-WACHTWOORDVERIFICATIE voor toegang tot de Microsoft Graph API
- Een gebruikersstroom voor aanmelden en afmelden maken in het Microsoft Entra-beheercentrum
- Uw BEVEILIGD-WACHTWOORDVERIFICATIE koppelen aan de gebruikersstroom
Vereisten
- Een externe tenant. Kies een van de volgende methoden om er een te maken:
- (Aanbevolen) Gebruik de Microsoft Entra Externe ID-extensie om rechtstreeks in Visual Studio Code een externe tenant in te stellen.
- Maak een nieuwe externe tenant in het Microsoft Entra-beheercentrum.
- Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
- Toepassingsbeheerder
- Toepassingsontwikkelaar
- Beheerder van de cloudtoepassing
De beveiligd-WACHTWOORDVERIFICATIE en record-id's 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:
Meld u als toepassingsontwikkelaar aan bij het Microsoft Entra-beheercentrum.
Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram
Instellingen in het bovenste menu om vanuit het menu Mappen en abonnementen over te schakelen naar uw externe tenant.Blader naar identiteitstoepassingen>> App-registraties.
Selecteer + Nieuwe registratie.
Op de pagina Een toepassing registreren die wordt weergegeven;
- Voer een betekenisvolle toepassingsnaam in die wordt weergegeven aan gebruikers van de app, bijvoorbeeld ciam-client-app.
- Onder Ondersteunde accounttypen selecteert u Enkel accounts in deze organisatieadreslijst.
Selecteer Registreren.
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.
Een omleidings-URL voor het platform toevoegen
Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:
- Selecteer Verificatie onder Beheren
- Selecteer op de pagina Platformconfiguraties een platform toevoegen en selecteer vervolgens toepassing met één pagina.
- Voer voor de omleidings-URI's in
http://localhost:4200/. - Selecteer Configureren om uw wijzigingen op te slaan.
Beheerderstoestemming verlenen
Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals ciam-client-app) om de overzichtspagina te openen.
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:
- Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam> en selecteer Vervolgens Ja.
- Selecteer Vernieuwen en controleer vervolgens of Verleend voor <uw tenantnaam> wordt weergegeven onder Status voor beide bereiken.
Een gebruikersstroom maken
Meld u aan bij het Microsoft Entra-beheercentrum als ten minste een beheerder van de gebruikersstroom voor externe id's.
Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram
Instellingen in het bovenste menu om vanuit het menu Mappen en abonnementen over te schakelen naar uw externe tenant.Blader naar gebruikersstromen> voor externe identiteiten.>
Selecteer + Nieuwe gebruikersstroom.
Op de pagina Maken :
Voer een naam in voor de gebruikersstroom, zoals SignInSignUpSample.
Selecteer E-mailaccounts in de lijst met id-providers. Met deze id-provider kunnen gebruikers zich aanmelden of registreren met hun e-mailadres.
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.
Notitie
Eenmalige wachtwoordcode voor e-mail moet zijn ingeschakeld op tenantniveau (Alle id-providers>per e-mail met eenmalige wachtwoordcode) om deze optie beschikbaar te maken op gebruikersstroomniveau.
Selecteer Maken. De nieuwe gebruikersstroom wordt weergegeven in de lijst gebruikersstromen . Vernieuw de pagina indien nodig.
De toepassing koppelen aan uw gebruikersstroom
Als de klantgebruikers de aanmeldings- of aanmeldingservaring willen zien wanneer ze uw app gebruiken, moet u uw app koppelen aan een gebruikersstroom. Hoewel veel toepassingen aan uw gebruikersstroom kunnen worden gekoppeld, kan één toepassing slechts worden gekoppeld aan één gebruikersstroom.
Selecteer Identiteit in het zijbalkmenu.
Selecteer Externe identiteiten en vervolgens Gebruikersstromen.
Selecteer op de pagina Gebruikersstromen de naam van de gebruikersstroom die u eerder hebt gemaakt, bijvoorbeeld SignInSignUpSample.
Selecteer Toepassingen onder Gebruiken.
Selecteer Toepassing toevoegen.
Selecteer de toepassing in de lijst, zoals ciam-client-app of gebruik het zoekvak om de toepassing te zoeken en selecteer deze.
Kies Selecteren.
Zodra u uw app aan een gebruikersstroom hebt gekoppeld, kunt u uw gebruikersstroom testen door de registratie- of aanmeldingservaring van een gebruiker te simuleren met uw toepassing vanuit het Microsoft Entra-beheercentrum. Gebruik hiervoor de stappen in De gebruikersstroom voor registreren en aanmelden testen.