Início Rápido: Conectar usuários em um aplicativo Web de exemplo

Aplica-se a: Locatários da força de trabalho Locatários externos (saiba mais)

Neste guia de início rápido, você usará um aplicativo Web de exemplo para mostrar como fazer login de usuários e chamar a API do Microsoft Graph no seu locatário corporativo. O aplicativo de exemplo usa a Biblioteca de Autenticação da Microsoft para lidar com a autenticação.

Antes de começar, use o seletor Escolher um tipo de locatário na parte superior desta página para selecionar o tipo de locatário. A ID do Microsoft Entra fornece duas configurações de locatário, força de trabalho e externo. Uma configuração de tenant de força de trabalho é para seus funcionários, aplicativos internos e outros recursos organizacionais. Um locatário externo é para seus aplicativos voltados para o cliente.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se você ainda não tiver uma, crie uma conta gratuitamente.
• Essa conta do Azure deve ter permissões para gerenciar aplicativos. Qualquer uma das seguintes funções do Microsoft Entra inclui as permissões necessárias:
  • Administrador de aplicativos
  • Desenvolvedor de aplicativos
• Um componente da força de trabalho. Você pode usar o Diretório Padrão ou configurar um novo locatário.
• Visual Studio Code ou outro editor de código.

Nó

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: http://localhost:3000/auth/redirect
  • URL de logoff do canal frontal: https://localhost:5001/signout-callback-oidc
• Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo.
• Node.js

ASP.NET Core

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: https://localhost:5001/signin-oidc
  • URL de logoff do canal frontal: https://localhost:5001/signout-callback-oidc
• Adicione um certificado autoassinado ao registro do aplicativo. Não use certificados autoassinados em aplicativos de produção. Em vez disso, use um certificado de uma autoridade de certificação confiável ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo. Crie o certificado usando o seguinte comando:

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• Um requisito mínimo do SDK do .NET 8.0

Python Flask

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: http://localhost:5000/getAToken
• Python 3 +
• Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo.

Clonar ou baixar um aplicativo Web de exemplo

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip .

Nó

• Baixe o arquivo .zip e, em seguida, extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres ou clone o repositório:

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

  git clone https://github.com/Azure-Samples/ms-identity-node.git
  

ASP.NET Core

• Baixe o arquivo .zip e, em seguida, extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres ou clone o repositório:

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

Python Flask

• Baixe o exemplo de código python e, em seguida, extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres ou clone o repositório:

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

git clone https://github.com/Azure-Samples/ms-identity-docs-code-python/

Configurar o aplicativo Web de exemplo

Para conectar usuários com o aplicativo de exemplo, você precisa atualizá-lo com seus detalhes do aplicativo e do locatário:

Nó

Na pasta ms-identity-node, abra o arquivo App/.env e substitua as seguintes variáveis:

Variable	Description	Exemplo(s)
Enter_the_Cloud_Instance_Id_Here	A instância de nuvem do Azure na qual seu aplicativo está registrado	https://login.microsoftonline.com/ (inclua a barra "/" à direita)
Enter_the_Tenant_Info_here	ID do locatário ou domínio primário	contoso.microsoft.com ou aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	ID do cliente do aplicativo que você registrou	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Segredo do cliente da aplicação que você registrou	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	A instância de nuvem da API do Microsoft Graph que seu aplicativo chama	https://graph.microsoft.com/ (inclua a barra "/" à direita)
Enter_the_Express_Session_Secret_Here	Uma cadeia aleatória de caracteres usada para assinar o cookie de sessão Express	A1b-C2d_E3f.H4...

Depois de fazer alterações, o arquivo deverá ser semelhante ao seguinte snippet:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

1. No IDE, abra a pasta do projeto, ms-identity-docs-code-dotnet\web-app-aspnet, que contém o exemplo.

2. Abra appsettings.json e substitua o conteúdo do arquivo pelo snippet a seguir;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId - O identificador do locatário em que o aplicativo está registrado. Substitua o texto entre aspas pelo Directory (tenant) ID que foi registrado anteriormente na página de visão geral do aplicativo registrado.
   • ClientId - O identificador do aplicativo, também conhecido como o cliente. Substitua o texto entre aspas pelo valor Application (client) ID registrado anteriormente na página de visão geral do aplicativo registrado.
   • ClientCertificates - Um certificado autoassinado é usado para autenticação no aplicativo. Substitua o texto do CertificateThumbprint pela impressão digital do certificado que foi gravado anteriormente.

