チュートリアル: 外部テナントに認証用の Vanilla JavaScript SPA を作成する

[アーティクル]
04/14/2024

このチュートリアルは、Vanilla JavaScript (JS) シングルページアプリケーション (SPA) の構築と、Microsoft Entra 管理センターを使用した認証の準備を行うシリーズのパート 2 です。このシリーズのパート 1 では、外部テナントでアプリケーションを登録し、ユーザーフローを構成しました。このチュートリアルでは、npm を使用して Vanilla JavaScript SPA を作成し、認証と認可に必要なファイルを作成する方法について説明します。

このチュートリアルでは、

Visual Studio Code で Vanilla JavaScript プロジェクトを作成する
必要なパッケージをインストールする
server.js にコードを追加してサーバーを作成する

前提条件

チュートリアル: Vanilla JavaScript SPA でユーザーを認証するように、外部テナントを準備する。
Vanilla JavaScript アプリケーションをサポートする統合開発環境 (IDE) であればどれでも使用できますが、このガイドでは Visual Studio Code をお勧めします。これは [ダウンロード] ページからダウンロードできます。
Node.js。

新しい Vanilla JavaScript プロジェクトを作成し、依存関係をインストールする

Visual Studio Code を開き、[ファイル]>[フォルダーを開く...] の順に選択します。プロジェクトを作成する場所に移動して選択します。
[ターミナル]>[新しいターミナル] を選択して、新しいターミナルを開きます。
次のコマンドを実行して、新しい Vanilla JavaScript プロジェクトを作成します。
```
npm init -y
```

追加のフォルダーとファイルを作成して、次のプロジェクト構造を完成させます。

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

アプリの依存関係をインストールする

ターミナルで次のコマンドを実行し、プロジェクトに必要な依存関係をインストールします。
```
npm install express morgan @azure/msal-browser
```

server.js ファイルを編集する

Express は、Node.js 用の Web アプリケーションフレームワークです。アプリケーションをホストするサーバーを作成するために使用されます。 Morgan は、HTTP 要求をコンソールに記録するミドルウェアです。サーバーファイルはこれらの依存関係をホストするために使用され、ファイルにはアプリケーションのルートが含まれています。認証と承認は、JavaScript 用 Microsoft Authentication Library (MSAL.js) で処理されます。

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

このコードでは、app 変数は express モジュールで初期化され、express はパブリックアセットを提供するために使用されます。 MSAL-browser は静的アセットとして機能し、認証フローを開始するために使用されます。

次のステップ

パート 3: Vanilla JavaScript SPA で認証フローを処理する

次の方法で共有