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

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

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

前提条件

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

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

1. Visual Studio Code を開き、[ファイル]>[フォルダーを開く...] の順に選択します。プロジェクトを作成する場所に移動して選択します。

2. [ターミナル]>[新しいターミナル] を選択して、新しいターミナルを開きます。

3. 次のコマンドを実行して、新しい Vanilla JavaScript プロジェクトを作成します。

   npm init -y
   

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

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

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

1. ターミナルで次のコマンドを実行し、プロジェクトに必要な依存関係をインストールします。

   npm install express morgan @azure/msal-browser
   

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

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

1. 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 は静的アセットとして機能し、認証フローを開始するために使用されます。

次のステップ