Python Flask

1. Abra o aplicativo baixado em um IDE e navegue até a pasta raiz do aplicativo de exemplo.

   cd flask-web-app
   

2. Crie um arquivo .env na pasta raiz do projeto usando .env.sample.entra-id como guia.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Defina o valor de CLIENT_ID como o ID do aplicativo (cliente) para o aplicativo registrado, disponível na página de visão geral.
   • Defina o valor do segredo do CLIENT_SECRET cliente que você criou nos Certificados &Segredos do aplicativo registrado.
   • Defina o valor de AUTHORITY para um https://login.microsoftonline.com/<TENANT_GUID>. A ID do Diretório (locatário) está disponível na página de visão geral do registro do aplicativo.

   As variáveis de ambiente são referenciadas no app_config.py e são mantidas em um arquivo .env separado para mantê-las fora do controle do código-fonte. O arquivo .gitignore fornecido impede que o arquivo .env seja verificado.

Executar e testar um aplicativo Web de exemplo

Você configurou seu aplicativo de exemplo. Você pode continuar a executá-lo e testá-lo.

Nó

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

   cd App
   npm install
   npm start
   

2. Ir para http://localhost:3000/.

3. Selecione Entrar para iniciar o processo de entrada.

Na primeira vez que você entrar, você será solicitado a fornecer seu consentimento para permitir que o aplicativo faça login e acesse seu perfil. Depois de entrar com êxito, você será redirecionado de volta para a página inicial do aplicativo.

Como o aplicativo funciona

O exemplo hospeda um servidor Web no localhost, porta 3000. Quando um navegador da Web acessa esse endereço, o aplicativo renderiza a home page. Depois que o usuário seleciona Entrar, o aplicativo redireciona o navegador para a tela de login do Microsoft Entra, através da URL gerada pela biblioteca MSAL Node. Após o consentimento do usuário, o navegador redireciona o usuário de volta para a home page do aplicativo, juntamente com uma ID e um token de acesso.

ASP.NET Core

1. No diretório do projeto, use o terminal para inserir os seguintes comandos:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Copie a URL de https que aparece no terminal, por exemplo, https://localhost:5001e cole-a em um navegador. É recomendável usar uma sessão de navegador privada ou anônima.

3. Siga as etapas e insira os detalhes necessários para entrar com sua conta da Microsoft. É solicitado que você forneça um endereço de email para que uma senha única possa ser enviada a você. Insira o código quando solicitado.

4. O aplicativo solicita permissão para manter o acesso aos dados que você já autorizou, e para entrar no sistema e ler seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida. Isso indica que você está conectado ao aplicativo e está exibindo os detalhes do perfil da API do Microsoft Graph.

   

Sair do aplicativo

1. Encontre o link Sair no canto superior direito da página e selecione-o.
2. Será solicitado que você escolha uma conta da qual sair. Selecione a conta usada para entrar.
3. Uma mensagem é exibida indicando que você saiu. Agora você pode fechar a janela do navegador.

Python Flask

1. Crie um ambiente virtual para o aplicativo:

   • Para o Windows, execute os seguintes comandos:

   py -m venv .venv
   .venv\scripts\activate
   

   • Para macOS/Linux, execute os seguintes comandos:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Instale os requisitos usando pip:

   pip install -r requirements.txt
   

3. Execute o aplicativo na linha de comando. Verifique se o aplicativo está em execução na mesma porta que o URI de redirecionamento configurado anteriormente.

   flask run --debug --host=localhost --port=5000
   

4. Copie a URL https que aparece no terminal, por exemplo, https://localhost:5000e cole-a em um navegador. É recomendável usar uma sessão de navegador privada ou anônima.

5. Siga as etapas e insira os detalhes necessários para entrar com sua conta da Microsoft. É solicitado que você forneça um endereço de email e uma senha para entrar.

