快速入門：使用原生驗證 JavaScript SDK 在單頁應用程式中登入使用者

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

在本快速入門中，您會使用單頁應用程式 （SPA） 來示範如何使用原生驗證 SDK 來驗證使用者。 範例應用程式示範用戶使用電子郵件密碼和電子郵件一次性密碼的註冊、登入和登出流程。

先決條件

• 具有有效訂閱的 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 個字元的檔案路徑。

安裝專案依賴項

React

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

       cd typescript/native-auth/react-nextjs-sample
   

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

   npm install
   

Angular

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

       cd typescript/native-auth/angular-sample
   

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

   npm install
   

設定範例 React 應用程式

React

1. 開啟 src/config/auth-config.ts ，並將下列佔位元取代為從 Microsoft Entra 系統管理中心取得的值：

   • 尋找佔位元元 Enter_the_Application_Id_Here ，然後將它取代為您稍早註冊之應用程式的應用程式（用戶端）標識碼。
   • 尋找占位符 Enter_the_Tenant_Subdomain_Here，然後將其替換為您的 Microsoft Entra 系統管理中心中的租戶子域。 例如，如果您的租戶主要網域為 contoso.onmicrosoft.com，則請使用 contoso。 如果您沒有租用戶名稱，請了解如何讀取租用戶詳細資料。

2. 儲存變更。

Angular

1. 開啟 src/app/config/auth-config.ts ，並將下列佔位元取代為從 Microsoft Entra 系統管理中心取得的值：

   • 尋找佔位元元 Enter_the_Application_Id_Here ，然後將它取代為您稍早註冊之應用程式的應用程式（用戶端）標識碼。
   • 尋找占位符 Enter_the_Tenant_Subdomain_Here，然後將其替換為您的 Microsoft Entra 系統管理中心中的租戶子域。 例如，如果您的租戶主要網域為 contoso.onmicrosoft.com，則請使用 contoso。 如果您沒有租用戶名稱，請了解如何讀取租用戶詳細資料。

2. 儲存變更。

設定 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替換它。 如果您沒有租用戶識別碼，請了解如何讀取租用戶詳細資料。

執行及測試您的應用程式

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

React

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

   cd typescript/native-auth/react-nextjs-sample/
   npm run cors
   

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

   cd typescript/native-auth/react-nextjs-sample/
   npm run dev
   

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

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

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

Angular

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

   cd typescript/native-auth/angular-sample/
   npm run cors
   

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

   cd typescript/native-auth/angular-sample/
   npm run start
   

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

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

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

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

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

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

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

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

相關內容

• 建置 React 單頁應用程式，以使用原生驗證 SDK 來驗證使用者。
• 建置使用原生驗證 SDK 來驗證使用者的 Angular 單頁應用程式。