適用対象: 
従業員テナント 
外部テナント (詳細情報)
このクイックスタートでは、React シングルページアプリケーション (SPA) を使用して、ユーザーを認証するためにネイティブ認証 APIを使用する方法を示します。 サンプル アプリでは、ユーザーのサインアップ、サインイン、サインアウト、パスワードのリセットを電子メールとパスワードで示します。
[前提条件]
- アクティブなサブスクリプションを持つ Azure アカウント。 アカウントをまだお持ちでない場合は、無料アカウントを作成します。
- この Azure アカウントには、アプリケーションを管理するためのアクセス許可が必要です。 以下のいずれの Microsoft Entra ロールにも、必要なアクセス許可が含まれています。
- アプリケーション管理者
- アプリケーション開発者
- 外部テナント。 作成するには、次の方法から選択します。
- Microsoft Entra 外部 ID 拡張機能を使用して、Visual Studio Code で外部テナントを直接設定します。 (おすすめ)
- Microsoft Entra 管理センターで新しい外部テナント を作成します。
- ユーザーの流れ。 詳細については、 外部テナント内のアプリのセルフサービス サインアップ ユーザー フローを作成する方法に関するページを参照してください。 ユーザー フローに次のユーザー属性が含まれていることを確認します。
- 指定の名前
- 姓
- この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。 詳細については、「 アプリケーションの登録 」を参照してください。 後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
- アプリケーションをユーザー フローに追加する
- Node.js。
- Visual Studio Code または別のコードエディター。
パブリック クライアントとネイティブ認証フローを有効にする
このアプリがパブリック クライアントであり、ネイティブ認証を使用できることを指定するには、パブリック クライアントとネイティブ認証フローを有効にします。
- アプリ登録ページから、パブリック クライアントとネイティブ認証フローを有効にするアプリ登録を選択します。
- [管理] で、 [認証] を選択します。
- [詳細設定 で、パブリック クライアント フローを許可します。
- [次のモバイルとデスクトップのフローを有効にする] で、[はい] を選びます。
- ネイティブ認証 を有効にするには、[はい] を選択します。
- [保存] ボタンを選びます。
サンプル SPA を複製またはダウンロードする
サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。
サンプルを複製するには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git
または、サンプルをダウンロードし、名前の長さが 260 文字未満のファイル パスに抽出します。
プロジェクトの依存関係をインストールする
ターミナル ウィンドウを開き、React サンプル アプリが含まれているディレクトリに移動します。
cd API\React\ReactAuthSimple次のコマンドを実行して、アプリの依存関係をインストールします。
npm install
サンプル React アプリを構成する
コード エディターで、src\config.ts ファイル 開きます。
プレースホルダー
Enter_the_Application_Id_Hereを見つけて、先ほど登録したアプリのアプリケーション (クライアント) ID に置き換えます。変更を保存します。
CORS プロキシ サーバーを構成する
ネイティブ認証 API では、クロスオリジン リソース共有 (CORS) サポートされていないため、SPA アプリと API の間にプロキシ サーバーを設定する必要があります。
このコード サンプルには、ネイティブ認証 API URL エンドポイントに要求を転送する CORS プロキシ サーバーが含まれています。 CORS プロキシ サーバーは、ポート 3001 でリッスンする Node.js サーバーです。
プロキシ サーバーを構成するには、proxy.config.js ファイルを開き、プレースホルダーを見つけます。
tenantSubdomainをディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインがcontoso.onmicrosoft.comの場合は、contosoを使用します。 テナント サブドメインがない場合は、テナントの詳細を 読み取る方法について説明します。tenantIdをディレクトリ (テナント) ID に置き換えます。 テナント ID がわからない場合は、テナントの詳細を読み取る方法を確認してください。
アプリを実行してテストする
これで、サンプル アプリを構成し、実行する準備ができました。
ターミナル ウィンドウから、次のコマンドを実行して CORS プロキシ サーバーを起動します。
cd API\React\ReactAuthSimple npm run corsReact アプリを起動するには、別のターミナル ウィンドウを開き、次のコマンドを実行します。
cd API\React\ReactAuthSimple npm startWeb ブラウザーを開き、
http://localhost:3000/に移動します。アカウントにサインアップするには、サインアップを選択し、プロンプトに従います。
サインアップした後、サインイン と パスワードをリセット をそれぞれ選択して、サインインとパスワードリセットをテストします。
関連コンテンツ
- Azure Function Appを使用してネイティブ認証 API を使用するシングルページ アプリのリバース プロキシを設定します。
- ネイティブ認証を使用するシングルページ アプリの運用環境でリバース プロキシとして Azure Front Door を使用します。
- ネイティブ認証 API を使用する React シングルページ アプリを最初から作成。