Kurz: Příprava webové aplikace Node.js na ověřování

Článek
04/11/2024

Tento kurz je druhou částí série, která ukazuje vytvoření webové aplikace Node.js a přípravu na ověření pomocí Centra pro správu Microsoft Entra. V první části této série jste zaregistrovali aplikaci a nakonfigurovali toky uživatelů ve vašem externím tenantovi. V tomto kurzu vytvoříte projekt Node.js(Express) a uspořádáte všechny požadované složky a soubory. Povolíte přihlášení k aplikaci, kterou tady připravíte. Zobrazení této webové aplikace Node.js(Express) používají úchyty.

V tomto kurzu budete;

Vytvoření projektu Node.js
Instalace závislostí
Přidání zobrazení aplikací a komponent uživatelského rozhraní

Požadavky

Kurz: Příprava externího tenanta na přihlášení uživatelů ve webové aplikaci Node.js
I když je možné použít jakékoli integrované vývojové prostředí (IDE), které podporuje aplikace React, tento kurz používá Visual Studio Code.
Node.js.
Visual Studio Code nebo jiný editor kódu

Vytvoření projektu Node.js

V libovolném umístění v počítači vytvořte složku pro hostování aplikace uzlu, například ciam-sign-in-node-express-web-app.
V terminálu změňte adresář do složky webové aplikace Node, například cd ciam-sign-in-node-express-web-appspuštěním následujícího příkazu vytvořte nový projekt Node.js:
```
npm init -y
```
Příkaz init -y vytvoří výchozí soubor package.json pro váš projekt Node.js.

Vytvořte další složky a soubory, abyste dosáhli následující struktury projektu:

    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

Instalace závislostí aplikací

Pokud chcete nainstalovat požadovanou identitu a Node.js související balíčky npm, spusťte v terminálu následující příkaz.

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

Sestavení komponent uživatelského rozhraní aplikace

V editoru kódu otevřete soubor views/index.hbs a přidejte následující kód:
```
    <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}}
```
V tomto zobrazení, pokud je uživatel ověřený, zobrazíme jeho uživatelské jméno a odkazy na návštěvu /auth/signout a /users/id koncové body, jinak musí uživatel navštívit /auth/signin koncový bod pro přihlášení. Expressroute trasy pro tyto koncové body definujeme dále v tomto článku.

V editoru kódu otevřete soubor views/id.hbs a přidejte následující kód:

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

Toto zobrazení používáme k zobrazení deklarací identity tokenů ID, které Microsoft Entra Externí ID se vrátí do této aplikace po úspěšném přihlášení uživatele.

V editoru kódu otevřete soubor views/error.hbs a přidejte následující kód:
```
    <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>
```
Toto zobrazení používáme k zobrazení všech chyb, ke kterým dochází při spuštění aplikace.

V editoru kódu otevřete soubor views/layout.hbs a přidejte následující kód:

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

Soubor layout.hbs je v souboru rozložení. Obsahuje kód HTML, který vyžadujeme v celém zobrazení aplikace.

V editoru kódu otevřete veřejné šablony/stylesheets/style.css, soubor a přidejte následující kód:

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

    a {
      color: #00B7FF;
    }

Další krok

Část 3: Přidání přihlášení a odhlášení do webové aplikace Node.js

Share via