方案:单页应用程序Scenario: Single-page application

了解生成单页应用程序 (SPA) 所需的一切。Learn all you need to build a single-page application (SPA).

入门Getting started

如果尚未创建你的首个应用,请通过完成 Javascript SPA 快速入门创建:If you haven't already, create your first app by completing the JavaScript SPA quickstart:

快速入门:单页应用程序Quickstart: Single-page application

概述Overview

许多新式 Web 应用程序都是作为客户端单页应用程序构建的。Many modern web applications are built as client-side single-page applications. 开发人员使用 JavaScript 或 SPA 框架(例如 Angular、Vue 和 React)来编写它们。Developers write them by using JavaScript or a SPA framework such as Angular, Vue, and React. 这些应用程序在 Web 浏览器上运行,与传统的服务器端 Web 应用程序相比,它们具有不同的身份验证特征。These applications run on a web browser and have different authentication characteristics than traditional server-side web applications.

Microsoft 标识平台提供了 两个 选项来允许单页应用程序登录用户并获取用于访问后端服务或 Web API 的令牌。The Microsoft identity platform provides two options to enable single-page applications to sign in users and get tokens to access back-end services or web APIs:

  • OAuth 2.0 授权代码流(使用 PKCE)OAuth 2.0 Authorization code flow (with PKCE). 授权代码流允许应用程序用授权代码来交换 ID 令牌(表示已经过身份验证的用户),以及交换调用受保护 API 所需的 访问 令牌。The authorization code flow allows the application to exchange an authorization code for ID tokens to represent the authenticated user and Access tokens needed to call protected APIs. 此外,它还返回 刷新 令牌,这类令牌提供以用户身份长期访问资源而无需与这些用户交互的权限。In addition, it returns Refresh tokens that provide long-term access to resources on behalf of users without requiring interaction with those users. 这是 建议的 做法。This is the recommended approach.

单页应用程序 - 授权

  • OAuth 2.0 隐式流OAuth 2.0 implicit flow. 隐式授权流允许应用程序获取 ID访问 令牌。The implicit grant flow allows the application to get ID and Access tokens. 与授权代码流不同,隐式授权流不会返回 刷新令牌Unlike the authorization code flow, implicit grant flow does not return a Refresh token.

单页应用程序 - 隐式

此身份验证流不包括使用 Electron 和 React-Native 之类的跨平台 JavaScript 框架的应用程序方案。This authentication flow does not include application scenarios that use cross-platform JavaScript frameworks such as Electron and React-Native. 它们需要使用其他功能才能与本机平台交互。They require further capabilities for interaction with the native platforms.

详情Specifics

若要为应用程序启用此方案,需要:To enable this scenario for your application, you need:

  • 通过 Azure Active Directory (Azure AD) 进行应用程序注册。Application registration with Azure Active Directory (Azure AD). 在隐式授权流和授权代码流的注册步骤不同。The registration steps differ between the implicit grant flow and authorization code flow.
  • 带有注册的应用程序属性(例如应用程序 ID)的应用程序配置。Application configuration with the registered application properties, such as the application ID.
  • 使用适用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js) 执行身份验证流以登录并获取令牌。Using Microsoft Authentication Library for JavaScript (MSAL.js) to do the authentication flow to sign in and acquire tokens.

如果你不熟悉 OAuth 2.0 和 OpenID Connect 的标识和访问管理 (IAM),甚至不熟悉 Microsoft 标识平台上的 IAM,请将下列文章加入你的阅读列表。If you're new to identity and access management (IAM) with OAuth 2.0 and OpenID Connect, or even just new to IAM on the Microsoft identity platform, the following set of articles should be high on your reading list.

虽然在完成第一个快速入门或教程之前不需要阅读这些文章,但是它们涵盖了平台不可或缺的主题,熟悉它们将有助于构建更复杂的方案。Although not required reading before completing your first quickstart or tutorial, they cover topics integral to the platform, and familiarity with them will help you on your path as you build more complex scenarios.

后续步骤Next steps

转到此方案中的下一篇文章:应用注册Move on to the next article in this scenario, App registration.