Delen via


Quickstart: Gebruikers aanmelden in een voorbeeld-desktop-app

In deze quickstart gebruikt u een voorbeeldtoepassing om te leren hoe u verificatie toevoegt aan een bureaubladtoepassing. Met de voorbeeldtoepassing kunnen gebruikers zich aanmelden en afmelden en de MSAL (Microsoft Authentication Library) gebruiken om verificatie af te handelen.

Voordat u begint, gebruikt u de Kies een tenanttype selector boven aan deze pagina om het tenanttype te selecteren. Microsoft Entra ID biedt twee tenantconfiguraties, werknemers en externe. Een tenantconfiguratie voor werknemers is bedoeld voor uw werknemers, interne apps en andere organisatieresources. Een externe tenant is bedoeld voor uw klantgerichte apps.

Voorwaarden

De web-app registreren

Voer de volgende stappen uit om uw toepassing te registreren en de registratiegegevens van de app handmatig toe te voegen aan uw oplossing:

  1. Meld u aan bij het Microsoft Entra-beheercentrum als ten minste een cloudtoepassingsbeheerder.
  2. Als u toegang hebt tot meerdere tenants, gebruikt u het pictogram Instellingen in het bovenste menu om over te schakelen naar de tenant waarin u de toepassing wilt registreren in het menu Mappen en abonnementen.
  3. Blader naar Identity>Applications>App-registraties en selecteer Nieuwe registratie.
  4. Voer een naam in voor uw toepassing, bijvoorbeeld msal-node-desktop. Gebruikers van uw app zien deze naam mogelijk en u kunt deze later wijzigen.
  5. Selecteer register om de toepassing te maken.
  6. Onder Beheer, selecteer Verificatie.
  7. Selecteer Een platform toevoegen>Mobiele en bureaubladtoepassingen.
  8. Voer in de sectie Omleidings-URI'shttp://localhostin.
  9. Selecteer Configureren.

Het voorbeeldproject downloaden

Het codevoorbeeld downloaden

Het project configureren

*Pak het project uit, open de map ms-identity-JavaScript-nodejs-desktop-main en open .authConfig.js bestand. Vervang de waarde als volgt:

Veranderlijk Beschrijving Voorbeeld(en)
Enter_the_Cloud_Instance_Id_Here De Azure-cloudinstantie waarin uw toepassing is geregistreerd https://login.microsoftonline.com/ (inclusief de afsluitende slash)
Enter_the_Tenant_Id_Here Tenant-ID of primair domein contoso.microsoft.com of aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Client-id van de toepassing die u hebt geregistreerd 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Redirect_Uri_Here Redirect-URI van de toepassing die u hebt geregistreerd msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
Enter_the_Graph_Endpoint_Here De Microsoft Graph API-cloudexemplaar die door uw app wordt aangeroepen. https://graph.microsoft.com/ (inclusief de afsluitende slash)

Uw bestand moet er ongeveer als volgt uitzien:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

De toepassing uitvoeren

  1. U moet de afhankelijkheden van dit voorbeeld eenmaal installeren:

    cd ms-identity-javascript-nodejs-desktop-main
    npm install
    
  2. Voer vervolgens de toepassing uit via de opdrachtprompt of console:

    npm start
    
  3. Selecteer 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 toepassing.

Volgende stappen

Zie de zelfstudie voor meer informatie over de ontwikkeling van Electron-desktop-apps met MSAL Node:

Voorwaarden

De bureaublad-app registreren

Als u wilt dat uw toepassing gebruikers kan aanmelden met Microsoft Entra, moet Microsoft Entra External ID op de hoogte zijn 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 Applicatie-ID (client-ID), 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 aan bij het Microsoft Entra-beheercentrum als ten minste een applicatieontwikkelaar.

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

  3. Blader naar Identity>Applications>App-registraties.

  4. Selecteer + Nieuwe registratie.

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

    1. Voer een zinvolle toepassing in Naam die wordt weergegeven aan gebruikers van de app, bijvoorbeeld ciam-client-app.
    2. Selecteer onder Ondersteunde accounttypenalleen Accounts in deze organisatiemap.
  6. Selecteer registreren.

  7. Het deelvenster Overzicht van de toepassing wordt weergegeven na een geslaagde registratie. Noteer de toepassings-ID (client) , zodat deze kan worden gebruikt in de broncode van uw toepassing.

Uw app-platform opgeven

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

  1. Onder beheren, selecteer verificatie.
  2. Selecteer op de pagina PlatformconfiguratiesEen platform toevoegenen selecteer vervolgens Mobiele en bureaubladtoepassingen optie.
  3. Voer http://localhostin voor de Aangepaste omleidings-URI's en selecteer vervolgens configureren.
  4. Selecteer om te configureren en uw wijzigingen op te slaan.

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 tenantbeheerder 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 pagina Overzicht te openen.

  2. Selecteer onder BeherenAPI-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 Externe ID-gebruikersstroombeheerder.

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

  3. Blader naar Identity>External Identities>User flows.

  4. Selecteer + Nieuwe gebruikersstroom.

  5. Op de -pagina maken:

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

    2. Selecteer e-mailaccountsin de lijst Identiteitsproviders. 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-mailaccountskunt u een van de twee opties selecteren. Selecteer voor deze zelfstudie 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 een e-mailadres als de aanmeldingsnaam en eenmalige wachtwoordcode per e-mail als hun eerste factorreferentie. Eenmalige wachtwoordcode voor e-mail moet zijn ingeschakeld op tenantniveau (Alle id-providers>eenmalige wachtwoordcode voor e-mail) om deze optie beschikbaar te maken op gebruikersstroomniveau.
    4. Kies onder gebruikerskenmerkende kenmerken die u wilt verzamelen van de gebruiker wanneer u zich aanmeldt. Als u Meerweergeven selecteert, kunt u kenmerken en claims kiezen voor land/regio, weergavenaamen 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 Gebruikersstromen lijst. Vernieuw de pagina indien nodig.

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

De bureaubladtoepassing 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 Identityin het zijbalkmenu.

  2. Selecteer externe identiteitenen gebruikersstromen.

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

  4. Onder Gebruik, selecteer 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 , selecteer.

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. Hiervoor gebruikt u de stappen in De gebruikersstroom voor registratie en aanmelding testen.

Het voorbeeldproject downloaden

Als u de voorbeeldcode van de bureaublad-app wilt ophalen, downloadt het .zip-bestand of kloont u de voorbeeldwebtoepassing vanuit 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 app-afhankelijkheden te installeren:

    npm install && npm update
    

De voorbeeldweb-app configureren

  1. Open App\authConfig.js 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 dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leer hoe u uw tenantgegevens kunt lezen.

De voorbeeldweb-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
    

    Schermopname van aanmelden bij een Electron-desktopapp.

  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 op de aanmeldingspagina van de browser 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.

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

    Schermopname van tokenclaims bekijken in een Electron-desktopapp.