Udostępnij przez

Samouczek: konfigurowanie aplikacji internetowej Node.js do logowania użytkowników przy użyciu platformy tożsamości firmy Microsoft

Dotyczy: Zielony okrąg z białym symbolem znaku wyboru. Najemcy usługi Workforce Zielony okrąg z białym symbolem znaku wyboru. Najemcy zewnętrzni (dowiedzieć się więcej)

Z tego samouczka dowiesz się, jak utworzyć aplikację internetową Node/Express.js, która loguje użytkowników do aplikacji przeznaczonej dla klientów w zewnętrznej dzierżawie lub dla pracowników w dzierżawie pracowniczej. W tym samouczku pokazano również, jak uzyskać token dostępu do wywoływania interfejsu API programu Microsoft Graph.

Ten samouczek jest częścią 1 z 3-częściowej serii.

W tym samouczku nauczysz się:

  • Konfigurowanie projektu Node.js
  • Instalowanie zależności
  • Dodawanie widoków aplikacji i składników interfejsu użytkownika

Warunki wstępne

  • Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
    • Identyfikator aplikacji (klienta)
    • Identyfikator katalogu (klienta)
  • Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
    • URI przekierowania: http://localhost:3000/auth/redirect
    • adres URL wylogowania front-channel : https://localhost:5001/signout-callback-oidc
  • Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.
  • Node.js.
  • programu Visual Studio Code lub innego edytora kodu.

Tworzenie projektu Node.js

  1. W wybranej lokalizacji na komputerze utwórz folder do przechowywania aplikacji Node.js, na przykład ciam-sign-in-node-express-web-app.

  2. W terminalu zmień katalog na folder aplikacji internetowej Node, taki jak cd ciam-sign-in-node-express-web-app, a następnie uruchom następujące polecenie, aby utworzyć nowy projekt Node.js:

    npm init -y

    Polecenie init -y tworzy domyślny plik package.json dla projektu Node.js.

  3. Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę 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

Instalowanie zależności aplikacji

Aby zainstalować wymagane pakiety tożsamości i związane z Node.js pakiety npm, uruchom następujące polecenie w terminalu

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

Kompilowanie składników interfejsu użytkownika aplikacji

  1. W edytorze kodu otwórz plik views/index.hbs, a następnie dodaj następujący 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}}

    W tym widoku, jeśli użytkownik jest uwierzytelniony, wyświetlamy ich nazwę użytkownika i linki do odwiedzenia /auth/signout i /users/id punktów końcowych, w przeciwnym razie użytkownik musi odwiedzić punkt końcowy /auth/signin, aby się zalogować. W dalszej części tego artykułu zdefiniujemy trasy ekspresowe dla tych punktów końcowych.

  2. W edytorze kodu otwórz plik views/id.hbs, a następnie dodaj następujący 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>

    Ten widok służy do wyświetlania roszczeń tokenu identyfikacyjnego, które zwraca Microsoft Entra External ID do tej aplikacji po pomyślnym zalogowaniu użytkownika.

  3. W edytorze kodu otwórz plik views/error.hbs, a następnie dodaj następujący kod:

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

    Ten widok służy do wyświetlania wszelkich błędów występujących podczas uruchamiania aplikacji.

  4. W edytorze kodu otwórz plik views/layout.hbs, a następnie dodaj następujący kod:

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

    Plik layout.hbs znajduje się w pliku układu. Zawiera on kod HTML, którego potrzebujemy w całym widoku aplikacji.

  5. W edytorze kodu otwórz plik public/stylesheets/style.css, a następnie dodaj następujący kod:

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

    a {
      color: #00B7FF;
    }

Następny krok

Samouczek: dodawanie logowania do środowiska Node/Express.js aplikacji internetowej.

  • Last updated on