Quickstart: Inscreva-se nos utilizadores em aplicações de uma só página (SPA) através do fluxo de código de autorização

Neste arranque rápido, você descarrega e execute uma amostra de código que demonstra como uma aplicação de Angular javaScript (SPA) pode iniciar síssição nos utilizadores e chamar Microsoft Gráfico usando o fluxo de código de autorização. A amostra de código demonstra como obter um token de acesso para ligar para o Microsoft Graph API ou qualquer API web.

Veja como a amostra funciona para uma ilustração.

Este quickstart utiliza MSAL Angular v2 com o fluxo de código de autorização.

Pré-requisitos

Registe-se e baixe a sua aplicação de arranque rápido

Para iniciar a sua aplicação de arranque rápido, utilize qualquer uma das seguintes opções.

Opção 1 (Expresso): Registar e configurar automaticamente a sua app e, em seguida, descarregar a sua amostra de código

  1. Vá ao portal do Azure - Registos de aplicações experiência de arranque rápido.
  2. Introduza um nome para a aplicação.
  3. Nos tipos de conta suportados, selecione Contas em qualquer diretório organizacional e contas pessoais Microsoft.
  4. Selecione Registar.
  5. Vá ao painel de arranque rápido e siga as instruções para descarregar e configurar automaticamente a sua nova aplicação.

Opção 2 (Manual): Registar e configurar manualmente a sua aplicação e amostra de código

Passo 1: Registar a aplicação

  1. Inicie sessão no portal do Azure.
  2. Se tiver acesso a vários inquilinos, utilize o filtro Diretório + subscrições no menu superior para mudar para o inquilino no qual pretende registar a inscrição.
  3. Procure e selecione Azure Active Directory.
  4. Em Gestão, selecione Registos de aplicações>Novo registo.
  5. Insira um Nome para a sua inscrição. Os utilizadores da sua aplicação podem ver este nome, e pode alterá-lo mais tarde.
  6. Nos tipos de conta suportados, selecione Contas em qualquer diretório organizacional e contas pessoais Microsoft.
  7. Selecione Registar. Na página de Visão Geral da aplicação, note o valor de ID da Aplicação (cliente) para utilização posterior.
  8. Em Gestão, selecione Autenticação.
  9. Nas configurações da Plataforma, selecione Adicionar uma plataforma. No painel que abre selecione aplicação de página única.
  10. Desa estava o valor de REDIRECIONamento URIs para http://localhost:4200/. Esta é a porta padrão que o NodeJS irá ouvir na sua máquina local. Devolveremos a resposta de autenticação a este URI depois de autenticar com sucesso o utilizador.
  11. Selecione Configurar para aplicar as alterações.
  12. Nas Configurações da Plataforma expandem a aplicação de página única.
  13. Confirme que nos tipos de Subvençãojá configurado o seu URI de redirecionamento é elegível para o Fluxo de Código de Autorização com PKCE.

Passo 2: Transferir o projeto

Para executar o projeto com um servidor web utilizando Node.js, descarregue os ficheiros do projeto principal.

Passo 3: Configurar a sua aplicação JavaScript

Na pasta src , abra a pasta da aplicação e, em seguida, abra o ficheiro app.module.ts e atualize o clientID, authoritye redirectUri valores no auth objeto.

// MSAL instance to be passed to msal-angular
export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'Enter_the_Application_Id_Here',
      authority: 'Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here',
      redirectUri: 'Enter_the_Redirect_Uri_Here'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11     },
  });
}

