チュートリアル: React シングルページアプリケーションを作成し、認証用に準備する

[アーティクル]
01/31/2024

登録が完了すると、統合開発環境 (IDE) を使用して React プロジェクトを作成することができます。このチュートリアルでは、npm を使用してシングルページの React アプリケーションを作成し、認証と承認に必要なファイルを作成する方法について説明します。

このチュートリアルの内容:

新しい React プロジェクトを作成する
アプリケーションの設定を構成する
ID およびブートストラップのパッケージをインストールする
アプリケーションに認証コードを追加する

前提条件

「チュートリアル: アプリケーションを登録する」の前提条件と手順を完了していること。
React アプリケーションをサポートするすべての IDE を使用できますが、このチュートリアルでは次の Visual Studio IDE を使用します。これらは[ダウンロード] ページからダウンロードできます。 macOS ユーザーの場合は、Visual Studio Code を使用することをお勧めします。
- Visual Studio 2022
- Visual Studio Code
Node.js。

新しい React プロジェクトを作成する

次のタブを使用して、IDE 内に React プロジェクトを作成します。

Visual Studio
Visual Studio Code

Visual Studio を開き、 [新しいプロジェクトの作成] を選択します。
[スタンドアロンの JavaScript React プロジェクト] テンプレートを探して選択し、[次へ] を選択します。
プロジェクトの名前 (reactspalocal など) を入力します。
プロジェクトの場所を選択するか既定のオプションをそのまま使用して、[次へ] を選択します。
[追加情報] で、[作成] を選択します。
ツールバーから、[デバッグなしで開始] を選択してアプリケーションを起動します。既定では、アドレス http://localhost:3000/ で Web ブラウザーが開きます。ブラウザーは開いたままで、変更が保存されるたびに再レンダリングされます。

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

├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

Visual Studio Code を開き、[ファイル]>[フォルダーを開く...] の順に選択します。プロジェクトを作成する場所に移動して選択します。
[ターミナル]>[新しいターミナル] を選択して、新しいターミナルを開きます。
次のコマンドを実行して、新しい React プロジェクトを reactspalocal という名前で作成し、新しいディレクトリに移動して React プロジェクトを開始します。既定では、アドレス http://localhost:3000/ で Web ブラウザーが開きます。ブラウザーは開いたままで、変更が保存されるたびに再レンダリングされます。
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

ID およびブートストラップのパッケージをインストールする

ユーザー認証を有効にするには、ID 関連の npm パッケージがプロジェクトにインストールされている必要があります。プロジェクトのスタイル設定で、Bootstrap が使用されます。

Visual Studio
Visual Studio Code

ソリューションエクスプローラーで、[npm] オプションを右クリックして [新しい npm パッケージのインストール] を選択します。
@azure/MSAL-browser を検索してから、[パッケージのインストール] を選択します。 @azure/MSAL-react に対して繰り返します。
react-bootstrap を探してインストールします。
[閉じる] を選択します。

[ターミナル] バーで、+ アイコンを選択して新しいターミナルを作成します。別のターミナルウィンドウが開き、前のノードターミナルはバックグラウンドで実行され続けます。
正しいディレクトリが選択されていることを確認してから (reactspalocal)、ターミナルに次のように入力して、関連する msal および bootstrap のパッケージをインストールします。
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

これらのパッケージの詳細については、「msal-browser」と「msal-react」でマニュアルを参照してください。

認証構成ファイルを作成する

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: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        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;
                    default:
                        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://docs.microsoft.com/en-us/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, see:
 * 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",
};

次の値を Microsoft Entra 管理センターから取得した値に置き換えます。
- clientId - クライアントとも呼ばれる、アプリケーションの識別子。 Enter_the_Application_Id_Here を、登録したアプリケーションの概要ページから先ほど記録したアプリケーション (クライアント) ID の値に置き換えます。
- authority - これは 2 つの部分で構成されます。
  - "インスタンス" はクラウドプロバイダーのエンドポイントです。各国のクラウドの利用可能なさまざまなエンドポイントで確認します。
  - "テナント ID" は、アプリケーションが登録されているテナントの識別子です。 Enter_the_Tenant_Info_Here を、登録したアプリケーションの概要ページから先ほど記録したディレクトリ (テナント) ID の値に置き換えます。
ファイルを保存します。

index.js を修正して認証プロバイダーを含める

認証を必要とするアプリのすべての部分を MsalProvider コンポーネントにラップする必要があります。 PublicClientApplication をインスタンス化して MsalProvider に渡します。

"src" フォルダーで、"index.js" を開き、msal パッケージとブートストラップのスタイルを使用するために、ファイルの内容を次のコードスニペットに置き換えます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

ファイルを保存します。

次のステップ

チュートリアル: React シングルページアプリにサインインおよびサインアウトするためのコンポーネントを作成する

チュートリアル: React シングルページ アプリケーションを作成し、認証用に準備する