Cenário: Aplicativo de página únicaScenario: Single-page application

Saiba tudo o que você precisa para criar um aplicativo de página única (SPA).Learn all you need to build a single-page application (SPA).

Pré-requisitosPrerequisites

Antes de ler este artigo, você deve estar familiarizado com os conceitos a seguir ou leia os seguintes artigos:Before reading this article, you should be familiar with the following concepts or read the following articles:

IntroduçãoGetting started

Você pode criar seu primeiro aplicativo seguindo o início rápido de SPA do JavaScript:You can create your first application by following the JavaScript SPA quickstart:

Visão geralOverview

Muitos aplicativos Web modernos são criados como aplicativos de página única do lado do cliente escritos usando JavaScript ou uma estrutura SPA, tal como Angular, Vue.js e React.js.Many modern web applications are built as client-side single-page applications written using JavaScript or a SPA framework such as Angular, Vue.js, and React.js. Esses aplicativos são executados em um navegador da Web e têm características de autenticação diferentes dos aplicativos Web do lado do servidor tradicionais.These applications run in a web browser and have different authentication characteristics than traditional server-side web applications. A plataforma de identidade da Microsoft permite que aplicativos de página única conectem usuários e obtenham tokens para acessar serviços de back-end ou APIs Web usando o fluxo implícito do OAuth 2,0.The Microsoft identity platform enables single-page applications to sign in users and get tokens to access backend services or web APIs using the OAuth 2.0 implicit flow. O fluxo implícito permite que o aplicativo obtenha tokens de ID para representar o usuário autenticado e também os tokens de acesso necessários para chamar APIs protegidas.The implicit flow allows the application to get ID tokens to represent the authenticated user and also access tokens needed to call protected APIs.

Aplicativos de página única

Esse fluxo de autenticação não inclui cenários de aplicativos que usam estruturas JavaScript de plataforma cruzada, como o ar-nativo, reagir e assim por diante.This authentication flow does not include application scenarios using cross-platform JavaScript frameworks such as Electron, React-Native and so on. como eles exigem mais recursos para interação com as plataformas nativas.since they require further capabilities for interaction with the native platforms.

EspecificaçõesSpecifics

Os seguintes aspectos são necessários para habilitar esse cenário para seu aplicativo:The following aspects are required to enable this scenario for your application:

  • O registro de aplicativo com o AD do Azure envolve habilitar o fluxo implícito e definir um URI de redirecionamento para o qual os tokens são retornados.Application registration with Azure AD involves enabling the implicit flow and setting a redirect URI to which tokens are returned.
  • Configuração de aplicativo com as propriedades do aplicativo registrado, como a ID do aplicativo.Application configuration with the registered application properties such as Application ID.
  • Usando a biblioteca MSAL para fazer o fluxo de autenticação para entrar e adquirir tokens.Using MSAL library to do the auth flow to sign in and acquire tokens.

Próximas etapasNext steps