Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
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
- Penyelesaian prasyarat dan langkah-langkah dalam Menyiapkan penyewa pelanggan Anda untuk mengautentikasi aplikasi satu halaman Vanilla JavaScript.
- Meskipun setiap lingkungan pengembangan terpadu (IDE) yang mendukung aplikasi Vanilla JS dapat digunakan, Visual Studio Code direkomendasikan untuk panduan ini. Ini dapat diunduh dari halaman Unduhan .
- Node.js.
Membuat proyek Vanilla JS baru dan menginstal dependensi
Buka Visual Studio Code, pilih Buka File>Folder... . Navigasi ke dan pilih lokasi untuk membuat proyek Anda.
Buka terminal baru dengan memilih Terminal>Terminal Baru.
Jalankan perintah berikut untuk membuat proyek Vanilla JS baru:
npm init -y
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
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).
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.