Bagikan melalui

Tutorial: Membuat aplikasi web Node.js untuk memasukkan pengguna

  • Artikel

Tutorial ini adalah bagian 2 dari seri yang menunjukkan pembuatan aplikasi web Node.js dan menyiapkannya untuk autentikasi menggunakan pusat admin Microsoft Entra. Di bagian 1 dari seri ini Anda mendaftarkan aplikasi dan mengonfigurasi alur pengguna di penyewa eksternal Anda. Dalam tutorial ini, Anda membuat proyek Node.js(Express) dan mengatur semua folder dan file yang Anda butuhkan. Anda mengaktifkan masuk ke aplikasi yang Anda siapkan di sini. Tampilan aplikasi web Node.js(Express) ini menggunakan Handlebar.

Dalam tutorial ini Anda akan;

  • Buat proyek Node.js
  • Instal dependensi
  • Menambahkan tampilan aplikasi dan komponen UI

Prasyarat

Membuat proyek Node.js Anda

  1. Di lokasi pilihan di komputer Anda, buat folder untuk menghosting aplikasi node Anda, seperti ciam-sign-in-node-express-web-app.

  2. Di terminal Anda, ubah direktori ke folder aplikasi web Node Anda, seperti cd ciam-sign-in-node-express-web-app, lalu jalankan perintah berikut untuk membuat proyek Node.js baru:

    npm init -y

    Perintah init -y membuat file package.json default untuk proyek Node.js Anda.

  3. Buat folder dan file tambahan untuk mencapai struktur proyek berikut:

        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

Instal dependensi aplikasi

Untuk menginstal identitas yang diperlukan dan Node.js paket npm terkait, jalankan perintah berikut di terminal Anda

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

Membangun komponen antarmuka pengguna aplikasi

  1. Di editor kode Anda, buka file views/index.hbs , lalu tambahkan kode berikut:

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

    Dalam tampilan ini, jika pengguna diautentikasi, kami menunjukkan nama pengguna dan tautan mereka untuk mengunjungi /auth/signout dan /users/id titik akhir, jika tidak, pengguna perlu mengunjungi /auth/signin titik akhir untuk masuk. Kami menentukan rute ekspres untuk titik akhir ini nanti di artikel ini.

  2. Di editor kode Anda, buka file views/id.hbs , lalu tambahkan kode berikut:

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

    Kami menggunakan tampilan ini untuk menampilkan klaim token ID yang dikembalikan microsoft Entra External ID ke aplikasi ini setelah pengguna berhasil masuk.

  3. Di editor kode Anda, buka file views/error.hbs , lalu tambahkan kode berikut:

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

    Kami menggunakan tampilan ini untuk menampilkan kesalahan apa pun yang terjadi saat aplikasi berjalan.

  4. Di editor kode Anda, buka file views/layout.hbs , lalu tambahkan kode berikut:

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

    File layout.hbs berada dalam file tata letak. Ini berisi kode HTML yang kami butuhkan di seluruh tampilan aplikasi.

  5. Di editor kode Anda, buka public/stylesheets/style.css, file, lalu tambahkan kode berikut:

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

    a {
      color: #00B7FF;
    }

Langkah selanjutnya

Bagian 3: Tambahkan masuk dan keluar di aplikasi web Node.js Anda