快速入門：透過原生認證，在 React 單頁應用程式中登入使用者

適用於： 外部租用戶 （深入瞭解）

在本快速入門中，您會使用 React 單頁應用程式 （SPA） 來示範如何使用 原生驗證 API來驗證使用者。 範例應用程式示範使用者透過電子郵件和密碼進行註冊、登入、註銷和密碼重設。

先決條件

• 具有有效訂閱的 Azure 帳戶。 如果您還沒有帳戶，免費建立帳戶。
• 此 Azure 帳戶必須具有管理應用程式的權限。 下列任何 Microsoft Entra 角色都包含必要的權限:
  • 應用程式管理員
  • 應用程式開發人員
• 外部租戶。 如果您沒有外部租戶，在 Microsoft Entra 系統管理中心建立新的外部租戶。
• 使用者流程。 如需詳細資訊，請參閱 為外部租使用者中的應用程式建立自助式註冊用戶流程。 確定使用者流程包含下列使用者屬性：
  • 指定名稱
  • 姓氏
• 如果您尚未這麼做，在 Microsoft Entra 系統管理中心註冊應用程式。 確保：
  • 記錄 應用程式 （用戶端） 識別碼 和 目錄 （租使用者） 識別碼以供 日後使用。
  • 授與應用程式註冊的系統管理員同意。
• 將您的應用程式註冊與使用者流程建立關聯
• Node.js。
• Visual Studio Code 或其他程式碼編輯器。

啟用公用用戶端和原生驗證流程

若要指定此應用程式是公用用戶端，而且可以使用原生驗證，請啟用公用用戶端和原生驗證流程：

1. 從 [應用程式註冊] 頁面中，選取您要啟用公用用戶端和原生驗證流程的應用程式註冊。
2. 在 [管理] 下，選取 [驗證]。
3. 在 [進階設定] 中，允許公用用戶端流動：
   1. 針對「啟用下列行動和桌面流程」選取「是」。
   2. 針對 啟用原生驗證，請選擇 是。
4. 選取 儲存 按鈕。

複製或下載範例 SPA

若要取得範例應用程式，您可以從 GitHub 複製它，或將它下載為 .zip 檔案。

若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：

git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git

或者，下載範例，然後將它解壓縮到檔名長度少於 260 個字元的檔案路徑。

安裝專案依賴

1. 開啟終端機視窗，並瀏覽至包含 React 範例應用程式的目錄：

   cd API\React\ReactAuthSimple
   

2. 執行下列命令以安裝應用程式相依性：

   npm install
   

設定範例 React 應用程式

1. 在您的程式代碼編輯器中，開啟 src\config.ts 檔案。

2. 尋找佔位元元 Enter_the_Application_Id_Here ，然後將它取代為您稍早註冊之應用程式的應用程式（用戶端）標識碼。

3. 儲存變更。

設定 CORS Proxy 伺服器

原生驗證 API 不支援 跨原始資源分享 （CORS），因此您必須在 SPA 應用程式和 API 之間設定 Proxy 伺服器。

此程式代碼範例包含 CORS Proxy 伺服器，會將要求轉送至原生驗證 API URL 端點。 CORS Proxy 伺服器是 Node.js 伺服器，並接聽 3001 埠。

若要設定代理伺服器，請開啟 proxy.config.js 檔案，然後尋找佔位元：

• tenantSubdomain，並將它取代為 Directory （tenant） 子域。 例如，如果您的租戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租戶子網域，請了解如何 查看租戶詳細資料。
• tenantId，並將其替換為目錄租戶 ID。 如果您沒有租使用者標識碼，請瞭解如何 閱讀租使用者詳細數據。

執行及測試您的應用程式

您現在已設定範例應用程式，並已準備好執行。

1. 從終端機視窗中，執行下列命令來啟動 CORS Proxy 伺服器：

   cd API\React\ReactAuthSimple
   npm run cors
   

2. 若要啟動 React 應用程式，請開啟另一個終端機視窗，然後執行下列命令：

   cd API\React\ReactAuthSimple
   npm start
   

3. 開啟網頁瀏覽器並移至 http://localhost:3000/。

4. 若要註冊帳戶，請選取 [註冊]，然後遵循提示。

5. 註冊之後，請分別選取 [登入] 和 [重設密碼]，以測試登入和密碼重設。

啟用別名或使用者名稱登入

您可以允許使用電子郵件地址和密碼登入的使用者也使用使用者名稱和密碼登入。 使用者名稱也稱為替代登入識別碼，可以是客戶 ID、帳號，或你選擇使用的其他識別碼作為使用者名稱。

你可以透過 Microsoft Entra 管理中心手動指派使用者名稱給使用者帳號，或透過 Microsoft Graph API 使用應用程式自動化此過程。

請使用「 以別名或使用者名稱登入 」文章中的步驟，讓你的使用者能在應用程式中使用使用者名登入：

1. 登入時啟用使用者名稱。
2. 在管理中心建立使用者名稱，或透過新增使用者名稱更新現有使用者。 另外，你也可以 使用 Microsoft Graph API 自動化應用程式中的使用者建立與更新。

相關內容

• 使用 Azure 函式應用程式為使用原生驗證 API 的單頁應用程式設定反向 Proxy。
• 在生產環境中，針對使用原生驗證的單頁應用程式，使用 Azure Front Door 作為反向代理。
• 從頭開始建置使用原生驗證 API 的 React 單頁應用程式，。