案例:單頁應用程式

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

開始使用

如果您還沒有這麼做,請完成 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) 來進行驗證流程,以登入並取得權杖。

若您不熟悉使用 OAuth 2.0 與 OpenID Connect 的身分識別與存取管理 (IAM),或甚至第一次使用 Microsoft 身分識別平台上的 IAM,則應將下列文章集優先加入您的閱讀清單。

雖然在完成您的第一個快速入門或教學課程之前不需要閱讀,但這些文章涵蓋平台不可或缺的主題,而且熟悉這些主題將可在建置更複雜的案例時,協助您順利進行。

Microsoft 身分識別平台

後續步驟

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