Share via

Gebruikers aanmelden in een voorbeeld vanille-JavaScript-toepassing met één pagina

  • Artikel

Deze handleiding maakt gebruik van een voorbeeld vanille JavaScript-toepassing met één pagina (SPA) om te laten zien hoe u verificatie toevoegt aan een BEVEILIGD-WACHTWOORDVERIFICATIE. Met de beveiligd-WACHTWOORDVERIFICATIE kunnen gebruikers zich aanmelden en afmelden met behulp van hun eigen Microsoft Entra-id voor de tenant van klanten. In het voorbeeld wordt de Microsoft Authentication Library voor JavaScript (MSAL.js) gebruikt om verificatie af te handelen.

Vereisten

  • Hoewel elke IDE die ondersteuning biedt voor vanille JS-toepassingen kan worden gebruikt, wordt Visual Studio Code aanbevolen voor deze handleiding. Het kan worden gedownload van de pagina Downloads .
  • Node.js.
  • Microsoft Entra-id voor de tenant van de klant. Als u nog geen abonnement hebt, meldt u zich aan voor een gratis proefversie.

De SPA registreren in het Microsoft Entra-beheercentrum

Als u wilt dat uw toepassing gebruikers kan aanmelden met Microsoft Entra, moet Microsoft Entra-id voor klanten 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 een toepassings-id (client-id) wordt genoemd, een waarde die wordt gebruikt om uw app te identificeren bij het maken van verificatieaanvragen.

In de volgende stappen ziet u hoe u uw app registreert in het Microsoft Entra-beheercentrum:

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

  2. Als u toegang hebt tot meerdere tenants, gebruikt u het filter Mappen en abonnementen in het bovenste menu om over te schakelen naar de tenant van uw klant.

  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 wanneer de registratie is geslaagd. 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 Platformconfiguratiesde optie Een platform toevoegen en selecteer vervolgens de optie BEVEILIGD-WACHTWOORDVERIFICATIE .
  3. Voer voor de omleidings-URI's in http://localhost:3000/redirect
  4. Selecteer Configureren om uw wijzigingen op te slaan.
  5. Ga terug naar de pagina Platformconfiguraties en selecteer in de nieuwe toepassing met één pagina die is weergegeven de optie URI toevoegen en voer vervolgens in http://localhost:3000/
  6. Selecteer Opslaan om uw wijzigingen op te slaan en zorg ervoor dat beide URI's worden weergegeven.

API-machtigingen verlenen

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

  2. Selecteer onder Beheren de optie API-machtigingen.

  3. Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.

  4. Selecteer het tabblad Microsoft API's .

  5. Selecteer in de sectie Veelgebruikte Microsoft-API'sde optie Microsoft Graph.

  6. Selecteer de optie Gedelegeerde machtigingen .

  7. Zoek en selecteer in de sectie Machtigingen selecteren zowel openid als offline_access machtigingen.

  8. Selecteer de knop Toestemmingen toevoegen.

  9. Op dit moment hebt u de machtigingen correct toegewezen. Omdat de tenant echter de tenant van een klant is, kunnen de consumentengebruikers zelf geen toestemming geven voor deze machtigingen. U als beheerder moet toestemming geven voor deze machtigingen 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 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 filter Mappen en abonnementen in het bovenste menu om over te schakelen naar de tenant van uw klant.

  3. Blader naar Identiteitsgebruikersstromen>voor externe identiteiten>.

  4. Selecteer + Nieuwe gebruikersstroom.

  5. Op de pagina Maken :

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

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

      Notitie

      Aanvullende id-providers worden hier alleen weergegeven 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 Email accounts kunt u een van de twee opties selecteren. Voor deze zelfstudie selecteert u Email met wachtwoord.

      • Email met wachtwoord: hiermee kunnen nieuwe gebruikers zich registreren en zich aanmelden met een e-mailadres als aanmeldingsnaam en een wachtwoord als hun eerste factorreferentie.

      • Email eenmalige wachtwoordcode: hiermee kunnen nieuwe gebruikers zich registreren en zich aanmelden met behulp van een e-mailadres als aanmeldingsnaam en een eenmalige wachtwoordcode per e-mail verzenden als hun eerste factorreferentie.

        Notitie

        Email eenmalige wachtwoordcode moet zijn ingeschakeld op tenantniveau (Alle id-providers>Email Eenmalige wachtwoordcode) om deze optie beschikbaar te maken op gebruikersstroomniveau.

    4. Kies onder Gebruikerskenmerken de kenmerken die u wilt verzamelen van de gebruiker bij de registratie. Als u Meer weergeven selecteert, kunt u kenmerken en claims kiezen voor Land/regio, Weergavenaam en Postcode. Selecteer OK. (Gebruikers worden alleen gevraagd om kenmerken wanneer ze zich voor de eerste keer registreren.)

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

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

De beveiligd-WACHTWOORDVERIFICATIE koppelen aan de gebruikersstroom

Hoewel veel toepassingen aan uw gebruikersstroom kunnen worden gekoppeld, kan één toepassing slechts aan één gebruikersstroom worden gekoppeld. Met een gebruikersstroom kunt u de gebruikerservaring voor specifieke toepassingen configureren. U kunt bijvoorbeeld een gebruikersstroom configureren waarvoor gebruikers zich moeten aanmelden of registreren met een telefoonnummer of 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 onder Gebruikende optie Toepassingen.

  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.

Voorbeeld-BEVEILIGD-WACHTWOORDVERIFICATIE klonen of downloaden

Als u de voorbeeld-SPA wilt ophalen, kunt u een van de volgende opties kiezen:

  • Kloon de opslagplaats met behulp van Git:

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

  • Het voorbeeld downloaden

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 terminalvenster in de hoofdmap van het voorbeeldproject en voer het volgende fragment in om naar de projectmap te navigeren:

        cd 1-Authentication\0-sign-in-vanillajs\App

  2. Installeer de projectafhankelijkheden:

        npm install

De voorbeeld-SPA configureren

  1. Open authConfig.js.
  2. Zoek Enter_the_Tenant_Name_Here en vervang deze door de naam van uw tenant.
  3. Zoek en vervang deze in InstantieEnter_the_Tenant_Subdomain_Here door het subdomein van uw tenant. Als het primaire domein van uw tenant bijvoorbeeld is caseyjensen@onmicrosoft.com, moet u casyjensen invoeren.
  4. Sla het bestand op.

Uw project uitvoeren en aanmelden

  1. Open een nieuwe terminal en voer de volgende opdracht uit om uw express-webserver te starten.

    npm start

  2. Open een webbrowser en ga naar http://localhost:3000/.

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

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

  5. De BEVEILIGD-WACHTWOORDVERIFICATIE geeft nu een knop met de tekst Profielgegevens aanvragen. Selecteer deze om profielgegevens weer te geven.

    Schermopname van aanmelden bij een vanilla JS SPA.

Afmelden bij de toepassing

  1. Als u zich wilt afmelden bij de toepassing, selecteert u Afmelden in de navigatiebalk.
  2. Er verschijnt een venster waarin wordt gevraagd bij welk account u zich moet afmelden.
  3. Wanneer u zich hebt afgemeld, verschijnt er een laatste venster waarin u wordt geadviseerd om alle browservensters te sluiten.

Volgende stappen

Selfservice voor wachtwoordherstel inschakelen