Cenário: Aplicativo de página única

Saiba tudo o que você precisa para criar um SPA (aplicativo de página única). Para obter instruções sobre os aplicativos Web estáticos do Azure, consulte Autenticação e autorização para aplicativos Web estáticos em vez disso.

Introdução

Se você ainda não fez isso, crie seu primeiro aplicativo ao concluir o início rápido do SPA (aplicativo de página única) JavaScript:

Início Rápido: aplicativo de página única

Visão geral

Muitos aplicativos Web modernos são criados como aplicativos de página única do lado do cliente. Os desenvolvedores os escrevem usando JavaScript ou uma estrutura SPA, como Angular, Vue e React. 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.

A plataforma de identidade da Microsoft fornece duas opções que permitem que aplicativos de página única conectem usuários e obtenham tokens para acessar serviços de back-end ou APIs Web:

  • Fluxo do código de autorização do OAuth 2.0 (com PKCE). O fluxo de código de autorização permite que o aplicativo troque um código de autorização para tokens de ID representarem o usuário autenticado e tokens de Acesso necessários para chamar APIs protegidas.

    A chave de prova para o código Exchange, ouPKCE, é uma extensão para o fluxo de código de autorização para evitar ataques de injeção de código de autorização. Esse padrão IETF atenua a ameaça de ter um código de autorização interceptado e permite o intercâmbio OAuth seguro de clientes públicos, conforme documentado em RFC 7636. Além disso, ele retorna tokens de Atualização que fornecem acesso de longo prazo a recursos em nome de usuários sem exigir interação desses usuários.

    Usar o fluxo de código de autorização com o PKCE é a abordagem de autorização mais segura e recomendada, não apenas em aplicativos JavaScript nativos e baseados em navegador, mas para todos os outros tipos de clientes OAuth.

Single-page applications-auth

  • Fluxo implícito do OAuth 2.0. O fluxo de concessão implícita permite que o aplicativo obtenha os tokens de ID e Acesso. Diferentemente do fluxo de código de autorização, o fluxo de concessão implícita não retorna um token de Atualização.

Single-page applications-implicit

Esse fluxo de autenticação não inclui cenários de aplicativos que usam estruturas JavaScript de multiplataforma, como o Electron e React-Native. Eles exigem mais funcionalidades para interação com as plataformas nativas.

Especificações

Para habilitar esse cenário em seu aplicativo, você precisa do seguinte:

  • Registro de aplicativo com o Azure AD (Azure Active Directory). As etapas do registro diferem entre o fluxo de concessão implícita e o fluxo de código de autorização.
  • Configuração de aplicativo com as propriedades do aplicativo registrado, como a ID.
  • Usar a MSAL.js (Biblioteca de Autenticação da Microsoft para JavaScript) a fim de fazer o fluxo de autenticação para entrar e adquirir tokens.

Se você é novo no gerenciamento de identidades e acesso (IAM) com o OAuth 2.0 e o OpenID Connect, ou até mesmo apenas no IAM na plataforma de identidade da Microsoft, o seguinte conjunto de artigos deve ter destaque na sua lista de leitura.

Embora não seja obrigatório ler antes de concluir seu primeiro início rápido ou tutorial, eles abrangem os tópicos integrantes da plataforma e a familiaridade com eles o ajudará no seu caminho à medida que você criar cenários mais complexos.

Próximas etapas

Vá para o próximo artigo neste cenário, Registro de aplicativo.