Gebruikers aanmelden in een voorbeeld van een Electron-bureaubladtoepassing

Van toepassing op:Externe tenantsvan werknemers (meer informatie)

In deze handleiding wordt een voorbeeld van een Electron-bureaubladtoepassing gebruikt om te laten zien hoe u verificatie toevoegt aan een bureaubladtoepassing. Met de voorbeeldtoepassing kunnen gebruikers zich aanmelden en afmelden. De voorbeeldwebtoepassing maakt gebruik van Microsoft Authentication Library (MSAL) voor Node om verificatie af te handelen.

In dit artikel voert u de volgende taken uit:

• Registreer een bureaubladtoepassing in het Microsoft Entra-beheercentrum.

• Maak een gebruikersstroom voor aanmelden en afmelden in het Microsoft Entra-beheercentrum.

• Koppel uw webtoepassing aan de gebruikersstroom.

• Werk een voorbeeld van een Electron-bureaubladtoepassing bij met behulp van uw eigen externe tenantgegevens.

• Voer de voorbeeld-bureaubladtoepassing uit en test deze.

Vereisten

• Node.js.

• Visual Studio Code of een andere code-editor.

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

Desktop-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 Instellingen in het bovenste menu om vanuit het menu Mappen en abonnementen over te schakelen naar uw externe tenant.

3. Blader naar > 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 een platform toevoegen en selecteer vervolgens de optie Mobiele en bureaubladtoepassingen.
3. Voor de aangepaste omleidings-URI's voert http://localhostu in en selecteert u Configureren.
4. Selecteer Configureren om uw wijzigingen op te slaan.

Beheerderstoestemming verlenen

Nadat u uw toepassing hebt geregistreerd, wordt de machtiging User.Read toegewezen. Omdat de tenant echter een externe tenant is, kunnen de gebruikers van de klant zelf geen toestemming geven voor deze machtiging. U als beheerder moet toestemming geven voor deze machtiging namens alle gebruikers in de tenant:

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.

   1. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam> en selecteer Vervolgens Ja.
   2. Selecteer Vernieuwenen controleer of verleend voor <uw tenantnaam> wordt weergegeven onder Status voor de machtiging.

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 beheerder van de gebruikersstroom voor externe id's.

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

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 instelt met Google, Facebook-, Apple- of een OIDC-id-provider, 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

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.

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.

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.

Voorbeeldwebtoepassing klonen of downloaden

Als u de voorbeeldcode van de bureaublad-app wilt ophalen, downloadt u het .zip bestand of kloont u de voorbeeldwebtoepassing van GitHub door de volgende opdracht uit te voeren:

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

Als u ervoor kiest om het .zip bestand te downloaden, extraheert u het voorbeeld-app-bestand naar een map waarin de totale lengte van het pad 260 of minder tekens is.

Projectafhankelijkheden installeren

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

   cd 1-Authentication\3-sign-in-electron\App
   

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

   npm install && npm update
   

De voorbeeldweb-app configureren

1. Open App\authConfig.js het bestand in de code-editor.

2. Zoek de tijdelijke aanduiding:

   1. Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.

   2. Enter_the_Tenant_Subdomain_Here en vervang het door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leest u de details van uw tenant.

Voorbeeld-web-app uitvoeren en testen

U kunt nu de voorbeeld-Electron-bureaublad-app testen. Nadat u de app hebt uitgevoerd, wordt het venster van de bureaublad-app automatisch weergegeven:

1. Voer in de terminal de volgende opdracht uit:

   npm start
   

   

2. Selecteer in het bureaubladvenster dat wordt weergegeven de knop Aanmelden of Registreren . Er wordt een browservenster geopend en u wordt gevraagd u aan te melden.

3. Typ uw e-mailadres op de aanmeldingspagina van de browser, 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.

4. Als u de registratieoptie kiest, voltooit u na het invullen van uw e-mail, eenmalige wachtwoordcode, nieuw wachtwoord en meer accountgegevens de volledige aanmeldingsstroom. U ziet een pagina die vergelijkbaar is met de volgende schermopname. U ziet een vergelijkbare pagina als u de aanmeldingsoptie kiest. Op de pagina worden token-id-claims weergegeven.

   

Zie ook

• Schakel wachtwoordherstel in.
• Pas de standaard huisstijl aan.
• Aanmelding bij Google configureren.
• Verken de voorbeeldcode van de Electron-bureaublad-app.