Share via

Logga in användare i ett exempel Angular ensidesprogram

  • Artikel

Den här guiden använder ett exempel på Angular ensidesprogram (SPA) för att visa hur du lägger till autentiseringsanvändare i ett SPA. MED SPA kan användarna logga in och logga ut med hjälp av din Microsoft Entra External ID för kunders klientorganisation. Exemplet använder Microsoft Authentication Library för JavaScript (MSAL.js) för att hantera autentisering.

Förutsättningar

Registrera spa-avdelningen i administrationscentret för Microsoft Entra

För att programmet ska kunna logga in användare med Microsoft Entra måste Microsoft Entra-ID för kunder göras medvetet om det program som 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 Microsoft Entra administrationscenter:

  1. Logga in på Microsoft Entra administrationscenter som minst en programutvecklare.

  2. Om du har åtkomst till flera klienter använder du filtret Kataloger + prenumerationer på den översta menyn för att växla till din kundklientorganisation.

  3. Bläddra till Identitetsprogram>>Appregistreringar.

  4. Välj + Ny registrering.

  5. På sidan Registrera ett program som visas;

    1. Ange ett beskrivande programnamn som visas för appens användare, till exempel ciam-client-app.
    2. Under Kontotyper som stöds väljer du Endast konton i den här organisationskatalogen.

  6. Välj Register (Registrera).

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

Följ dessa steg för att ange din apptyp för din appregistrering:

  1. Under Hantera väljer du Autentisering
  2. På sidan Plattformskonfigurationer väljer du Lägg till en plattform och väljer sedan alternativet Enkelsidigt program .
  3. För omdirigerings-URI:er anger du http://localhost:4200/.
  4. Under Utloggnings-URL för frontkanal anger du http://localhost:4200/auth.
  5. Välj Spara för att spara ändringarna.

Bevilja API-behörigheter

  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 Hantera väljer du API-behörigheter.

  3. Under Konfigurerade behörigheter väljer du Lägg till en behörighet.

  4. Välj fliken Microsoft API:er .

  5. Under Avsnittet Vanliga Microsoft-API:er väljer du Microsoft Graph.

  6. Välj alternativet Delegerade behörigheter .

  7. Under Avsnittet Välj behörigheter söker du efter och väljer både openid - och offline_access behörigheter.

  8. Välj knappen Lägg till behörigheter .

  9. Nu har du tilldelat behörigheterna korrekt. Men eftersom klientorganisationen är en kunds klientorganisation kan konsumentanvändarena själva inte godkänna dessa behörigheter. Du som administratör måste godkänna dessa behörigheter för alla användare i klientorganisationen:

    1. Välj Bevilja administratörsmedgivande för <ditt klientnamn> och välj sedan Ja.
    2. Välj Uppdatera och kontrollera sedan att Beviljat för <ditt klientnamn> visas under Status för båda omfången.

Skapa ett användarflöde

Följ dessa steg 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å Microsoft Entra administrationscenter som minst ett externt ID-användarflödesadministratör.

  2. Om du har åtkomst till flera klienter använder du filtret Kataloger + prenumerationer på den översta menyn för att växla till din kundklientorganisation.

  3. Bläddra tillAnvändarflöden för identitets>externa identiteter>.

  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 Identitetsprovidrar väljer du Email-konton. Med den här identitetsprovidern kan användare logga in eller registrera sig med sin e-postadress.

      Anteckning

      Ytterligare identitetsprovidrar visas endast här när du har konfigurerat federation med dem. Om du till exempel konfigurerar federation med Google eller Facebook kan du välja dessa ytterligare identitetsprovidrar här.

    3. Under Email konton kan du välja ett av de två alternativen. I den här självstudien väljer du Email med lösenord.

      • Email med lösenord: Tillåter nya användare att registrera sig och logga in med en e-postadress som inloggningsnamn och lösenord som första faktorautentiseringsuppgifter.

      • Email engångslösenord: Låter nya användare registrera sig och logga in med en e-postadress som inloggningsnamn och e-post engångslösenord som sin första faktorautentiseringsuppgift.

        Anteckning

        Email engångslösenord måste aktiveras på klientorganisationsnivå (alla identitetsprovidrar>Email engångslösenord) för att det här alternativet ska vara tillgängligt på användarflödesnivå.

    4. Under Användarattribut väljer du de attribut som du vill samla in från användaren vid registrering. Genom att välja Visa mer kan du välja attribut och anspråk för land/region, visningsnamn och 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.

Om du vill aktivera självbetjäning av lösenordsåterställning använder du stegen i artikeln Aktivera självbetjäning av lösenordsåterställning .

Associera SPA med användarflödet

Även om många program kan associeras med ditt användarflöde kan ett enda program bara associeras med ett användarflöde. Ett användarflöde tillåter konfiguration av användarupplevelsen för specifika program. Du kan till exempel konfigurera ett användarflöde som kräver att användarna loggar in eller registrerar sig med ett telefonnummer eller en e-postadress.

  1. På sidomenyn väljer du Identitet.

  2. Välj Externa identiteter och sedan Användarflöden.

  3. På sidan Användarflöden väljer du det användarflödesnamn som du skapade tidigare, till exempel SignInSignUpSample.

  4. Under Använd väljer du Program.

  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.

  7. Välj Välj.

Klona eller ladda ned exempel-SPA

Om du vill hämta spa-exemplet kan du välja något av följande alternativ:

  • Klona lagringsplatsen med Git:

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

  • Ladda ned exemplet

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

Installera projektberoenden

  1. Öppna ett terminalfönster i rotkatalogen för exempelprojektet och ange följande kodfragment för att navigera till projektmappen:

    cd 1-Authentication\2-sign-in-angular\SPA

  2. Installera projektberoendena:

    npm install

Konfigurera spaexemplet

  1. Öppna SPA\src\authConfig.js och ersätt följande med de värden som hämtas från Microsoft Entra administrationscenter
    • clientId - Identifieraren för programmet, även kallad klienten. Ersätt Enter_the_Application_Id_Here med det program-ID-värde (klient) som registrerades tidigare från översiktssidan för det registrerade programmet.
    • authority – Identitetsproviderinstansen och inloggningspubliken för appen. Ersätt Enter_the_Tenant_Name_Here med namnet på din CIAM-klientorganisation.
    • Klientorganisations-ID:t är identifieraren för den klientorganisation där programmet är registrerat. _Enter_the_Tenant_Info_Here Ersätt med värdet katalog-ID (klientorganisation) som registrerades tidigare från översiktssidan för det registrerade programmet.
  2. Spara filen.

Kör projektet och logga in

Alla nödvändiga kodfragment har lagts till, så programmet kan nu anropas och testas i en webbläsare.

  1. Öppna en ny terminal genom att välja Terminal>Ny terminal.

  2. Kör följande kommando för att starta webbservern.

    cd 1-Authentication\2-sign-in-angular\SPA
npm start

  3. Öppna en webbläsare och gå till http://localhost:4200/.

  4. Logga in med ett konto som är registrerat på Microsoft Entra-ID:t för kunders klientorganisation.

  5. När du har loggat in visas visningsnamnet bredvid knappen Logga ut .

Nästa steg

Lär dig hur du använder Microsoft Authentication Library (MSAL) för JavaScript för att logga in användare och hämta token för att anropa Microsoft Graph.