Öğretici: Dış kiracıda kimlik doğrulaması için Vanilla JavaScript SPA oluşturma

Makale
04/09/2024

Bu öğretici, Vanilla JavaScript (JS) tek sayfalı uygulama (SPA) oluşturmayı ve Microsoft Entra yönetim merkezini kullanarak kimlik doğrulaması için hazırlamayı gösteren serinin 2. bölümüdür. Bu serinin 1. Bölümünde, bir uygulamayı kaydettiniz ve dış kiracınızda kullanıcı akışlarını yapılandırdınız. Bu öğreticide, kimlik doğrulaması ve yetkilendirme için gereken dosyaları kullanarak npm Vanilla JavaScript SPA oluşturma ve oluşturma işlemleri gösterilmektedir.

Bu öğreticide;

Visual Studio Code'da Vanilla JavaScript projesi oluşturma
Gerekli paketleri yükleme
Sunucu oluşturmak için server.js kodu ekleme

Önkoşullar

Öğretici: Vanilla JavaScript SPA'da kullanıcıların kimliğini doğrulamak için dış kiracınızı hazırlama.
Vanilla JavaScript uygulamalarını destekleyen tüm tümleşik geliştirme ortamları (IDE) kullanılabilse de, bu kılavuz için Visual Studio Code önerilir. İndirmeler sayfasından indirilebilir.
Node.js.

Yeni bir Vanilla JavaScript projesi oluşturma ve bağımlılıkları yükleme

Visual Studio Code'ı açın, Dosya>Klasör Aç... öğesini seçin. Adresine gidin ve projenizin oluşturulacağı konumu seçin.
Terminal>Yeni Terminal'i seçerek yeni bir terminal açın.
Yeni bir Vanilla JavaScript projesi oluşturmak için aşağıdaki komutu çalıştırın:
```
npm init -y
```

Aşağıdaki proje yapısını elde etmek için ek klasörler ve dosyalar oluşturun:

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

Uygulama bağımlılıklarını yükleme

Terminalde aşağıdaki komutu çalıştırarak proje için gerekli bağımlılıkları yükleyin:
```
npm install express morgan @azure/msal-browser
```

server.js dosyasını düzenleme

Express, Node.js için bir web uygulaması çerçevesidir. Uygulamayı barındıran bir sunucu oluşturmak için kullanılır. Morgan , HTTP isteklerini konsola kaydeden ara yazılımdır. Sunucu dosyası bu bağımlılıkları barındırmak için kullanılır ve uygulamanın yollarını içerir. Kimlik doğrulaması ve yetkilendirme, JavaScript için Microsoft Kimlik Doğrulama Kitaplığı (MSAL.js) tarafından işlenir.

server.js dosyasına aşağıdaki kod parçacığını ekleyin:

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}!`);
});

Bu kodda uygulama değişkeni express modülüyle başlatılır ve genel varlıklara hizmet vermek için express kullanılır. MSAL-browser statik varlık olarak sunulur ve kimlik doğrulama akışını başlatmak için kullanılır.

Sonraki adım

Bölüm 3: Vanilla JavaScript SPA'da kimlik doğrulama akışlarını işleme

Aracılığıyla paylaş