Dela via

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

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