Dela via

Snabbstart: Logga in användare i en skrivbordsappexempel

  • Artikel

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 klient är 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
    • Molnprogramadministratör
  • En hyresgäst för arbetskraft. Du kan använda din standardkatalog eller konfigurera en ny klientorganisation.
  • Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration. Mer information finns i Registrera ett program.
    • Namn: msal-node-desktop
    • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)

Lägga till en omdirigerings-URI

Du måste lägga till en omdirigerings-URI i din appregistrering. Den här URI:n används för att omdirigera användare till appen när de har loggat in.

Så här anger du apptypen och omdirigerar URI:er till din appregistrering:

  1. På sidan Översikt i ditt registrerade program går du till Hanteraoch välj Autentisering.
  2. På sidan Platform-konfigurationerväljer du Lägg till en plattform>mobil- och skrivbordsprogram.
  3. I avsnittet omdirigerings-URI:eranger du http://localhost.
  4. Välj Konfigurera.

Ladda ned exempelprojektet

  • 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 filsökväg där längden på namnet är kortare än 260 tecken.

Konfigurera projektet

*Extrahera projektet, öppna mappen ms-identity-JavaScript-nodejs-desktop-main och öppna sedan .authConfig.js fil. 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_Id_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_Redirect_Uri_Here Omdirigerings-URI för det program som du registrerade msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
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

  • 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
    • Molnprogramadministratör

Lägga till en omdirigerings-URI

Du måste lägga till en omdirigerings-URI i din appregistrering. Den här URI:n används för att omdirigera användare till appen när de har loggat in.

Följ dessa steg om du vill ange din apptyp för din appregistrering:

  1. Under Hanteraväljer du autentisering.
  2. På sidan Platform-konfigurationer väljer du Lägg till en plattformoch väljer sedan alternativ för mobil- och skrivbordsprogram.
  3. För anpassade omdirigerings-URI:er anger duhttp://localhostoch väljer sedan Konfigurera.
  4. Välj Konfigurera för att spara ändringarna.

När du har registrerat ditt program tilldelas det behörigheten User.Read. Men eftersom hyresgästen är en extern hyresgäst kan kundenanvändarna själva inte samtycka till den här behörigheten. Du som klientadministratör måste godkänna den här behörigheten för alla användare i klientorganisationen:

  1. På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt.

  2. Under Hanteraväljer du API-behörigheter.

    1. Välj Bevilja administratörsmedgivande för <ditt klientnamn>och välj sedan Ja.
    2. Välj Uppdatera, och kontrollera sedan att Beviljas för <ditt klientnamn> visas under Status för behörigheten.

Ladda ned exempelprojektet

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 den med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du få reda på hur du läser klientinformationen.

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