Bagikan melalui


Tutorial: Menyiapkan aplikasi satu halaman Vanilla JavaScript untuk autentikasi di penyewa pelanggan

Di artikel sebelumnya, Anda mendaftarkan aplikasi dan mengonfigurasi alur pengguna di ID Microsoft Entra Anda untuk penyewa pelanggan. Artikel ini menunjukkan cara membuat aplikasi halaman tunggal (SPA) Vanilla JavaScript (JS) dan mengonfigurasinya untuk masuk dan mengeluarkan pengguna dengan penyewa pelanggan Anda.

Dalam tutorial ini;

  • Membuat proyek JavaScript Vanilla di Visual Studio Code
  • Menginstal paket yang diperlukan
  • Menambahkan kode ke server.js untuk membuat server

Prasyarat

Membuat proyek Vanilla JS baru dan menginstal dependensi

  1. Buka Visual Studio Code, pilih Buka File>Folder... . Navigasi ke dan pilih lokasi untuk membuat proyek Anda.

  2. Buka terminal baru dengan memilih Terminal>Terminal Baru.

  3. Jalankan perintah berikut untuk membuat proyek Vanilla JS baru:

    npm init -y
    
  4. Buat folder dan file tambahan untuk mencapai struktur proyek berikut:

        └── public
            └── authConfig.js
            └── authPopup.js
            └── authRedirect.js
            └── claimUtils.js
            └── index.html
            └── signout.html
            └── styles.css
            └── ui.js    
        └── server.js
    

Instal dependensi aplikasi

  1. Di Terminal, jalankan perintah berikut untuk menginstal dependensi yang diperlukan untuk proyek:

    npm install express morgan @azure/msal-browser
    

Mengedit file server.js

Express adalah kerangka kerja aplikasi web untuk Node.js. Ini digunakan untuk membuat server yang menghosting aplikasi. Morgan adalah middleware yang mencatat permintaan HTTP ke konsol. File server digunakan untuk menghosting dependensi ini dan berisi rute untuk aplikasi. Autentikasi dan otorisasi ditangani oleh Pustaka Autentikasi Microsoft untuk JavaScript (MSAL.js).

  1. Tambahkan cuplikan kode berikut ke file server.js :

    const express = require('express');
    const morgan = require('morgan');
    const path = require('path');
    
    const DEFAULT_PORT = process.env.PORT || 3000;
    
    // initialize express.
    const app = express();
    
    // Configure morgan module to log all requests.
    app.use(morgan('dev'));
    
    // serve public assets.
    app.use(express.static('public'));
    
    // serve msal-browser module
    app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));
    
    // set up a route for signout.html
    app.get('/signout', (req, res) => {
        res.sendFile(path.join(__dirname + '/public/signout.html'));
    });
    
    // set up a route for redirect.html
    app.get('/redirect', (req, res) => {
        res.sendFile(path.join(__dirname + '/public/redirect.html'));
    });
    
    // set up a route for index.html
    app.get('/', (req, res) => {
        res.sendFile(path.join(__dirname + '/index.html'));
    });
    
    app.listen(DEFAULT_PORT, () => {
        console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
    });
    
    

Dalam kode ini, variabel aplikasi diinisialisasi dengan modul ekspres dan ekspres digunakan untuk melayani aset publik. MSAL-browser disajikan sebagai aset statis dan digunakan untuk memulai alur autentikasi.

Langkah berikutnya