次の方法で共有

チュートリアル: 認証用に JavaScript シングルページ アプリを準備する

適用対象: 白いチェック マーク記号が付いた緑の円。 従業員テナント 白いチェック マーク記号が付いた緑の円。 外部テナント (詳細はこちら)

このチュートリアルでは、JavaScript シングルページ アプリケーション (SPA) を構築し、Microsoft ID プラットフォームを使用して認証用に準備します。 このチュートリアルでは、 npmを使用して JavaScript SPA を作成し、認証と承認に必要なファイルを作成し、テナントの詳細をソース コードに追加する方法について説明します。 このアプリケーションは、従業員テナントの従業員または外部テナントを使用している顧客に使用できます。

このチュートリアルでは、次のことを行いました。

  • 新しい JavaScript プロジェクトを作成する
  • 認証に必要なパッケージをインストールする
  • ファイル構造を作成し、サーバー ファイルにコードを追加する
  • 認証構成ファイルにテナントの詳細を追加する

前提条件

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

  1. Microsoft Entra 管理センターにグローバル管理者としてサインインします。

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

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

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

    npm init -y

  5. 次のプロジェクト構造を実現するために、追加のフォルダーとファイルを作成します。

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

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

    npm install express morgan @azure/msal-browser

サーバー ファイルにコードを追加する

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

module.exports = app;

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

テナントの詳細を MSAL 構成に追加する

authConfig.js ファイルには認証フローの構成設定が含まれており、認証に必要な設定でMSAL.js を構成するために使用されます。

  1. パブリック/authConfig.js を開き、次のコードを追加します。

    /**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. 次の値を Microsoft Entra 管理センターの値に置き換えます。

    • Enter_the_Application_Id_Here 値を見つけて、Microsoft Entra 管理センターに登録したアプリの アプリケーション ID (clientId) に置き換えます。
    • Enter_the_Tenant_Info_Here 値を検索し、それを、Microsoft Entra 管理センターで作成した従業員テナントの Tenant ID に置き換えます。

  3. ファイルを保存します。

次のステップ

JavaScript SPA での認証フローの処理