演習 - Next.js Web アプリを Azure AD に統合する

25 分

この演習では、Microsoft Entra ID と統合されるシンプルな Next.js ベースアプリケーションを構成するプロセスについて見ていきます。

この演習では、以下のことを行います。

Microsoft Entra アプリケーションを登録します。
シンプルな Microsoft Entra 統合された Next.js ベースアプリケーションを実装します。
Next.js ベースアプリケーションの Microsoft Entra 統合を検証します。

前提条件

この演習を実行するには、以下が必要です。

Azure サブスクリプションでの演習 "Microsoft Entra ID の設定" と "マルチテナントデータの実装" を完了していること。
Azure サブスクリプションに関連付けられている Microsoft Entra テナントの全体管理者ロールと、Azure サブスクリプションの所有者または共同作成者ロールを持つ Microsoft アカウントまたは Microsoft Entra アカウント。
Node.js と Git がインストールされたコンピューター。

警告

このモジュールの演習では、管理者特権を必要とする機密性の高い操作が実行されるため、テスト環境を使用してください。

Note

Node.js のインストールについては、Node.js のダウンロードページを参照してください。 Git については、Git のダウンロードページを参照してください。この演習を開始する前に両方をインストールしておいてください。

Microsoft Entra ID を使用してアプリケーションを登録する

Microsoft Entra 認証を使用して Azure Database for PostgreSQL データベースにアクセスする Next.js ベースアプリケーションを実装するには、まず Microsoft Entra アプリケーションオブジェクトとそれに対応するセキュリティプリンシパルを作成する必要があります。これによって、Next.js ベースアプリケーションがデータベースオブジェクトにアクセスする際に Microsoft Entra ユーザーを借用することができます。

必要に応じて Web ブラウザーを起動し、Azure portal に移動してサインインし、このモジュールで使用する Azure サブスクリプションにアクセスします。
[リソース、サービス、ドキュメントの検索] テキストボックスを使用して [Microsoft Entra ID] を検索し、結果のリストで [Microsoft Entra ID] を選択します。
[Microsoft Entra ID] ブレードの垂直メニューで、[管理] セクションの [アプリの登録] を選択します。
[アプリの登録] ブレードで [+ 新規登録] を選択します。
[アプリケーションの登録] ブレードの [名前] ボックスに「cna-nextjs-app」と入力します。
[サポートされているアカウントの種類] セクションで、[Accounts in this organizational directory only (Default Directory only - Single tenant)](この組織のディレクトリ内のアカウントのみ (既定のディレクトリのみ - シングルテナント)) が選択されていることを確認します。 [リダイレクト URI (省略可能)] セクションで [シングルページアプリケーション (SPA)] エントリを http://localhost:3000 に設定し、[登録] を選択します。

Note

この時点で Microsoft Entra 登録済みアプリケーションのマルチテナントサポートを構成するという選択肢があります。ただし、このアプローチの詳しい内容についてはこのモジュールの範囲外となります。

注意

アプリケーションのデプロイ後、[リダイレクト URI (省略可能)] の値を変更してその実際の URL を反映する必要があります。
結果として得られた設定を [cna-nextjs-app] ブレードで確認し、[アプリケーション (クライアント) ID] プロパティと [ディレクトリ (テナント) ID] プロパティの値を記録します。
[cna-nextjs-app] ブレードで、縦長のメニューの [管理] セクションから [API のアクセス許可] を選択します。
[cna-nextjs-app | API のアクセス許可] ブレードで [+ アクセス許可の追加] を選択し、[API アクセス許可の要求] ブレードの [所属する組織で使用している API] タブを選択して、検索テキストボックスに「Azure OSSRDBMS Database」と入力し、検索結果の一覧から [Azure OSSRDBMS Database] を選択します。
[API アクセス許可の要求] ペインの [委任されたアクセス許可] を選択し、[user_impersonation] チェックボックスをオンにして、[アクセス許可の追加] を選択します。
[cna-nextjs-app | API のアクセス許可] ブレードに戻って [既定のディレクトリに管理者の同意を与えます] を選択し、確認のメッセージが表示されたら [はい] を選択します。
[cna-nextjs-app | API のアクセス許可] ブレードで、アクセス許可が付与されていることを確認します。

シンプルな Microsoft Entra 統合された Next.js ベースアプリケーションを実装する

アプリケーションが Microsoft Entra テナントに登録されたので、その実装を進めることができるようになりました。タスクを単純化するために、サンプル Next.js コードを含んだ GitHub リポジトリをクローンして、それを Microsoft Entra テナントと統合するようにカスタマイズします。

ローカルコンピューターで Node.js のコマンドプロンプトを起動します。

注意

必ず、お使いのコンピューターのローカルにインストールされた Node.js を使用して実行してください。
Node.js のコマンドプロンプトから次のコマンドを実行して、この演習で使用するサンプルの Next.js アプリケーションのコードを含む GitHub リポジトリをクローンします。
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
次のコマンドを実行して、GitHub リポジトリのクローンがホストされているディレクトリに切り替えます。
```
cd ./mslearn-cloud-native-apps/m06u07
```

任意のテキストエディターを使用して、./src/App.jsx ファイルの内容を確認します。これは、シングルページアプリケーションのアクセストークンを Microsoft Entra ID から取得します。

Note

サンプルコードは、「チュートリアル: 認証コードフローを使用して、ユーザーをサインインさせて React シングルページアプリ (SPA) から Microsoft Graph API を呼び出す」に準じています。

./src/App.jsx ファイルの内容は次のとおりです。

import React, { useState } from "react";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import { PageLayout } from "./components/PageLayout";
import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";
import Button from "react-bootstrap/Button";
import "./styles/App.css";

var accessToken = '';

/**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            accessToken = response.accessToken;
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            {graphData ?
                <ProfileData graphData={graphData} />
                :
                <Button variant="secondary" onClick={RequestProfileData}>Request Profile Information</Button>
            }
            <p>{accessToken}</p>
        </>
    );
};

/**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise, a message indicating a user is not authenticated is rendered.
 */
const MainContent = () => {
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5 className="card-title">Please sign-in to review your profile information.</h5>
                </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <MainContent />
        </PageLayout>
    );
}

任意のテキストエディターを使用して ./src/authConfig.js ファイルの内容を確認します。これは、この演習の前のタスクで登録したターゲット Microsoft Entra アプリケーションを特定するために必要な情報を保存します。

./src/authConfig.js ファイルの内容は次のとおりです。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * 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
 */
