重要
2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。 詳細については、FAQ を参照してください。
この記事では、独自の 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
Bootstrap for 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をルート コンポーネントとしてパブリック/index.html ページの<div id="root">要素にマウントします。 - authConfig.jsファイルで定義された構成を使用して、MSAL
PublicClientApplicationライブラリを開始します。 MSAL React は、再レンダリング時に再インスタンス化されないように、コンポーネント ツリーの外部でインスタンス化する必要があります。 - MSAL ライブラリのインスタンス化後、JavaScript コードは
msalInstanceを prop としてアプリケーション コンポーネントに渡します。 たとえば、<App instance={msalInstance} />のようにします。
-
src/App.jsx - アプリ と ページ のコンポーネントを定義します。
アプリ コンポーネントは、アプリの最上位コンポーネントです。 コンポーネント間ですべてをラップ
MsalProvider。 MsalProvider の下にあるすべてのコンポーネントは、コンテキストと MSAL React によって提供されるすべてのフックとコンポーネントを介して PublicClientApplication インスタンスにアクセスできます。 App コンポーネントは、 PageLayout とその Pages 子要素をマウントします。Pages コンポーネントは、MSAL イベント コールバックを登録および登録解除します。 イベントは、MSAL エラーを処理するために使用されます。 また、アプリのルーティング ロジックも定義します。
重要
アプリ コンポーネント ファイル名が
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: React アプリケーションを実行する
Visual Studio Code から新しいターミナルを開き、次のコマンドを実行します。
npm install && npm update npm startコンソール ウィンドウには、アプリケーションがホストされているポート番号が表示されます。
Listening on port 3000...REST API を呼び出すには、Web API の実行方法に関するガイダンスに従います
ブラウザーで、
http://localhost:3000に移動してアプリケーションを表示します