Azure Active Directory B2C を使用して独自の React アプリケーションで認証を有効にする

  • [アーティクル]

この記事では、独自の React シングルページ アプリケーション (SPA) に Azure Active Directory B2C (Azure AD B2C) 認証を追加する方法について説明します。 React アプリケーションを MSAL for React 認証ライブラリと統合する方法について説明します。

この記事と併せて、サンプルの React シングルページ アプリケーションでの認証の構成に関する関連記事も使用します。 サンプル React アプリを独自の React アプリに置き換えます。 この記事の手順を完了すると、アプリケーションで Azure AD B2C によるサインインが受け付けられるようになります。

前提条件

サンプルの React シングルページ アプリケーションでの認証の構成に関する記事の前提条件と統合の手順を確認します。

手順 1: React アプリ プロジェクトを作成する

既存の React アプリを使用することも、新しい React アプリを作成することもできます。 新しいプロジェクトを作成するには、コマンド シェルで次のコマンドを実行します。

npx create-react-app my-app
cd my-app

手順 2: 依存関係をインストールする

アプリケーションに MSAL Browser ライブラリと MSAL React ライブラリをインストールするには、コマンド シェルで次のコマンドを実行します。

npm i @azure/msal-browser  @azure/msal-react

react-router-dom バージョン 5.* をインストールします。 react-router-dom パッケージには、Web アプリケーションで React Router を使用するためのバインドが含まれています。 コマンド シェルで、次のコマンドを実行します。

npm i react-router-dom@5.3.3

React のブートストラップをインストールします (UI の場合は省略可能)。

npm i bootstrap react-bootstrap

手順 3: 認証コンポーネントを追加する

サンプル コードは、次のコンポーネントで構成されています。 サンプル React アプリから独自のアプリにこれらのコンポーネントを追加します。

  • public/index.html - バンドル プロセスでは、このファイルがテンプレートとして使用され、React コンポーネントが <div id="root"> 要素に挿入されます。 ブラウザーで直接開くと、空のページが表示されます。

  • src/authConfig.js - Azure AD B2C ID プロバイダーと Web API サービスに関する情報を含む構成ファイル。 React アプリでは、この情報を使用して Azure AD B2C との信頼関係を確立し、ユーザーのサインインとサインアウトを行い、トークンを取得して検証します。

  • src/index.js - アプリケーションへの JavaScript エントリ ポイント。 この JavaScript ファイルは、

    • ルート コンポーネントとして App を public/index.html ページの <div id="root"> 要素にマウントします。
    • authConfig.js ファイルで定義された構成で MSAL PublicClientApplication ライブラリを開始します。 MSAL React は、再レンダリング時に再インスタンス化されないように、コンポーネント ツリーの外部でインスタンス化する必要があります。
    • MSAL ライブラリのインスタンス化後、JavaScript コードはアプリケーション コンポーネントに msalInstance props として渡します。 たとえば、<App instance={msalInstance} /> のようにします。

  • src/App.jsx - App と Pages のコンポーネントを定義します。

    • App コンポーネントは、アプリの最上位コンポーネントです。 MsalProvider コンポーネント間ですべてをラップします。 MsalProvider の下にあるすべてのコンポーネントは、コンテキストと MSAL React によって提供されるすべてのフックとコンポーネントを介して PublicClientApplication インスタンスにアクセスできます。 App コンポーネントは PageLayout とその Pages 子要素をマウントします。

    • Pages コンポーネントは、MSAL イベント コールバックを登録および登録解除します。 イベントは、MSAL エラーを処理するために使用されます。 また、アプリのルーティング ロジックも定義します。

    重要

    App コンポーネントのファイル名が App.js の場合は、App.jsx に変更します。

  • src/pages/Hello.jsx - OAuth2 ベアラー トークンを使用して保護されたリソースを呼び出す方法を示します。

    • PublicClientApplication インスタンスを返す useMsal フックを使用します。
    • PublicClientApplication インスタンスでは、REST API を呼び出すアクセス トークンを取得します。
    • callApiWithToken 関数を呼び出して REST API からデータをフェッチし、DataDisplay コンポーネントを使用して結果をレンダリングします。

  • src/components/NavigationBar.jsx - サインイン、サインアウト、プロファイルの編集、REST API 呼び出しリセットのボタンがあるアプリの上部ナビゲーション バー。

    • AuthenticatedTemplate と UnauthenticatedTemplate が使用されます。これは、ユーザーが認証または認証されていない場合にのみ子をレンダリングします。
    • ログインを処理し、リダイレクトおよびポップアップ ウィンドウ イベントを使用してサインアウトします。

  • src/components/PageLayout.jsx

    • ユーザーがページ間を移動するときに一貫したエクスペリエンスを提供する共通のレイアウト。 このレイアウトには、アプリ ヘッダー、NavigationBar コンポーネント、フッター、その子コンポーネントなど、一般的なユーザー インターフェイス要素が含まれています。
    • これは、ユーザーが認証された場合にのみ子をレンダリングする AuthenticatedTemplate を使います。

  • src/components/DataDisplay.jsx - REST API 呼び出しから返されるデータをレンダリングします。

  • src/styles/App.css と src/styles/index.css - アプリの CSS スタイル ファイル。

  • src/fetch.js - REST API への HTTP 要求をフェッチします。

手順 4: React アプリを構成する

認証コンポーネントを追加したら、Azure AD B2C 設定を使用して React アプリを構成します。 Azure AD B2C ID プロバイダーの設定は、authConfig.js ファイルで構成されます。

ガイダンスについては、「React アプリを構成する」を参照してください。

手順 5: アプリケーションを実行する

  1. Visual Studio Code から新しいターミナルを開き、次のコマンドを実行します。

    npm install && npm update
npm start

    コンソール ウィンドウには、アプリケーションがホストされている場所のポート番号が表示されます。

    Listening on port 3000...

  2. REST API を呼び出すには、Web API を実行する方法のガイダンスに従います

  3. ブラウザーで http://localhost:3000 に移動し、アプリケーションを表示します。

次のステップ