export const msalConfig = {
    auth: {
        clientId: "<client_ID>",
        authority: "https://login.microsoftonline.com/<tenant_ID>",
        redirectUri: "http://localhost:3000"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case 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/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, review:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

./src/authConfig.js ファイルの内容が表示されているテキストエディターで、プレースホルダー <client_ID> と <tenant_ID> を、先ほどこの演習のタスクで確認した値にそれぞれ置き換えます。
./src/authConfig.js ファイルの内容が表示されているテキストエディターで、scopes: ["User.Read"] というエントリを scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"] に置き換えます。
変更を保存してファイルを閉じます。

Next.js ベースアプリケーションの Microsoft Entra 統合を検証する

アプリの Microsoft Entra 統合を検証する準備が整いました。コンテナー化することもできますが、簡潔にするために、ここではまず、お使いのコンピューターの Node.js 開発環境内でローカルから実行します。そうすることで手軽にその機能を検証し、コンテナー化が実用的な選択肢であることを確認することができます。

Node.js のコマンドプロンプトから次のコマンドを実行して、サンプル Next.js アプリケーションの依存関係パッケージをインストールします。
```
npm install
```
注意

インストールプロセスが完了するまで待ちます。
Node.js コマンドプロンプトから次のコマンドを実行して Next.js アプリケーションをビルドします。
```
npm run-script build
```
注意

ビルド処理が完了するまで待ちます。
Node.js コマンドプロンプトから次のコマンドを実行して Next.js アプリケーションを起動します。
```
npm run-script start
```
注意

これによって自動的にブラウザーウィンドウが開き、[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart](Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート) ページが表示されます。
[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart](Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート) ページが表示されている Web ブラウザーウィンドウを閉じ、別の Web ブラウザーウィンドウをシークレット (InPrivate) モードで起動して、http://localhost:3000 という URL に移動します。
[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart](Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート) ページで [サインイン] を選択し、展開されたメニューの [Sign in using Popup](ポップアップを使用してサインイン) を選択します。

$[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart]$Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート$ ページと [Sign in using Popup]$ポップアップを使用してサインイン$ メニューオプションのスクリーンショット。$
サインインを求められたら、adatumuser1 という userPrincipalName および、そのパスワードを使用して認証を行います。

Note

このユーザーアカウントは、このモジュールの最初の演習で作成したものです。
[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart](Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート) ページで [Request Profile Information](プロファイル情報を要求) を選択します。

$[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart]$Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート$ ページと [Request Profile Information]$プロファイル情報を要求$ ボタンのスクリーンショット。$

Note

出力に、Microsoft Entra ユーザーアカウント adatumuser1 のメール、ID、アクセストークンが含まれていることを確認します。

$[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart]$Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート$ ページと adatumuser1 のプロファイル情報のスクリーンショット。$
同じ Web ブラウザーウィンドウでブラウザータブをもう 1 つ開き、前の演習で表示した Web アプリケーションに移動します。

注意

URL は、https://<webapp_name>.azurewebsites.net/auth という形式になっている必要があります。

注意

結果の Web ページに、1 つ目のテナントの在庫データが表示されていることを確認してください。

注意

初回試行が失敗した場合は、もう一度やり直してください。
シークレット (InPrivate) モードの Web ブラウザーウィンドウを閉じます。

注意

今度は、同じ一連の手順を contosouser1 として実行し、同様に在庫データにアクセスできること、また、2 つ目のテナントに対応するレコード一式を表示できることを確認してください。
シークレット (InPrivate) モードでもう 1 つの Web ブラウザーウィンドウを起動し、http://localhost:3000 という URL に移動します。
[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart](Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート) ページで [サインイン] を選択し、展開されたメニューの [Sign in using Popup](ポップアップを使用してサインイン) を選択します。
サインインを求められたら、contosouser1 という userPrincipalName および、そのパスワードを使用して認証を行います。

Note

このユーザーアカウントは、このモジュールの最初の演習で作成したものです。

注意

プロンプトが表示されたらアクセスリクエストを受け入れ、contosouser1 アカウントのパスワードを変更します。
[Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart](Microsoft Authentication Library For JavaScript へようこそ - React クイックスタート) ページで [Request Profile Information](プロファイル情報を要求) を選択します。

Note

出力に、Microsoft Entra ユーザーアカウント contosouser1 のメール、ID、アクセストークンが含まれていることを確認します。
同じ Web ブラウザーウィンドウでブラウザータブをもう 1 つ開き、前の演習で表示した Web アプリケーションに移動します。

注意

結果の Web ページに、2 つ目のテナントの在庫データが表示されていることを確認してください。

結果

おめでとうございます。このモジュールの 3 番目の演習を完了しました。この演習では、AD に統合された簡単な Next.js ベースアプリケーションを実装し、その機能を確認しました。

リソースのクリーンアップ

不要な Azure リソースの使用料が課金されないよう、このモジュールの演習で作成した postgresql-db-RG と cna-aadexpress-RG のリソースグループを削除する必要があります。これを行うには、Azure portal で、これらの各リソースグループのブレードに移動し、ツールバーの [リソースグループの削除] エントリを選択します。 [リソースグループ名を入力してください] ボックスにリソースグループの名前を入力して、[削除] を選択します。

演習 - Next.js Web アプリを Azure AD に統合する

前提条件

Microsoft Entra ID を使用してアプリケーションを登録する

シンプルな Microsoft Entra 統合された Next.js ベース アプリケーションを実装する

Next.js ベース アプリケーションの Microsoft Entra 統合を検証する

結果

リソースのクリーンアップ

フィードバック

シンプルな Microsoft Entra 統合された Next.js ベースアプリケーションを実装する

Next.js ベースアプリケーションの Microsoft Entra 統合を検証する