Partilhar via


Guia de início rápido: entre usuários e obtenha um token de acesso em um SPA JavaScript usando o fluxo de código de autenticação com PKCE

Boas-vindas! Esta provavelmente não é a página que você estava esperando. Enquanto trabalhamos em uma correção, este link deve levá-lo ao artigo certo:

Início rápido: iniciar sessão dos utilizadores em aplicações de página única (SPA) através do fluxo de código de autorização com PKCE (Proof Key for Code Exchange) utilizando JavaScript

Pedimos desculpas pelo inconveniente e agradecemos a sua paciência enquanto trabalhamos para resolver este problema.

Neste guia rápido, o utilizador baixa e executa um exemplo de código que demonstra como uma aplicação de página única (SPA) em JavaScript pode autenticar utilizadores e chamar o Microsoft Graph utilizando o fluxo de autorização de código com PKCE (Proof Key for Code Exchange). O exemplo de código demonstra como obter um token de acesso para chamar a API do Microsoft Graph ou qualquer API da Web.

Consulte Como funciona o exemplo para obter uma ilustração.

Pré-requisitos

Etapa 1: Configurar seu aplicativo no portal do Azure

Para que o exemplo de código neste início rápido funcione, adicione um URI de redirecionamento de http://localhost:3000/.

Já configurado Seu aplicativo está configurado com esses atributos.

Passo 2: Transferir o projeto

Execute o projeto com um servidor Web usando Node.js

Nota

Enter_the_Supported_Account_Info_Here

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

Configuramos o seu projeto com valores das propriedades da sua aplicação.

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

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

    npm install
    npm start
    
  2. Aceda a http://localhost:3000/.

  3. Selecione Entrar para iniciar o processo de entrada e chame a API do Microsoft Graph.

    Na primeira vez que iniciar sessão, ser-lhe-á pedido que forneça o seu consentimento para permitir que a aplicação aceda ao seu perfil e inicie sessão. Depois de iniciar sessão com êxito, as informações do seu perfil de utilizador são apresentadas na página.

Mais informações

Como funciona a amostra

Diagrama mostrando o fluxo de código de autorização para um aplicativo de página única.

MSAL.js

A biblioteca MSAL.js faz login dos utilizadores e solicita os tokens usados para aceder a uma API protegida pela plataforma de identidade da Microsoft >. O arquivo index.html do exemplo contém uma referência à biblioteca:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

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

npm install @azure/msal-browser

Próximos passos

Para obter um guia passo a passo detalhado sobre como criar o aplicativo de fluxo de código de autenticação usando o React, consulte o seguinte tutorial: