Megosztás a következőn keresztül:

Oktatóanyag: Node.js webalkalmazás beállítása a felhasználók microsoftos identitásplatform használatával történő bejelentkezéséhez

A következőkre vonatkozik: Zöld kör fehér pipa szimbólummal, amely a következő tartalmat jelzi a munkaerő-bérlőkre. A munkaerő-bérlők zöld körrel, fehér pipa jellel, amely a következő tartalmat jelzi a külső bérlőkre. Külső bérlők (további információ)

Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre olyan Node/Express.js webalkalmazást, amely bejelentkezik a felhasználókkal egy külső bérlő vagy egy munkaerő-bérlő alkalmazottai által használt ügyféloldali alkalmazásba. Az oktatóanyag azt is bemutatja, hogyan szerezhet be hozzáférési jogkivonatot a Microsoft Graph API meghívásához.

Ez az oktatóanyag egy 3 részes sorozat 1. része.

Ebben az oktatóanyagban meg fogja;

  • Node.js projekt beállítása
  • Függőségek telepítése
  • Alkalmazásnézetek és felhasználói felületi összetevők hozzáadása

Előfeltételek

  • Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
    • Alkalmazás (ügyfél) azonosítója
    • Címtár (ügyfél) azonosítója
  • Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
    • Átirányítási URI: http://localhost:3000/auth/redirect
    • előtérbeli kijelentkezés URL-címe: https://localhost:5001/signout-callback-oidc
  • Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.

A Node.js projekt létrehozása

  1. A számítógépen egy tetszőleges helyen hozzon létre egy mappát a csomópontalkalmazás üzemeltetéséhez, például ciam-sign-in-node-express-web-app.

  2. A terminálban módosítsa a címtárat a Node webalkalmazás mappájába(például cd ciam-sign-in-node-express-web-app), majd futtassa a következő parancsot egy új Node.js projekt létrehozásához:

    npm init -y

    A init -y parancs létrehoz egy alapértelmezett package.json fájlt a Node.js projekthez.

  3. Hozzon létre további mappákat és fájlokat a következő projektstruktúra eléréséhez:

        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

Alkalmazásfüggőségek telepítése

A szükséges identitások és Node.js kapcsolódó npm-csomagok telepítéséhez futtassa a következő parancsot a terminálban

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

Alkalmazás felhasználói felületének összetevőinek létrehozása

  1. A kódszerkesztőben nyissa meg views/index.hbs fájlt, majd adja hozzá a következő kódot:

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

    Ebben a nézetben, ha a felhasználó hitelesítése megtörtént, megjelenítjük a felhasználónevet és a hivatkozásokat a /auth/signout és /users/id végpontok felkereséséhez, ellenkező esetben a felhasználónak meg kell látogatnia a /auth/signin végpontot a bejelentkezéshez. A jelen cikk későbbi részében definiáljuk ezeknek a végpontoknak az expressz útvonalait.

  2. A kódszerkesztőben nyissa meg views/id.hbs fájlt, majd adja hozzá a következő kódot:

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

    Ezt a nézetet arra használjuk, hogy megjelenítsük azokat az azonosítójogkivonat-jogcímeket, amelyeket a Microsoft Entra External ID visszaad az alkalmazásnak, miután egy felhasználó sikeresen bejelentkezett.

  3. A kódszerkesztőben nyissa meg views/error.hbs fájlt, majd adja hozzá a következő kódot:

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

    Ez a nézet az alkalmazás futtatásakor előforduló hibák megjelenítésére használható.

  4. A kódszerkesztőben nyissa meg views/layout.hbs fájlt, majd adja hozzá a következő kódot:

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

    A layout.hbs fájl az elrendezésfájlban található. Az alkalmazásnézethez szükséges HTML-kódot tartalmazza.

  5. A kódszerkesztőben nyissa meg nyilvános/stíluslapok/style.cssfájlt, majd adja hozzá a következő kódot:

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

    a {
      color: #00B7FF;
    }

Következő lépés

oktatóanyag: Bejelentkezés hozzáadása a Node/Express.js webalkalmazás.

  • Last updated on