Modifique os valores na auth secção descrita aqui:

  • Enter_the_Application_Id_Here é o ID de Aplicação (cliente) para o formulário que registou.

    Para encontrar o valor do ID da Aplicação (cliente), aceda à página geral do registo da aplicação no portal do Azure.

  • Enter_the_Cloud_Instance_Id_Here é o exemplo da nuvem Azure. Para a nuvem Azure principal ou global, entre https://login.microsoftonline.com. Para nuvens nacionais (por exemplo, China), ver nuvens nacionais.

  • Enter_the_Tenant_info_here é definido para um dos seguintes:

    • Se a sua candidatura suporta contas neste diretório organizacional, substitua este valor pelo ID do Inquilino ou nome do Inquilino. Por exemplo, contoso.microsoft.com.

    Para encontrar o valor do ID do Diretório (inquilino), aceda à página geral do registo da aplicação na portal do Azure.

    • Se a sua candidatura suportar contas em qualquer diretório organizacional, substitua este valor por organizations.
    • Se a sua candidatura suportar contas em qualquer diretório organizacional e contas pessoais Microsoft, substitua este valor por common. Para este arranque rápido, use common.
    • Para restringir apenas o suporte a contas de Microsoft pessoais, substitua este valor por consumers.

    Para encontrar o valor dos tipos de conta suportados, aceda à página geral do registo da aplicação no portal do Azure.

  • Enter_the_Redirect_Uri_Here é http://localhost:4200/.

O authority valor no seu app.module.ts deve ser semelhante ao seguinte se estiver a usar a nuvem Azure principal (global):

authority: "https://login.microsoftonline.com/common",

Percorra o mesmo ficheiro e atualize o graphMeEndpoint.

  • Substitua a corda Enter_the_Graph_Endpoint_Herev1.0/me por https://graph.microsoft.com/v1.0/me
  • Enter_the_Graph_Endpoint_Herev1.0/me é o ponto final que as chamadas da API serão feitas contra. Para o serviço principal (global) Microsoft Graph API, insira https://graph.microsoft.com/ (inclua o corte dianteiro). Para obter mais informações, consulte a documentação.
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

Passo 4: Executar o projeto

Executar o projeto com um servidor web utilizando Node.js:

  1. Para iniciar o servidor, executar os seguintes comandos a partir do diretório do projeto:

    npm install
    npm start
    
  2. Navegue para http://localhost:4200/.

  3. Selecione Iniciar sessão para iniciar o processo de início de sessão e, em seguida, ligue para o Microsoft Graph API.

    A primeira vez que iniciar sessão, é solicitado que forneça o seu consentimento para permitir que a aplicação aceda ao seu perfil e o inscreva. Depois de ter assinado com sucesso, clique no botão Perfil para mostrar as informações do utilizador na página.

Mais informações

Como funciona a amostra

Diagrama que mostra o fluxo de código de autorização para uma aplicação de uma página.

msal.js

O MSAL.js sinais de biblioteca nos utilizadores e pede os tokens que são usados para aceder a uma API que está protegida pelo plataforma de identidades da Microsoft.

Se tiver Node.js instalado, pode descarregar a versão mais recente utilizando o Node.js Package Manager (npm):

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

Passos seguintes

Para obter um guia passo a passo detalhado sobre a construção da aplicação de fluxo de código auth utilizando o JavaScript de baunilha, consulte o seguinte tutorial:

Neste arranque rápido, descarrega e executa uma amostra de código que demonstra como uma aplicação de página única JavaScript (SPA) pode assinar nos utilizadores e ligar Microsoft Graph usando o fluxo de código de autorização com chave de prova para troca de código (PKCE). A amostra de código demonstra como obter um token de acesso para ligar para o Microsoft Graph API ou qualquer API web.

Veja como a amostra funciona para uma ilustração.

Pré-requisitos

Registe-se e baixe a sua aplicação de arranque rápido

Para iniciar a sua aplicação de arranque rápido, utilize qualquer uma das seguintes opções.

Opção 1 (Expresso): Registar e configurar automaticamente a sua app e, em seguida, descarregar a sua amostra de código

  1. Vai para a portal do Azure, Registos de aplicações.
  2. Introduza um nome para a aplicação.
  3. Nos tipos de conta suportados, selecione Contas em qualquer diretório organizacional e contas pessoais Microsoft.
  4. Selecione Registar.
  5. Vá ao painel de arranque rápido e siga as instruções para descarregar e configurar automaticamente a sua nova aplicação.

Opção 2 (Manual): Registar e configurar manualmente a sua aplicação e amostra de código

