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
- Een Azure-account met een actief abonnement. Als u nog geen account hebt, maak gratis een account aan.
- Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
- Toepassingsbeheerder
- Toepassingsontwikkelaar
- Cloudtoepassingsbeheerder
- Een personeelstenant. U kunt uw standaarddirectory gebruiken of een nieuwe tenant aanmaken.
- Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
- naam: msal-node-desktop
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Node.js Electron
- Windows Presentation Foundation (WPF)
- Node.js
- Visual Studio Code of een andere code-editor
Een omleidings-URI toevoegen
U moet een omleidings-URI toevoegen aan uw app-registratie. Deze URI wordt gebruikt om gebruikers om te leiden naar de app nadat ze zich hebben aangemeld.
Voer de volgende stappen uit om het app-type op te geven en omleidings-URI's naar uw app-registratie op te geven:
- Node.js Electron
- Windows Presentation Foundation (WPF)
- Selecteer op de Overzichtspagina van uw geregistreerde toepassing, in de sectie Beheren, Verificatie.
- Selecteer op de pagina PlatformconfiguratiesEen platform toevoegen>Mobiele en bureaubladtoepassingen.
- Voer in de sectie Omleidings-URI's
http://localhost
in. - Selecteer Configureren.
Het voorbeeldproject downloaden
- Node.js Electron
- Windows Presentation Foundation (WPF)
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-javascript-nodejs-desktop.git
download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.
Het project configureren
- Node.js Electron
- Windows Presentation Foundation (WPF)
*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
- Node.js Electron
- Windows Presentation Foundation (WPF)
U moet de afhankelijkheden van dit voorbeeld eenmaal installeren:
cd ms-identity-javascript-nodejs-desktop-main npm install
Voer vervolgens de toepassing uit via de opdrachtprompt of console:
npm start
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 stap
- Node.js Electron
- Windows Presentation Foundation (WPF)
Zie de zelfstudie voor meer informatie over de ontwikkeling van Electron-desktop-apps met MSAL Node:
Voorwaarden
- Een Azure-account met een actief abonnement. Als u nog geen account hebt, maak gratis een account aan.
- Dit Azure-account moet machtigingen hebben voor het beheren van toepassingen. Een van de volgende Microsoft Entra-rollen omvat de vereiste machtigingen:
- Toepassingsbeheerder
- Toepassingsontwikkelaar
- Cloudtoepassingsbeheerder
- Een externe tenant. Kies een van de volgende methoden om er een te maken:
- (Aanbevolen) Gebruik de externe id-extensie van Microsoft Entra om rechtstreeks in Visual Studio Code een externe tenant in te stellen
- een nieuwe externe tenant maken in het Microsoft Entra-beheercentrum
- Een gebruikersstroom. Voor meer informatie, raadpleeg om zelfregistratie gebruikersstromen te maken voor apps in externe tenants. Deze gebruikersstroom kan worden gebruikt voor meerdere toepassingen.
- Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
- Naam: ciam-desktop-app
- Ondersteunde accounttypen: accounts in deze organisatiemap (alleen één tenant)
- Uw toepassing toevoegen aan de gebruikersstroom
- Node.js
- Visual Studio Code of een andere code-editor*
Een omleidings-URI toevoegen
U moet een omleidings-URI toevoegen aan uw app-registratie. Deze URI wordt gebruikt om gebruikers om te leiden naar de app nadat ze zich hebben aangemeld.
Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:
- Onder Beheer, selecteer Verificatie.
- Selecteer op de pagina PlatformconfiguratiesEen platform toevoegenen selecteer vervolgens Mobiele en bureaubladtoepassingen optie.
- Voer in voor de
http://localhost
en selecteer vervolgens configureren. - Selecteer om te configureren en 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 tenantbeheerder moet toestemming geven voor deze machtiging namens alle gebruikers in de tenant:
Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals ciam-client-app) om de pagina Overzicht te openen.
Selecteer onder BeherenAPI-machtigingen.
- Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam> en selecteer vervolgens Ja.
- Selecteer Vernieuwen, en controleer of Verleend voor <uw tenantnaam> wordt weergegeven onder Status voor de machtiging.
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
Open een consolevenster en ga naar de map met de Electron-voorbeeld-app:
cd 1-Authentication\3-sign-in-electron\App
Voer de volgende opdrachten uit om app-afhankelijkheden te installeren:
npm install && npm update
De voorbeeldweb-app configureren
Open
App\authConfig.js
bestand in de code-editor.Zoek de plaatsaanduiding:
Enter_the_Application_Id_Here
en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.Enter_the_Tenant_Subdomain_Here
en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld iscontoso.onmicrosoft.com
, gebruikt ucontoso
. 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:
Voer in de terminal de volgende opdracht uit:
npm start
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.
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.
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.