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

若要在Microsoft 身分識別平臺中註冊單頁應用程式(SPA),請完成下列步驟。 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 版本的步驟:

重新導向 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 或更早版本和隱含授與流程的單頁應用程式新增重新導向 URI。 使用 MSAL.js 1.3 或更早版本的應用程式不支援驗證碼流程。

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

您現在已完成單頁應用程式 (SPA) 的註冊,並設定將重新導向用戶端的重新導向 URI,並將傳送任何安全性權杖。 藉由選取一或兩個識別碼 權杖和 存取權杖 ,您就已啟用隱含授與流程。

關於授權流程的注意事項

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

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

當應用程式註冊代表的所有生產單頁應用程式都使用 MSAL.js 2.0 和授權碼流程時,請在 Microsoft Entra 系統管理中心的應用程式註冊的 [驗證 ] 窗格中取消核取隱含授與設定。 如果您使用 MSAL.js 1.x 和隱含流程的應用程式可以繼續運作,不過,如果您保持啟用隱含流程(已核取)。

下一步

設定應用程式的程式碼,以使用您在先前步驟中建立的應用程式註冊: 應用程式的程式碼設定