Dela via

Snabbstart: Logga in användare i en skrivbordsappexempel

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för personalklienter.Personalklienter Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. Externa klienter (läs mer)

I den här snabbstarten använder du ett exempelprogram för att lära dig hur du lägger till autentisering i ett skrivbordsprogram. Exempelprogrammet gör det möjligt för användare att logga in och logga ut och använder Microsoft Authentication Library (MSAL) för att hantera autentisering.

Innan du börjar använder du Välj hyrestagartyp urvalselementet överst på den här sidan för att välja hyrestagartyp. Microsoft Entra ID tillhandahåller två klientkonfigurationer, personal och externa. En klientkonfiguration för personal är avsedd för dina anställda, interna appar och andra organisationsresurser. En extern hyresgäst är avsedd för dina kundinriktade appar.

Förutsättningar

  • Ett Azure-konto med en aktiv prenumeration. Om du inte redan har ett Skapa ett konto kostnadsfritt.
  • Det här Azure-kontot måste ha behörighet att hantera program. Någon av följande Microsoft Entra-roller innehåller de behörigheter som krävs:
    • Appadministratör
    • Programutvecklare
  • En hyresgäst för arbetskraft. Du kan använda din standardkatalog eller konfigurera en ny hyresgäst.
  • Registrera en ny app i administrationscentret för Microsoft Entra, som endast konfigurerats för konton i den här organisationskatalogen. Mer information finns i Registrera ett program . Registrera följande värden från programöversiktssidan för senare användning:
    • App-ID (klient-ID)
    • Katalog-ID (hyresgäst)

Ladda ned exempelprojektet

Anmärkning

Elektronexemplet i den här självstudien är särskilt utformat för att fungera med MSAL-noden. MSAL-browser stöds inte i Electron-program. Se till att du slutför följande steg för att konfigurera projektet korrekt.

  • Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • Ladda ned filen .zip. Extrahera den till en filväg där namnets längd är mindre än 260 tecken.

Konfigurera projektet

Öppna filen ms-identity-javascript-nodejs-desktop-main/App/authConfig.jsi kodredigeraren. Ersätt värdet enligt följande:

Variabel Beskrivning Exempel
Enter_the_Cloud_Instance_Id_Here Azure-molninstansen där ditt program är registrerat https://login.microsoftonline.com/ (inkludera avslutande snedstreck)
Enter_the_Tenant_Info_Here Hyresgäst-ID eller primär domän contoso.microsoft.com eller aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Klient-ID för det program som du registrerade 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Graph_Endpoint_Here Microsoft Graph API-molninstansen som appen anropar https://graph.microsoft.com/ (inkludera avslutande snedstreck)

Filen bör se ut ungefär så här:

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,
 };

Kör programmet

  1. Du måste installera beroendena för det här exemplet en gång:

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Kör sedan programmet via kommandotolken eller konsolen:

    npm start

  3. Välj Logga in för att starta inloggningsprocessen.

    Första gången du loggar in uppmanas du att ge ditt medgivande så att programmet kan logga in dig och komma åt din profil. När du har loggat in omdirigeras du tillbaka till programmet.

Nästa steg

Mer information om utveckling av Elektron-skrivbordsappar med MSAL Node finns i självstudien:

Självstudie: Logga in användare och anropa Microsoft Graph API i en Electron-skrivbordsapp

Förutsättningar

Ladda ned exempelprojektet

Anmärkning

Elektronexemplet i den här självstudien är särskilt utformat för att fungera med MSAL-noden. MSAL-browser stöds inte i Electron-program. Se till att du slutför följande steg för att konfigurera projektet korrekt.

Om du vill hämta exempelkoden för skrivbordsappen ladda ned .zip-filen eller klona exempelwebbprogrammet från GitHub genom att köra följande kommando:

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

Om du väljer att ladda ned filen .zip extraherar du exempelappfilen till en mapp där sökvägens totala längd är 260 eller färre tecken.

Installera projektets beroenden

  1. Öppna ett konsolfönster och ändra till katalogen som innehåller Electron-exempelappen:

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

  2. Kör följande kommandon för att installera appberoenden:

    npm install && npm update

Konfigurera exempelwebbappen

  1. Öppna App\authConfig.js fil i kodredigeraren.

  2. Hitta platshållaren:

    1. Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för den app som du registrerade tidigare.

    2. Enter_the_Tenant_Subdomain_Here och ersätt det med underdomänen Directory (tenant). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har namnet på din hyresgäst, lär hur du kan läsa detaljerna om din hyresgäst.

Köra och testa exempelwebbappen

Nu kan du testa electron desktop-exempelappen. När du har kört appen visas fönstret för skrivbordsappen automatiskt:

  1. Kör följande kommando i terminalen:

    npm start

    Skärmbild av inloggning i en elektronskrivbordsapp.

  2. I skrivbordsfönstret som visas väljer du knappen Logga in eller Registrera dig. Ett webbläsarfönster öppnas och du uppmanas att logga in.

  3. På inloggningssidan för webbläsaren skriver du din e-postadress, väljer Nästa, skriver in ditt lösenordoch väljer sedan Logga in. Om du inte har något konto väljer du Inget konto? Skapa en länk som startar registreringsflödet.

  4. Om du väljer registreringsalternativet slutför du hela registreringsflödet när du har fyllt i din e-post, engångslösenord, nya lösenord och mer kontoinformation. Du ser en sida som liknar följande skärmbild. Du ser en liknande sida om du väljer inloggningsalternativet. Sidan visar token-ID-påståenden.

    Skärmbild av visningstokenanspråk i en elektronapp.

Relaterat innehåll