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

2023-09-22

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.

Langkah berikutnya

Mengonfigurasi SPA untuk autentikasi

Bagikan melalui