分享方式:


單頁應用程式:應用程式註冊

若要在 Microsoft 身分識別平台中註冊單頁應用程式 (SPA),請完成下列步驟。 註冊步驟在支援隱含授與流程的 MSAL.js 1.0 之間有所不同,MSAL.js 2.0,後者支援 PKCE 的授權碼流程。 如果您使用 MSAL.js 1.0,建議您移轉至 MSAL.js 2.0,以利用 PKCE 的授權碼流程,更安全。

建立應用程式註冊

提示

根據您從中開始的入口網站,本文中的步驟可能會略有不同。

針對以 MSAL.js 1.0 和 2.0 為基礎的應用程式,請先完成下列步驟,以建立初始應用程式註冊。

  1. 登入 Microsoft Entra 系統管理中心。
  2. 如果您有多個租用戶的存取權,請使用頂端功能表中的 [設定] 圖示,從 [目錄 + 訂用帳戶] 功能表來切換要在其中註冊應用程式的租用戶。
  3. 前往 [身分識別] > [應用程式] > [應用程式註冊],選取 [新增註冊]
  4. 輸入應用程式的名稱。 您的應用程式使用者可能會看到此名稱,而且您稍後可以加以變更。
  5. 為應用程式選擇 [支援的帳戶類型]。 請不要輸入重新導向 URI。 如需不同帳戶類型的說明,請參閱註冊應用程式
  6. 選取 [註冊] 以建立應用程式註冊。

接下來,使用重新導向 URI 設定應用程式註冊,以指定 Microsoft 身分識別平台應將用戶端與任何安全性權杖一起重新導向的目標位置。 使用適用於您應用程式中所使用之 MSAL.js 版本的步驟:

請記住,MSAL.js 2.0+ 支援 PKCE 的授權碼流程,比隱含授與流程更安全。 如果您使用 MSAL.js 1.0,請考慮移轉至 MSAL.js 2.0,以利用 PKCE 的授權碼流程。

重新導向 URI:具有驗證碼流程的 MSAL.js 2.0

遵循這些步驟,為使用 MSAL.js 2.0 或更新版本的應用程式新增重新導向 URI。 MSAL.js 2.0+ 支援使用 PKCE 和跨原始資源共用 (CORS) 的授權碼流程,以回應瀏覽器協力廠商 Cookie 限制。 MSAL.js 2.0+不支援隱含授與流程。

  1. 在 Microsoft Entra 系統管理中心中,選取您在建立應用程式註冊中建立的應用程式註冊。
  2. 在 [管理] 底下,選取 [驗證]>[新增平台]
  3. 在 [Web 應用程式] 底下,選取 [單頁應用程式] 圖格。
  4. 在 [重新導向 URI] 底下,輸入重新導向 URI。 請不要選取 [隱含授與及混合式流程] 底下的任一核取方塊。
  5. 選取 [設定] 以完成新增重新導向 URI。

您的 SPA 現在已向重新導向 URI 註冊。 透過使用 [新增平台] 窗格中的 [單頁應用程式] 圖格來設定您的重新導向 URI,您的應用程式註冊支援使用 PKCE 和 CORS 的授權碼流程。

重新導向 URI:具有隱含流程的 MSAL.js 1.0

請遵循這些步驟,針對使用 MSAL.js 1.3 或更早版本及隱含授與流程的 SPA 新增重新導向 URI。 使用 MSAL.js 1.3 或更早版本的應用程式不支援驗證碼流程。

  1. 在 Microsoft Entra 系統管理中心中,選取您在建立應用程式註冊中建立的應用程式註冊。
  2. 在 [管理] 底下,選取 [驗證]>[新增平台]
  3. 在 [Web 應用程式] 底下,選取 [單頁應用程式] 圖格。
  4. 在 [重新導向 URI] 底下,輸入重新導向 URI
  5. 啟用 [隱含授與及混合式流程]
    • 如果您的應用程式會登入使用者,請選取 [識別碼權杖]
    • 如果您的應用程式也需要呼叫受保護的 Web API,請選取 [存取權杖]。 如需有關這些權杖類型的詳細資訊,請參閱識別碼權杖存取權杖
  6. 選取 [設定] 以完成新增重新導向 URI。

您的 SPA 現在已向重新導向 URI 註冊。 藉由個別或同時選取 [識別碼權杖] 和 [存取權杖],您的應用程式註冊支援隱含授與流程。

授權流程的相關注意事項

根據預設,使用 SPA 平台設定所建立的應用程式註冊,會啟用授權碼流程。 若要利用此流程,應用程式必須使用 MSAL.js 2.0 或更新版本。

使用 MSAL.js 1.3 的 SPA 僅限使用隱含授與流程。 目前的 OAuth 2.0 最佳做法建議針對 SPA 使用授權碼流程,而不是隱含流程。 具備有限存留期的重新整理權杖也可協助您的應用程式適應新式瀏覽器 Cookie 隱私權限制,例如 Safari ITP。

當應用程式註冊所代表的所有生產 SPA 都使用 MSAL.js 2.0 和授權碼流程時,請取消選取 Microsoft Entra admin 中應用程式註冊 [驗證] 窗格的隱含授與設定。 如果您仍然使用 MSAL.js 1.x 的 SPA,請保持啟用隱含流程(已核取)。

下一步

設定應用程式的程式碼,以使用您建立的應用程式註冊:應用程式的程式碼設定