Passo 1: Registar a aplicação

  1. Inicie sessão no portal do Azure.
  2. Se tiver acesso a vários inquilinos, utilize o filtro Diretório + subscrições no menu superior para mudar para o inquilino no qual pretende registar a inscrição.
  3. Procure e selecione Azure Active Directory.
  4. Em Gestão, selecione Registos de aplicações>Novo registo.
  5. Insira um Nome para a sua inscrição. Os utilizadores da sua aplicação podem ver este nome, e pode alterá-lo mais tarde.
  6. Nos tipos de conta suportados, selecione Contas em qualquer diretório organizacional e contas pessoais Microsoft.
  7. Selecione Registar. Na página de Visão Geral da aplicação, note o valor de ID da Aplicação (cliente) para utilização posterior.
  8. Em Gestão, selecione Autenticação.
  9. Nas configurações da Plataforma, selecione Adicionar uma plataforma. No painel que abre selecione aplicação de página única.
  10. Desa estale o valor URI de redirecionamento para http://localhost:3000/.
  11. Selecione Configurar.

Passo 2: Transferir o projeto

Para executar o projeto com um servidor web utilizando Node.js, descarregue os ficheiros do projeto principal.

Passo 3: Configurar a sua aplicação JavaScript

Na pasta da aplicação , abra o ficheiro authConfig.js e, em seguida, atualize o clientID, authoritye redirectUri valores no msalConfig objeto.

// Config object to be passed to MSAL on creation
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
    redirectUri: "Enter_the_Redirect_Uri_Here",
  },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  }
};

Alterar os valores na msalConfig secção:

  • Enter_the_Application_Id_Here é o ID de Aplicação (cliente) para o formulário que registou.

    Para encontrar o valor do ID da Aplicação (cliente), aceda à página geral do registo da aplicação no portal do Azure.

  • Enter_the_Cloud_Instance_Id_Here é a instância da nuvem Azure. Para a nuvem Azure principal ou global, entre https://login.microsoftonline.com. Para nuvens nacionais (por exemplo, China), ver nuvens nacionais.

  • Enter_the_Tenant_info_here é um dos seguintes:

    • Se a sua candidatura suporta contas neste diretório organizacional, substitua este valor pelo ID do Inquilino ou nome do Inquilino. Por exemplo, contoso.microsoft.com.

    Para encontrar o valor do ID do Diretório (inquilino), aceda à página geral do registo da aplicação na portal do Azure.

    • Se a sua candidatura suportar contas em qualquer diretório organizacional, substitua este valor por organizations.
    • Se a sua candidatura suportar contas em qualquer diretório organizacional e contas pessoais Microsoft, substitua este valor por common. Para este arranque rápido, use common.
    • Para restringir apenas o suporte a contas de Microsoft pessoais, substitua este valor por consumers.

    Para encontrar o valor dos tipos de conta suportados, aceda à página geral do registo da aplicação no portal do Azure.

  • Enter_the_Redirect_Uri_Here é http://localhost:3000/.

O authority valor na sua authConfig.js deve ser semelhante ao seguinte se estiver a usar a nuvem Azure principal (global):

authority: "https://login.microsoftonline.com/common",

Em seguida, abra o ficheiro graphConfig.js para atualizar os graphMeEndpoint valores e graphMailEndpoint valores no apiConfig objeto.

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

Enter_the_Graph_Endpoint_Here é o ponto final que as chamadas da API são feitas contra. Para o serviço principal (global) Microsoft Graph API, insira https://graph.microsoft.com/ (inclua o corte dianteiro). Para obter mais informações sobre Microsoft Gráfico nas nuvens nacionais, consulte a implantação nacional de nuvens.

Se estiver a utilizar o serviço principal (global) Microsoft Graph API, os graphMeEndpoint valores e graphMailEndpoint valores no ficheiro graphConfig.js devem ser semelhantes aos seguintes:

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

Passo 4: Executar o projeto

