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

  • [アーティクル]

登録が完了すると、統合開発環境 (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 プロジェクトを作成します。

  1. Visual Studio を開き、 [新しいプロジェクトの作成] を選択します。

  2. [スタンドアロンの JavaScript React プロジェクト] テンプレートを探して選択し、[次へ] を選択します。

  3. プロジェクトの名前 (reactspalocal など) を入力します。

  4. プロジェクトの場所を選択するか既定のオプションをそのまま使用して、[次へ] を選択します。

  5. [追加情報] で、[作成] を選択します。

  6. ツール バーから、[デバッグなしで開始] を選択してアプリケーションを起動します。 既定では、アドレス http://localhost:3000/ で Web ブラウザーが開きます。 ブラウザーは開いたままで、変更が保存されるたびに再レンダリングされます。

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

    ├─── 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 が使用されます。

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

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

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

  1. 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",
};

  2. 次の値を Microsoft Entra 管理センターから取得した値に置き換えます。

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

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

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

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

  1. "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>
);

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

次のステップ

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