Dela via

Självstudie: Konfigurera en Node.js webbapp för att logga in användare med hjälp av Microsofts identitetsplattform

  • Artikel

Gäller för: grön cirkel med vit bock. Workforce-hyresgäster grön cirkel med vit bock. externa hyresgäster (läs mer)

I den här självstudien får du lära dig hur du skapar en Node/Express.js-webbapp som loggar in användare i en kundorienterad app i en extern klientorganisation eller anställda i en personalorganisation. Vägledningen visar också hur du hämtar en åtkomsttoken för att anropa Microsoft Graph API.

Den här självstudien är del 1 i en serie i tre delar.

I den här guiden kommer du att

  • Konfigurera ett Node.js projekt
  • Installera beroenden
  • Lägga till appvyer och gränssnittskomponenter

Förutsättningar

Skapa Node.js-projektet

  1. På en valfri plats på datorn skapar du en mapp som är värd för nodprogrammet, till exempel ciam-sign-in-node-express-web-app.

  2. I terminalen ändrar du katalogen till nodwebbappmappen, till exempel cd ciam-sign-in-node-express-web-appoch kör sedan följande kommando för att skapa ett nytt Node.js projekt:

    npm init -y

    Kommandot init -y skapar en standardfil för package.json för ditt Node.js projekt.

  3. Skapa ytterligare mappar och filer för att uppnå följande projektstruktur:

        ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

Installera appberoenden

Om du vill installera nödvändiga identitets- och Node.js relaterade npm-paket kör du följande kommando i terminalen

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

Skapa appgränssnittskomponenter

  1. Öppna vyer/index.hbs fil i kodredigeraren och lägg sedan till följande kod:

        <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

    I den här vyn, om användaren autentiseras, visar vi deras användarnamn och länkar för att besöka /auth/signout och /users/id slutpunkter, annars måste användaren besöka /auth/signin slutpunkten för att logga in. Vi definierar expressvägarna för dessa slutpunkter senare i den här artikeln.

  2. I kodredigeraren öppnar du views/id.hbs fil och lägger sedan till följande kod:

        <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

    Vi använder den här vyn för att visa ID-tokenkrav som Microsoft Entra External ID returnerar till den här appen när en användare loggat in framgångsrikt.

  3. I kodredigeraren öppnar du views/error.hbs-filen och lägger sedan till följande kod:

        <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>

    Vi använder den här vyn för att visa eventuella fel som inträffar när appen körs.

  4. I kodredigeraren öppnar du views/layout.hbs fil och lägger sedan till följande kod:

        <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{content}}}
        </body>        
    </html>

    Den layout.hbs filen finns i layoutfilen. Den innehåller HTML-koden som vi behöver i hela programvyn.

  5. Öppna public/stylesheets/style.cssi kodredigeraren och lägg sedan till följande kod:

        body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

Nästa steg

Självstudie: Lägg till inloggning i din Node/Express.js-webbapp.