6. O aplicativo solicita permissão para manter o acesso aos dados aos quais você permite acesso e entrar e ler seu perfil, conforme mostrado na captura de tela. Selecione Aceitar.

   

7. A captura de tela a seguir é exibida, o que indica que você entrou com êxito no aplicativo.

Como o aplicativo funciona

O diagrama a seguir demonstra como o aplicativo de exemplo funciona:

1. O aplicativo usa o identity pacote para obter um token de acesso da plataforma de identidade da Microsoft. Esse pacote é criado com base na MSAL (Biblioteca de Autenticação da Microsoft) para Python para simplificar a autenticação e a autorização em aplicativos Web.

2. O token de acesso obtido na etapa anterior é usado como um token de portador para autenticar o usuário ao chamar a API do Microsoft Graph.

Conteúdo relacionado

Nó

• Saiba como criar um aplicativo Web Node.js que conecte usuários e chame a API do Microsoft Graph no Tutorial: conecte usuários e adquira um token para o Microsoft Graph em um aplicativo Web Node.js >Express.

ASP.NET Core

• Saiba como criar este aplicativo Web ASP.NET com o Tutorial da série : Registrar um aplicativo com a plataforma de identidade da Microsoft.
• Guia de início rápido: Proteger uma API Web ASP.NET Core com a plataforma de identidade da Microsoft.
• Início Rápido: Implantar um aplicativo Web ASP.NET no Serviço de Aplicativo do Azure

Python Flask

• Saiba como criar um aplicativo Web Python que conecte usuários e chame uma API Web protegida no Tutorial: aplicativo Web que inscreve usuários.

Neste início rápido, você usará um aplicativo Web de exemplo para mostrar como conectar usuários em seu locatário externo. O aplicativo de exemplo usa a Biblioteca de Autenticação da Microsoft para lidar com a autenticação.

Antes de começar, use o seletor Escolher um tipo de locatário na parte superior desta página para selecionar o tipo de locatário. A ID do Microsoft Entra fornece duas configurações de locatário, força de trabalho e externo. Uma configuração de tenant de força de trabalho é para seus funcionários, aplicativos internos e outros recursos organizacionais. Um locatário externo é para seus aplicativos voltados para o cliente.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se você ainda não tiver uma, crie uma conta gratuitamente.
• Essa conta do Azure deve ter permissões para gerenciar aplicativos. Qualquer uma das seguintes funções do Microsoft Entra inclui as permissões necessárias:
  • Administrador de aplicativos
  • Desenvolvedor de aplicativos
• Um inquilino externo. Para criar um, escolha entre os seguintes métodos:
  • Use a Extensão de ID externa do Microsoft Entra para configurar um locatário externo diretamente no Visual Studio Code. (Recomendado)
  • Crie um novo locatário externo no Centro de administração do Microsoft Entra.
• Um fluxo de usuário. Para obter mais informações, consulte Criar fluxos de usuário de inscrição de autoatendimento para os aplicativos nos locatários externos. Esse fluxo de usuário pode ser usado para vários aplicativos.
• Visual Studio Code ou outro editor de código.

Nó

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: http://localhost:3000/auth/redirect
  • URL de logoff do canal frontal: https://localhost:5001/signout-callback-oidc
• Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo.
• Adicionar seu aplicativo ao fluxo de usuário
• Node.js

ASP.NET Core

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: https://localhost:5001/signin-oidc
  • URL de logoff do canal frontal: https://localhost:5001/signout-callback-oidc
• Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo.
• Adicionar seu aplicativo ao fluxo de usuário
• Uma versão mínima do SDK do .NET 8.0.

Python Django

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: http://localhost:5000/getAToken
• Adicionar seu aplicativo ao fluxo de usuário
• Python 3 +
• Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo.

Python Flask

• Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
  • ID do aplicativo (cliente)
  • ID do diretório (locatário)
• Adicione as SEGUINTEs URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • URI de redirecionamento: http://localhost:5000/getAToken
• Adicionar seu aplicativo ao fluxo de usuário
• Python 3 +
• Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte adicionar credenciais ao seu aplicativo.

Clonar ou baixar um aplicativo Web de exemplo

Nó

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip:

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Como alternativa, baixe o arquivo de .zip de exemplo e, em seguida, extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Instale as dependências do projeto

1. Abra uma janela do console e altere para o diretório que contém o aplicativo de exemplo Node.js:

   cd 1-Authentication\5-sign-in-express\App
   

2. Execute os seguintes comandos para instalar as dependências do aplicativo:

   npm install
   

ASP.NET Core

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
  

• Baixe o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Python Django

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Baixe o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Instale as dependências do projeto

1. Abra uma janela do console e altere para o diretório que contém o aplicativo Web de exemplo do Flask:

   cd django-web-app
   

2. Configurar o ambiente virtual:

   • Para o Windows, execute os seguintes comandos:

   py -m venv .venv
   .venv\scripts\activate
   

   • Para macOS/Linux, execute os seguintes comandos:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Para instalar dependências de aplicativo, execute os seguintes comandos:

   python3 -m pip install -r requirements.txt
   

Python Flask

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

• Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Baixe o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Instale as dependências do projeto

1. Abra uma janela do console e altere para o diretório que contém o aplicativo Web de exemplo do Flask:

   cd flask-web-app
   

2. Configurar o ambiente virtual:

   • Para o Windows, execute os seguintes comandos:

   py -m venv .venv
   .venv\scripts\activate
   

   • Para macOS/Linux, execute os seguintes comandos:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Para instalar dependências de aplicativo, execute os seguintes comandos:

   python3 -m pip install -r requirements.txt
   

Configurar o aplicativo Web de exemplo

Para conectar usuários com o aplicativo de exemplo, você precisa atualizá-lo com seus detalhes do aplicativo e do locatário:

Nó

1. No editor de código, abra o arquivo App\authConfig.js do aplicativo.

2. Localize o marcador de posição:

   • Enter_the_Application_Id_Here e substitua pela ID de Aplicativo (Cliente) do aplicativo registrado anteriormente.
   • Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do Diretório (locatário). Por exemplo, se o domínio primário da sua conta for contoso.onmicrosoft.com, use contoso. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.
   • Enter_the_Client_Secret_Here e substitua-o pelo valor do segredo do aplicativo copiado anteriormente.

ASP.NET Core

1. Navegue até o diretório raiz que contém o aplicativo de exemplo do ASP.NET Core:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Abra o ficheiro appsettings.json .

3. No Authority, localize-o Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do seu locatário. Por exemplo, se o domínio primário do locatário for caseyjensen@onmicrosoft.com, o valor que você deve inserir será casyjensen.

4. Localize o Enter_the_Application_Id_Here valor e substitua-o pela ID do aplicativo (clientId) do aplicativo registrado no Centro de administração do Microsoft Entra.

5. Substitua Enter_the_Client_Secret_Here pelo valor do segredo do cliente que você configurou.

Python Django

1. Abra os arquivos do projeto no Visual Studio Code ou no editor que você está usando.

2. Crie um arquivo .env na pasta raiz do projeto usando o arquivo .env.sample.external-id como guia.

3. No arquivo .env , forneça as seguintes variáveis de ambiente:

   1. CLIENT_ID que é o ID do cliente do aplicativo que você registrou anteriormente.
   2. CLIENT_SECRET que é o valor do segredo do aplicativo copiado anteriormente.
   3. AUTHORITY que é a URL que identifica uma autoridade de token. Deve ser do formato https://{subdomínio}.ciamlogin.com/{subdomínio}.onmicrosoft.com. Substitua subdomínio pelo subdomínio do diretório (tenant). Por exemplo, se o domínio primário da sua conta for contoso.onmicrosoft.com, use contoso. Se você não tiver o subdomínio do locatário, saiba como ler os detalhes do seu locatário.
   4. REDIRECT_URI que deve ser semelhante ao URI de redirecionamento que você registrou anteriormente deve corresponder à sua configuração.

Python Flask

1. Abra os arquivos do projeto no Visual Studio Code ou no editor que você está usando.

2. Crie um arquivo .env na pasta raiz do projeto usando o arquivo .env.sample.external-id como guia.

3. No arquivo .env , forneça as seguintes variáveis de ambiente:

   • CLIENT_ID que é o ID de Aplicativo (cliente) do app que você registrou anteriormente.
   • CLIENT_SECRET que é o valor do segredo do aplicativo copiado anteriormente.
   • AUTHORITY que é a URL que identifica uma autoridade de token. Deve ser do formato https://{subdomínio}.ciamlogin.com/{subdomínio}.onmicrosoft.com. Substitua o subdomínio pelo subdomínio diretório (locatário). Por exemplo, se o domínio primário da sua conta for contoso.onmicrosoft.com, use contoso. Se você não tiver o subdomínio do locatário, saiba como ler os detalhes do seu locatário.

4. Confirme se o URI de redirecionamento está bem configurado. O URI de redirecionamento que você registrou deve corresponder à sua configuração. Este exemplo, por padrão, define o caminho do URI de redirecionamento como /getAToken. Essa configuração está no arquivo app_config.py como REDIRECT_PATH.

Executar e testar um aplicativo Web de exemplo

Nó

Agora você pode testar o exemplo Node.js aplicativo Web. Você precisa iniciar o servidor Node.js e acessá-lo por meio do navegador em http://localhost:3000.

1. No terminal, execute o seguinte comando:

   npm start 
   

2. Abra o navegador e vá para http://localhost:3000. Você deverá ver a página semelhante à seguinte captura de tela:

   

3. Depois que a página concluir o carregamento, selecione Entrar quando solicitado.

4. Na página de entrada, digite seu Endereço de email, selecione Avançar, digite sua Senha e selecione Entrar. Se você não tiver uma conta, selecione o link Não tem uma conta? Crie uma, que iniciará o fluxo de inscrição.

5. Se você escolher a opção de inscrição, depois de preencher seu email, senha única, nova senha e mais detalhes da conta, você concluirá todo o fluxo de inscrição. Você verá uma página semelhante à seguinte captura de tela. Você verá uma página semelhante quando escolher a opção de login.

   

6. Selecione Sair para tirar o usuário do aplicativo Web ou selecione Exibir declarações de token de ID para exibir declarações de token de ID retornadas pelo Microsoft Entra.

Como funciona

Quando os usuários selecionam o link entrar , o aplicativo inicia uma solicitação de autenticação e redireciona os usuários para a ID Externa do Microsoft Entra. Na página de login ou de registro exibida, quando um usuário faz login com sucesso ou cria uma conta, o Microsoft Entra External ID retorna um token de ID para o aplicativo. O aplicativo valida o token de ID, lê as declarações e retorna uma página segura para os usuários.

Quando os usuários selecionam o link Sair, o aplicativo limpa sua sessão e, em seguida, redireciona o usuário para o endpoint de logout do Microsoft Entra External ID para notificá-lo de que a sessão do usuário foi encerrada.

Se você quiser criar um aplicativo semelhante ao exemplo que você executou, conclua as etapas no artigo Fazer login de usuários em seu próprio aplicativo web Node.js.

ASP.NET Core

1. No shell ou na linha de comando, execute os seguintes comandos:

   dotnet run
   

2. Abra o navegador da Web e navegue até https://localhost:7274.

3. Faça login com uma conta registrada no locatário externo.

4. Uma vez conectado, o nome de exibição é mostrado ao lado do botão Sair , conforme mostrado na captura de tela a seguir.

   

5. Para sair do aplicativo, selecione o botão Sair .

Python Django

Abra o aplicativo para ver a experiência de login em ação.

1. No terminal, execute o seguinte comando:

   python manage.py runserver localhost:5000                                             
   

   Você pode usar um número de porta de sua escolha.

2. Abra o navegador e vá para http://localhost:5000. Você deverá ver uma página semelhante à seguinte captura de tela:

   

3. Depois que a página concluir o carregamento, selecione o link Entrar . Você é solicitado a fazer login.

4. Na página de entrada, digite seu Endereço de email, selecione Avançar, digite sua Senha e selecione Entrar. Se você não tiver uma conta, selecione o link Não tem uma conta? Crie uma, que iniciará o fluxo de inscrição.

5. Se você escolher a opção de inscrição, passará pelo fluxo de inscrição. Preencha seu email, senha única, nova senha e mais detalhes da conta para concluir todo o fluxo de inscrição.

6. Depois de entrar ou se inscrever, você será redirecionado de volta para o aplicativo Web. Você verá uma página semelhante à seguinte captura de tela:

   

7. Selecione Logoff para desconectar o usuário do aplicativo web ou selecione Chamar uma API downstream para fazer uma chamada a um endpoint do Microsoft Graph.

Como funciona

Quando os usuários selecionam o link entrar , o aplicativo inicia uma solicitação de autenticação e redireciona os usuários para a ID Externa do Microsoft Entra. Em seguida, um usuário entra ou se inscreve na página exibida. Depois de fornecer as credenciais necessárias e consentir com os escopos necessários, a ID Externa do Microsoft Entra redireciona o usuário de volta para o aplicativo Web com um código de autorização. Em seguida, o aplicativo Web usa esse código de autorização para adquirir um token da ID Externa do Microsoft Entra.

Quando os usuários selecionam o link Logout, o aplicativo limpa sua sessão, redireciona o usuário para o endpoint de encerramento de sessão da ID Externa da Microsoft Entra para informar que o usuário se desconectou. Em seguida, o usuário é redirecionado de volta para o aplicativo web.

Python Flask

Execute o aplicativo para ver a experiência de login em funcionamento.

1. No terminal, execute o seguinte comando:

   python3 -m flask run --debug --host=localhost --port=3000
   

   Você pode usar a porta da sua escolha. Isso deve ser semelhante à porta do URI de redirecionamento que você registrou anteriormente.

2. Abra o navegador e vá para http://localhost:3000. Você deverá ver a página semelhante à seguinte captura de tela:

   

3. Depois que a página concluir o carregamento, selecione o link Entrar . Você é solicitado a fazer login.

4. Na página de entrada, digite seu Endereço de email, selecione Avançar, digite sua Senha e selecione Entrar. Se você não tiver uma conta, selecione o link Não tem uma conta? Crie uma, que iniciará o fluxo de inscrição.

5. Se você escolher a opção de inscrição, passará pelo fluxo de inscrição. Preencha seu email, senha única, nova senha e mais detalhes da conta para concluir todo o fluxo de inscrição.

6. Depois de entrar ou se inscrever, você será redirecionado de volta para o aplicativo Web. Você verá uma página semelhante à seguinte captura de tela:

   

7. Selecione Logoff para desconectar o usuário do aplicativo web ou selecione Chamar uma API descendente para fazer uma chamada para um endpoint do Microsoft Graph.

Como funciona

Quando os usuários selecionam o link entrar , o aplicativo inicia uma solicitação de autenticação e redireciona os usuários para a ID Externa do Microsoft Entra. Em seguida, um usuário entra ou se inscreve na página exibida. Depois de fornecer as credenciais necessárias e consentir com os escopos necessários, a ID Externa do Microsoft Entra redireciona o usuário de volta para o aplicativo Web com um código de autorização. Em seguida, o aplicativo Web usa esse código de autorização para adquirir um token da ID Externa do Microsoft Entra.

Quando os usuários selecionam o link logout, o aplicativo limpa sua sessão e redireciona o usuário para o endpoint de saída do Microsoft Entra External ID para notificar que o usuário encerrou a sessão. O usuário é então redirecionado de volta para o aplicativo web.

Conteúdo relacionado

Nó

• Conectar usuários em seu aplicativo Web Node.js
• Introdução – Autenticar usuários e chamar uma API Web em um aplicativo Web de exemplo Node.js
• Início Rápido – Editar perfil em um aplicativo Web Node.js de exemplo

ASP.NET Core

• Use nossa série de tutoriais de várias partes para criar este aplicativo Web ASP.NET do zero
• Habilitar a redefinição de senha
• Personalizar a identidade visual padrão

Python Django

• Conectar usuários usando um aplicativo Web Flask de exemplo
• Habilitar a redefinição de senha
• Personalizar a identidade visual padrão

Python Flask

• Habilitar a redefinição de senha
• Personalizar a identidade visual padrão