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

Registrera webbappen

Följ dessa steg för att registrera ditt program och lägga till appens registreringsinformation i din lösning manuellt:

  1. Logga in på administrationscentret för Microsoft Entra som minst Molnprogramadministratör.
  2. Om du har åtkomst till flera klienter använder du ikonen Inställningar på den översta menyn för att växla till klientorganisationen där du vill registrera programmet från menyn Kataloger + prenumerationer.
  3. Bläddra till Identity>Applications>App registrations och välj Ny registrering.
  4. Ange ett namn för ditt program, till exempel msal-node-desktop. Användare av din app kan se det här namnet och du kan ändra det senare.
  5. Välj Registrera för att skapa programmet.
  6. Under Hanteraväljer du autentisering.
  7. Välj Lägg till en plattform>Mobila program och skrivbordsprogram.
  8. I avsnittet Omdirigerings-URI:er anger du http://localhost.
  9. Välj Konfigurera.

Ladda ned exempelprojektet

Ladda ned kodexemplet

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 Klientorganisations-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

Registrera skrivbordsappen

För att applikationen ska kunna logga in användare med Microsoft Entra måste Microsoft Entra External ID känna till applikationen du skapar. Appregistreringen upprättar en förtroenderelation mellan appen och Microsoft Entra. När du registrerar ett program genererar externt ID en unik identifierare som kallas ett program-ID (klient)-ID, ett värde som används för att identifiera din app när du skapar autentiseringsbegäranden.

Följande steg visar hur du registrerar din app i administrationscentret för Microsoft Entra:

  1. Logga in på administrationscentret för Microsoft Entra med rollen minst som Programutvecklare.

  2. Om du har åtkomst till flera klienter använder du ikonen Inställningar i toppmenyn för att växla till din externa klient från menyn Kataloger + prenumerationer.

  3. Bläddra till Identity>Applications>App registrations.

  4. Välj + Ny registrering.

  5. På sidan Registrera en ansökan som visas.

    1. Ange ett meningsfullt applikationsnamn som visas för användarna av appen, till exempel ciam-client-app.
    2. Under Kontotyper som stödsväljer du endast Konton i den här organisationskatalogen.

  6. Välj Registrera.

  7. Programmets översiktsfönster visas vid lyckad registrering. Registrera program-ID (klient)-ID:t som ska användas i programmets källkod.

Ange din appplattform

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 klientorganisationen är en extern klientorganisation kan kundanvändarena 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 Uppdateraoch kontrollera sedan att Beviljas för <ditt klientnamn> visas under Status för behörigheten.

Skapa ett användarflöde

Följ de här stegen för att skapa ett användarflöde som en kund kan använda för att logga in eller registrera sig för ett program.

  1. Logga in på administrationscentret för Microsoft Entra som minst en administratör för externt ID-användarflöde.

  2. Om du har åtkomst till flera hyresgäster använder du ikonen Inställningar i den översta menyn för att växla till din externa hyresgäst från menyn Kataloger + prenumerationer.

  3. Bläddra till Identitet>Externa identiteter>Användarflöden.

  4. Välj + Nytt användarflöde.

  5. På sidan Skapa:

    1. Ange ett Namn för användarflödet, till exempel SignInSignUpSample.

    2. I listan identitetsleverantörer väljer du E-postkonton. Med den här identitetsprovidern kan användare logga in eller registrera sig med sin e-postadress.

      Not

      Ytterligare identitetsprovidrar visas endast här när du har konfigurerat federation med dem. Om du till exempel konfigurerar federation med Google, Facebook, Apple eller en OIDC-identitetsproviderkan du välja dessa ytterligare identitetsprovidrar här.

    3. Under e-postkontonkan du välja något av de två alternativen. I den här självstudien väljer du e-post med lösenord.

      • e-post med lösenord: Tillåter att nya användare registrerar sig och loggar in med en e-postadress som inloggningsnamn och ett lösenord som sin första faktorautentiseringsuppgifter.
      • E-post engångslösenord: Tillåter att nya användare registrerar sig och loggar in med en e-postadress som inloggningsnamn och e-postlösenord som första faktorautentiseringsuppgifter. Engångslösenord för e-post måste vara aktiverat på klientnivå (Alla identitetsprovidrar>e-post engångslösenord) för att det här alternativet ska vara tillgängligt på användarflödesnivå.

    4. Under Användarattributväljer du de attribut som du vill samla in från användaren vid registreringen. Genom att välja Visa flerkan du välja attribut och anspråk för land/region, visningsnamnoch postnummer. Välj OK. (Användare uppmanas endast att ange attribut när de registrerar sig för första gången.)

  6. Välj Skapa. Det nya användarflödet visas i listan Användarflöden. Uppdatera sidan om det behövs.

För att aktivera självbetjänad lösenordsåterställning, använd stegen i artikeln Aktivera självbetjänad lösenordsåterställning.

Associera skrivbordsprogrammet med användarflödet

För att kundanvändarna ska kunna se registrerings- eller inloggningsupplevelsen när de använder din app måste du associera appen med ett användarflöde. Även om många program kan associeras med ditt användarflöde kan ett enda program bara associeras med ett användarflöde.

  1. På sidomenyn väljer du Identitet.

  2. Välj externa identiteteroch sedan Användarflöden.

  3. På sidan Användarflöden väljer du Användarnamn för användarflöde du skapade tidigare, till exempel SignInSignUpSample.

  4. Under Använd, välj Applikationer.

  5. Välj Lägg till program.

  6. Välj programmet i listan, till exempel ciam-client-app eller använd sökrutan för att hitta programmet och välj det sedan.

  7. Välj Välj.

När du har associerat din app med ett användarflöde kan du testa användarflödet genom att simulera en användares registrering eller inloggning med ditt program från administrationscentret för Microsoft Entra. Det gör du genom att använda stegen i Testa ditt registrerings- och inloggningsanvändarflöde.

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