Executar o projeto com um servidor web utilizando Node.js.

  1. Para iniciar o servidor, executar os seguintes comandos a partir do diretório do projeto:

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

  3. Selecione Iniciar s-in para iniciar o processo de início de inscrição e, em seguida, ligue para o Microsoft Graph API.

    A primeira vez que iniciar sessão, é solicitado que forneça o seu consentimento para permitir que a aplicação aceda ao seu perfil e o inscreva. Depois de ter sido assinado com sucesso, as informações do seu perfil de utilizador são apresentadas na página.

Mais informações

Como funciona a amostra

Diagrama que mostra o fluxo de código de autorização para uma aplicação de uma página.

MSAL.js

O MSAL.js sinais de biblioteca nos utilizadores e pede os tokens que são usados para aceder a uma API protegida por plataforma de identidades da Microsoft. O ficheiro index.html da amostra 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 tiver Node.js instalado, pode descarregar a versão mais recente utilizando o Node.js Package Manager (npm):

npm install @azure/msal-browser

Passos seguintes

Para um guia passo a passo mais detalhado sobre a construção da aplicação utilizada neste arranque rápido, consulte o seguinte tutorial:

Neste arranque rápido, você descarrega e execute uma amostra de código que demonstra como uma aplicação de React javaScript (SPA) pode iniciar síscrita nos utilizadores e chamar Microsoft Graph usando o fluxo de código de autorização. A amostra de código demonstra como obter um token de acesso para ligar para o Microsoft Graph API ou qualquer API web.

Veja como a amostra funciona para uma ilustração.

Pré-requisitos

Registe-se e baixe a sua aplicação de arranque rápido

Para iniciar a sua aplicação de arranque rápido, utilize qualquer uma das seguintes opções.

Opção 1 (Expresso): Registar e configurar automaticamente a sua app e, em seguida, descarregar a sua amostra de código

  1. Vá ao portal do Azure - Registos de aplicações experiência de arranque rápido.
  2. Introduza um nome para a aplicação.
  3. Nos tipos de conta suportados, selecione Contas em qualquer diretório organizacional e contas pessoais Microsoft.
  4. Selecione Registar.
  5. Vá ao painel de arranque rápido e siga as instruções para descarregar e configurar automaticamente a sua nova aplicação.

Opção 2 (Manual): Registar e configurar manualmente a sua aplicação e amostra de código

Passo 1: Registar a aplicação

  1. Inicie sessão no portal do Azure.
  2. Se tiver acesso a vários inquilinos, utilize o filtro Diretório + subscrições no menu superior para mudar para o inquilino no qual pretende registar a inscrição.
  3. Procure e selecione Azure Active Directory. Em Gestão, selecione Registos de aplicações>Novo registo.
  4. Quando a página Registar uma aplicação for apresentada, introduza um nome para a sua aplicação.
  5. Nos tipos de conta suportados, selecione Contas em qualquer diretório organizacional e contas pessoais Microsoft.
  6. Selecione Registar. Na página de Visão Geral da aplicação, note o valor de ID da Aplicação (cliente) para utilização posterior.
  7. Em Gestão, selecione Autenticação.
  8. Nas configurações da Plataforma, selecione Adicionar uma plataforma. No painel que abre selecione aplicação de página única.
  9. Desa estava o valor de REDIRECIONamento URIs para http://localhost:3000/. Esta é a porta padrão que o NodeJS irá ouvir na sua máquina local. Devolveremos a resposta de autenticação a este URI depois de autenticar com sucesso o utilizador.
  10. Selecione Configurar para aplicar as alterações.
  11. Nas Configurações da Plataforma expandem a aplicação de página única.
  12. Confirme que nos tipos de Subvençãojá configurado o seu URI de redirecionamento é elegível para o Fluxo de Código de Autorização com PKCE.

Passo 2: Transferir o projeto

Para executar o projeto com um servidor web utilizando Node.js, descarregue os ficheiros do projeto principal.

Passo 3: Configurar a sua aplicação JavaScript

Na pasta src , abra o ficheiro authConfig.js e atualize o clientID, authoritye redirectUri valores no msalConfig objeto.

