Início rápido: Conectar e obter um token de acesso em um SPA Angular usando o fluxo de código de autenticação

  • Artigo

Seja bem-vindo! Essa provavelmente não é a página que você esperava. Enquanto trabalhamos em uma correção, este link direcionará você para o artigo certo:

Início Rápido: Conectar usuários em um aplicativo de página única (SPA) por meio do fluxo do código de autorização com a Chave de Prova para Troca de Código (PKCE) usando o Angular

Pedimos desculpas pela inconveniência e agradecemos sua paciência enquanto trabalhamos para resolver isso.

Neste guia de início rápido, você baixará e executará um exemplo de código que demonstra como um SPA (aplicativo de página única) JavaScript Angular pode conectar usuários e chamar o Microsoft Graph usando o fluxo de código de autorização. O exemplo de código demonstra como obter um token de acesso para chamar a API do Microsoft Graph ou qualquer API Web.

Confira Como o exemplo funciona para ver uma ilustração.

Este início rápido usa o MSAL Angular v2 com o fluxo de código de autorização.

Pré-requisitos

Etapa 1: Configurar seu aplicativo no portal do Azure

Para que o exemplo de código deste guia de início rápido funcione, adicione um URI de Redirecionamento igual a http://localhost:4200/.

Fazer essas alterações para mim

Already configured Seu aplicativo já está configurado com estes atributos >.

Etapa 2: Baixe o projeto

Executar o projeto com um servidor Web usando o Node.js

Baixe o exemplo de código

Observação

Enter_the_Supported_Account_Info_Here

Etapa 3: seu aplicativo está configurado e pronto para ser executado

Configuramos seu projeto com os valores das propriedades do seu aplicativo.

Etapa 4: Executar o projeto

Execute o projeto com um servidor Web usando o Node.js:

  1. Para iniciar o servidor, execute os seguintes comandos no diretório do projeto:

    npm install
npm start

  2. Navegue até http://localhost:4200/.

  3. Selecione Fazer logon para iniciar o processo de conexão e chame a API do Microsoft Graph.

    Na primeira vez em que entrar, você deverá fornecer seu consentimento para permitir que o aplicativo acesse seu perfil e conecte você. Depois que você tiver entrado com êxito, clique no botão Perfil para exibir as informações do usuário na página.

Mais informações

Como o exemplo funciona

Diagram showing the authorization code flow for a single-page application.

msal.js

A biblioteca MSAL.js conecta usuários e solicita os tokens que são usados para acessar uma API protegida pela plataforma de identidade da Microsoft.

Se tiver instalado o Node.js, você poderá baixar a versão mais recente usando o npm (Gerenciador de Pacotes do Node.js):

npm install @azure/msal-browser @azure/msal-angular@2

Próximas etapas

Para obter um guia passo a passo detalhado sobre como criar o aplicativo de fluxo de código usando o Vanilla JavaScript, confira o seguinte tutorial:

Tutorial para entrar e chamar o MS Graph