案例:單頁應用程式

瞭解建立單一頁面應用程式 (SPA) 所需的一切。 如需 Azure 靜態 Web Apps 的相關指示,請改 為參閱靜態 Web Apps 的驗證與授權

開始使用

如果您還沒有這麼做,請完成 JavaScript SPA 快速入門以建立您的第一個應用程式:

快速入門:單一頁面應用程式

概觀

許多新式 web 應用程式都是以用戶端的單一頁面應用程式來建立。 開發人員可以使用 JavaScript 或 SPA 架構 (例如 Angular、Vue 和 React) 來撰寫這些應用程式。 這些應用程式會在網頁瀏覽器上執行,且具有與傳統伺服器端 Web 應用程式不同的驗證特性。

Microsoft 身分識別平臺提供 兩個 選項,可讓單一頁面應用程式登入使用者,並取得權杖來存取後端服務或 web api:

  • OAuth 2.0 授權碼流程 (使用 PKCE)。 授權碼流程可讓應用程式針對代表已驗證使用者的 識別碼 權杖,以及呼叫受保護 API 所需的 存取 權杖,交換授權碼。

    程式碼 Exchange (或 PKCE)的證明金鑰是授權碼流程的延伸模組,可防止授權碼插入式攻擊。 此 IETF 標準可減少授權碼遭到攔截的威脅,並可從公開用戶端安全地進行 OAuth 交換,如 RFC 7636中所述。 此外,它會傳回重新 整理權杖, 以代表使用者提供資源的長期存取權,而不需要與使用者互動。

    搭配 PKCE 使用授權碼流程是更安全和 建議 的授權方法,不僅是在原生和以瀏覽器為基礎的 JavaScript 應用程式中,也適用于其他所有類型的 OAuth 用戶端。

Single-page applications-auth

  • OAuth 2.0 隱含流程。 隱含授與流程可讓應用程式取得 識別碼存取 權杖。 不同於授權碼流程,隱含授與流程不會傳回 重新整理權杖

Single-page applications-implicit

此驗證流程不包含使用跨平台 JavaScript 架構 (例如 Electron 和 React-Native) 的應用程式案例。 它們需要進一步的功能來與原生平臺互動。

特性

若要為您的應用程式啟用此案例,您需要:

  • 使用 Azure Active Directory (Azure AD) 註冊應用程式。 隱含授與流程與授權碼流程之間的註冊步驟不同。
  • 使用已註冊應用程式屬性的應用程式設定,例如應用程式識別碼。
  • 使用適用于 JavaScript 的 Microsoft 驗證程式庫 (MSAL.js) 來進行驗證流程,以登入並取得權杖。

如果您不熟悉身分識別和存取管理 (IAM) 與 OAuth 2.0 和 OpenID Connect,或甚至剛接觸到 Microsoft 身分識別平臺上的 IAM,則閱讀清單中的下列一組文章應該會很高。

雖然在完成您的第一個快速入門或教學課程之前不需要閱讀,但它們涵蓋了平臺不可或缺的主題,並熟悉這些主題將可在您建立更複雜的案例時,協助您在路徑上。

Microsoft 身分識別平台

下一步

請移至此案例的 應用程式註冊中的下一篇文章。