/**
* Configuration object to be passed to MSAL instance on creation.
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
*/
export const msalConfig = {
   auth: {
       clientId: "Enter_the_Application_Id_Here",
       authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
       redirectUri: "Enter_the_Redirect_Uri_Here"
   },
   cache: {
       cacheLocation: "sessionStorage", // This configures where your cache will be stored
       storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
   },

Modifique os valores na msalConfig secção descrita aqui:

  • Enter_the_Application_Id_Here é o ID de Aplicação (cliente) para o formulário que registou.

    Para encontrar o valor do ID da Aplicação (cliente), aceda à página geral do registo da aplicação no portal do Azure.

  • Enter_the_Cloud_Instance_Id_Here é o exemplo da nuvem Azure. Para a nuvem Azure principal ou global, entre https://login.microsoftonline.com. Para nuvens nacionais (por exemplo, China), ver nuvens nacionais.

  • Enter_the_Tenant_info_here é definido para um dos seguintes:

    • Se a sua candidatura suporta contas neste diretório organizacional, substitua este valor pelo ID do Inquilino ou nome do Inquilino. Por exemplo, contoso.microsoft.com.

    Para encontrar o valor do ID do Diretório (inquilino), aceda à página geral do registo da aplicação na portal do Azure.

    • Se a sua candidatura suportar contas em qualquer diretório organizacional, substitua este valor por organizations.
    • Se a sua candidatura suportar contas em qualquer diretório organizacional e contas pessoais Microsoft, substitua este valor por common. Para este arranque rápido, use common.
    • Para restringir apenas o suporte a contas de Microsoft pessoais, substitua este valor por consumers.

    Para encontrar o valor dos tipos de conta suportados, aceda à página geral do registo da aplicação no portal do Azure.

  • Enter_the_Redirect_Uri_Here é http://localhost:3000/.

O authority valor na sua authConfig.js deve ser semelhante ao seguinte se estiver a usar a nuvem Azure principal (global):

authority: "https://login.microsoftonline.com/common",

Percorra o mesmo ficheiro e atualize o graphMeEndpoint.

  • Substitua a corda Enter_the_Graph_Endpoint_Herev1.0/me por https://graph.microsoft.com/v1.0/me
  • Enter_the_Graph_Endpoint_Herev1.0/me é o ponto final que as chamadas da API serão feitas contra. Para o serviço principal (global) Microsoft Graph API, insira https://graph.microsoft.com/ (inclua o corte dianteiro). Para obter mais informações, consulte a documentação.
  // Add here the endpoints for MS Graph API services you would like to use.
   export const graphConfig = {
       graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me"
   };

Passo 4: Executar o projeto

Executar o projeto com um servidor web utilizando Node.js:

  1. Para iniciar o servidor, executar os seguintes comandos a partir do diretório do projeto:

    npm install
    npm start
    
  2. Navegue para http://localhost:3000/.

  3. Selecione Iniciar s-in para iniciar o processo de início de inscrição e, em seguida, ligue para o Microsoft Graph API.

    A primeira vez que iniciar sessão, é solicitado que forneça o seu consentimento para permitir que a aplicação aceda ao seu perfil e o inscreva. Depois de ter assinado com sucesso, clique na Informação do Perfil de Pedido para mostrar as informações do seu perfil na página.

Mais informações

Como funciona a amostra

Diagrama que mostra o fluxo de código de autorização para uma aplicação de uma página.

msal.js

O MSAL.js sinais de biblioteca nos utilizadores e pede os tokens que são usados para aceder a uma API que está protegida pelo plataforma de identidades da Microsoft.

Se tiver Node.js instalado, pode descarregar a versão mais recente utilizando o Node.js Package Manager (npm):

npm install @azure/msal-browser @azure/msal-react

Passos seguintes

Em seguida, experimente um tutorial passo a passo para aprender a construir um SPA React de raiz que assina nos utilizadores e chama a Microsoft Graph API para obter dados do perfil do utilizador: