Guia de início rápido: iniciar sessão de utilizadores em um aplicativo Web de exemplo

Neste início rápido, tu usas uma aplicação web de exemplo para mostrar como autenticar utilizadores e chamar a API do Microsoft Graph no teu inquilino de trabalho. A aplicação de exemplo usa a Biblioteca de Autenticação da Microsoft para manipular a autenticação.

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

Pré-requisitos

Nó

• Uma assinatura do Azure. Crie uma assinatura do Azure gratuitamente.
• Node.js
• Visual Studio Code ou outro editor de código.
• Um locatário da força de trabalho do Microsoft Entra. Para obter mais informações, consulte como obter um inquilino do Microsoft Entra.

ASP.NET Core

• Uma conta do Azure com uma assinatura ativa. Se ainda não tiver uma, Crie uma conta gratuitamente.
• Um requisito mínimo do SDK do .NET 6.0
• Visual Studio 2022 ou Visual Studio Code

Python Flask

• Uma conta do Azure com uma assinatura ativa. Crie uma conta gratuitamente.
• Um inquilino da força de trabalho do Microsoft Entra. Para obter mais informações, consulte como obter um inquilino do Microsoft Entra.
• Python 3 +

registar a aplicação web

Para permitir que os utilizadores iniciem sessão na sua aplicação, o Microsoft Entra ID deve estar ciente da aplicação que cria. O registo da aplicação estabelece uma relação de confiança entre a aplicação e o Microsoft Entra. Quando você registra um aplicativo, a ID externa gera um identificador exclusivo conhecido como ID do Aplicativo (cliente), um valor usado para identificar seu aplicativo ao criar solicitações de autenticação.

Para concluir o registro, forneça um nome ao aplicativo e especifique os tipos de conta suportados. Uma vez registrado, o painel Visão Geral exibe os identificadores necessários no código-fonte do aplicativo.

1. Entre no centro de administração do Microsoft Entra.

2. Se tiver acesso a vários inquilinos, utilize o ícone Definições no menu superior para mudar para o inquilino no qual pretende registar a aplicação a partir do menu Diretórios + subscrições.

3. Navegue até Identidade>Aplicações>Registos de aplicações, selecione Novo registo.

4. Insira um Nome para a aplicação, como identity-client-web-app.

5. Para Tipos de conta suportados, selecione Apenas contas neste diretório organizacional. Para obter informações sobre diferentes tipos de conta, selecione a opção Ajuda-me a escolher.

6. Selecione o registo .

   

7. O painel Visão geral do do aplicativo é exibido quando o registro é concluído. Anote o ID do Diretório (inquilino) e o ID do Aplicativo (cliente) a serem usados no código-fonte da sua aplicação.

   

   Observação

   Os Tipos de conta suportados podem ser alterados consultando Modificar as contas suportadas por um aplicativo.

Adicionar plataforma e URLs

Uma plataforma especifica o tipo de aplicativo que você deseja integrar. Um URI de redirecionamento é o local para onde o servidor de autenticação da plataforma de identidade envia o usuário depois que ele autoriza e recebe tokens de segurança com êxito.

Para autenticar um utilizador, a sua aplicação deve enviar uma solicitação de autenticação com um URI de redirecionamento especificado como parâmetro, e este deve corresponder a um dos URIs de redirecionamento que adicionou no registo da aplicação.

Nó

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação.
2. Na página Configurações da plataforma, selecione Adicionar uma plataformae, em seguida, selecione a opção Web.
3. Para inserir os URIs de Redirecionamento , http://localhost:3000/auth/redirect.
4. Em URL de logout do canal frontal, insira https://localhost:5001/signout-callback-oidc para sair.
5. Selecione Configurar para salvar as alterações.

ASP.NET Core

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação.
2. Na página de Configurações da plataforma , selecione Adicionar uma plataformae, em seguida, selecione a opção Web .
3. Para o Redireccionamento de URIs, introduza https://localhost:5001/signin-oidc.
4. Em URL de logout do canal principal, insira https://localhost:5001/signout-callback-oidc para sair.
5. Selecione Configurar para salvar as alterações.

Python Flask

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação.
2. Na página Configurações da plataforma, selecione Adicionar uma plataformae, em seguida, selecione a opção Web.
3. Para o Redirecionar URIs inserir, http://localhost:5000/getAToken.
4. Selecione Configurar para salvar as alterações.

Adicionar segredo ou certificado do cliente do aplicativo

Nó

Crie um segredo de cliente para o aplicativo registrado. O aplicativo usa o segredo do cliente para provar sua identidade quando solicita tokens:

1. Na página de Registos de aplicações, selecione a aplicação que criou (como o segredo do cliente da aplicação web) para abrir a sua página de Visão geral.
2. Em Gerenciar, selecione Certificados & segredos>Segredos do cliente>Novo segredo do cliente.
3. Na caixa Descrição, insira uma descrição para o segredo do cliente (por exemplo, segredo do cliente da aplicação Web).
4. Em Expira, selecione uma duração para a qual o segredo é válido (de acordo com as regras de segurança da sua organização) e, em seguida, selecione Adicionar.
5. Registre o valor do segredo. Use esse valor para configuração em uma etapa posterior. O valor secreto não será exibido novamente e não poderá ser recuperado por nenhum meio, depois que você navegar para fora do Certificados e segredos. Certifique-se de gravá-lo.

ASP.NET Core

Para usar uma credencial de certificado para seu aplicativo Web, você precisa criar e, em seguida, carregar o certificado. Para fins de teste, você pode usar um certificado autoassinado. Use as seguintes etapas para criar e carregar um certificado autoassinado:

1. Usando seu terminal, navegue até um diretório de sua escolha e, em seguida, crie o certificado autoassinado usando o seguinte comando.

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

2. Volte ao centro de administração do Microsoft Entra e, em Gerenciar, selecione Certificados & segredos>Carregar certificado.

3. Selecione a guia Certificados (0) e, em seguida, selecione Carregar certificado.

4. Aparece um painel Carregar certificado. Use o ícone para navegar até o arquivo de certificado criado na etapa anterior e selecione Abrir.

5. Insira uma descrição para o certificado, por exemplo, Certificado para aspnet-web-appe selecione Adicionar.

6. Registe o valor da impressão digital para uso na próxima etapa.

Python Flask

Crie um segredo de cliente para o aplicativo registrado. O aplicativo usa o segredo do cliente para provar sua identidade quando solicita tokens:

1. Na página Registros de aplicações, selecione a aplicação que criou (como o segredo do cliente da aplicação Web ) para abrir a sua página de Visão geral .
2. Em Gerenciar, selecione Certificados & segredos>Segredos do cliente>Novo segredo do cliente.
3. Na caixa Descrição, insira uma descrição para o segredo do cliente (por exemplo, segredo do cliente do aplicativo Web).
4. Em Expira, selecione uma duração para a qual o segredo é válido (de acordo com as regras de segurança da sua organização) e, em seguida, selecione Adicionar.
5. Registre o valor do segredo. Use esse valor para configuração em uma etapa posterior. O valor secreto não será exibido novamente e não poderá ser recuperado por nenhum meio, depois que você navegar para fora do Certificados e segredos. Certifique-se de gravá-lo.

Quando você cria credenciais para um aplicativo cliente confidencial:

• A Microsoft recomenda que você use um certificado em vez de um segredo do cliente antes de mover o aplicativo para um ambiente de produção. Para obter mais informações sobre como usar um certificado, consulte as instruções em credenciais de certificado de autenticação de aplicativo da plataforma de identidade da Microsoft.

• Para fins de teste, você pode criar um certificado autoassinado e configurar seus aplicativos para autenticação com ele. No entanto, node produção, você deve comprar um certificado assinado por uma autoridade de certificação conhecida e, em seguida, usar do Cofre da Chave do Azure para gerenciar o acesso e o tempo de vida do certificado.

Clone ou baixe 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 .zipe, em seguida, extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 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 digite o seguinte comando:

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

ASP.NET Core

• Baixe o arquivo .zipe, em seguida, extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 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 digite 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 extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 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 digite o seguinte comando:

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

Configurar o aplicativo Web de exemplo

Para que possa iniciar sessão os utilizadores com a aplicação de exemplo, tem de atualizá-la com a sua aplicação e os detalhes do locatário.

Nó

Na pasta ms-identity-node-main, abra o ficheiro .env na pasta App. Substitua os seguintes espaços reservados:

Variável	Descrição	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/ (incluir a barra diagonal final)
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 de cliente da aplicação que registou	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Segredo do cliente da aplicação que registou	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/ (inclui a barra à direita para a frente)
Enter_the_Express_Session_Secret_Here	Uma sequência aleatória de caracteres usada para assinar o cookie de sessão Express	A1b-C2d_E3f.H4...

Depois de fazer alterações, o arquivo deve ser semelhante ao seguinte trecho:

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 seguinte trecho;

   {
   "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",
     "ClientCertificates": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApi": {
       "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 onde 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 cliente. Substitua o texto entre aspas pelo valor Application (client) ID que foi 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 já foi registada.

Python Flask

1. Abra o aplicativo que você baixou em um IDE e navegue até a pasta raiz do aplicativo de exemplo.

   cd flask-web-app
   

2. Crie um ficheiro .env no diretório raiz do projeto usando .env.sample 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 para o ID de Aplicação (cliente) para a aplicação registada, disponível na página de visão geral.
   • Defina o valor de CLIENT_SECRET para o segredo do cliente que você criou no Certificados & Segredos para o aplicativo registrado.
   • Defina o valor de AUTHORITY como um https://login.microsoftonline.com/<TENANT_GUID>. O ID do Diretório (locatário) está disponível na página de visão geral da inscrição da aplicação.

   As variáveis de ambiente são referenciadas em app_config.pye são mantidas em um arquivo de .env separado para mantê-las fora do controle do código-fonte. O arquivo fornecido .gitignore impede que o ficheiro .env seja adicionado ao repositório.

Executar e testar 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. Vá para http://localhost:3000/.

3. Selecione Iniciar sessão para iniciar o processo de início de sessão.

Na primeira vez que iniciar sessão, ser-lhe-á pedido que forneça o seu consentimento para permitir que a aplicação inicie sessão e aceda ao seu perfil. Depois de iniciar sessão com êxito, será redirecionado de volta para a página inicial da aplicação.

Como funciona a aplicação

O exemplo hospeda um servidor Web no localhost, porta 3000. Quando um navegador da Web acessa esse endereço, o aplicativo renderiza a página inicial. Assim que o utilizador seleciona Entrar, a aplicação redireciona o navegador para a página de entrada 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 página inicial do aplicativo, juntamente com um ID e token de acesso.

ASP.NET Core

1. No diretório do projeto, use o terminal para inserir o seguinte comando;

   dotnet run
   

2. Copie o URL https que aparece no terminal, por exemplo, https://localhost:5001e cole-o em um navegador. Recomendamos o uso de uma sessão privada ou anônima do navegador.

3. Siga os passos e introduza os detalhes necessários para iniciar sessão com a sua conta Microsoft. É-lhe pedido que forneça um endereço de e-mail para que lhe possa ser enviado um código de acesso único. Insira o código quando solicitado.

4. A aplicação solicita permissão para manter o acesso aos dados aos quais lhe deu acesso, para iniciar sessão e ler o seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida. Ele indica que você está conectado ao aplicativo e está exibindo os detalhes do seu perfil a partir da API do Microsoft Graph.

   

Sair do aplicativo

1. Encontre o link Sair no canto superior direito da página e selecione-o.
2. Você será solicitado a escolher uma conta da qual sair. Selecione a conta que utilizou para iniciar sessão.
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 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 a partir da linha de comando. Verifique se seu aplicativo está sendo executado na mesma porta que o URI de redirecionamento configurado anteriormente.

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

4. Copie o URL https que aparece no terminal, por exemplo, https://localhost:5000e cole-o em um navegador. Recomendamos o uso de uma sessão privada ou anônima do navegador.

5. Siga os passos e introduza os detalhes necessários para iniciar sessão com a sua conta Microsoft. É-lhe pedido que forneça um endereço de e-mail e uma palavra-passe para iniciar sessão.

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

   

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

Como funciona a aplicação

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

1. O aplicativo usa o pacote identity para obter um token de acesso da plataforma de identidade da Microsoft. Este pacote foi criado sobre a Microsoft Authentication Library (MSAL) 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 uma app Web Node.js que faz login nos utilizadores e chama a API do Microsoft Graph em . Tutorial: Inicie sessão para utilizadores e obtenha um token para o Microsoft Graph numa app Web Node.js & Express.

ASP.NET Core

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

Python Flask

• Saiba como criar uma aplicação Web em Python que autentica utilizadores e acede a uma API da Web protegida em Tutorial: Aplicação Web que autentica utilizadores.

Neste início rápido, você usa um aplicativo Web de exemplo para mostrar como entrar em usuários em seu locatário externo. A aplicação de exemplo utiliza a Biblioteca de Autenticação da Microsoft para gerir a autenticação.

Antes de começar, use o menu Escolha um tipo de locatário no topo desta página para escolher o tipo de locatário. Microsoft Entra ID fornece duas configurações de inquilinos, força de trabalho e externos . Uma configuração de locatário da força de trabalho é para seus funcionários, aplicativos internos e outros recursos organizacionais. Um locatário externo é para as suas aplicações voltadas para o cliente.

Pré-requisitos

Nó

• Visual Studio Code ou outro editor de código.
• Node.js.
• Um locatário externo. Para criar um, escolha um dos seguintes métodos:
  • (Recomendado) Use a extensão de ID Externa do Microsoft Entra para configurar um inquilino externo diretamente no Visual Studio Code.
  • Crie um novo locatário externo no centro de administração do Microsoft Entra.

ASP.NET Core

• Visual Studio Code ou outro editor de código.
• SDK do .NET 7.0.
• Um locatário externo. Para criar um, escolha um dos seguintes métodos:
  • (Recomendado) Use a extensão ID Externo do Microsoft Entra para configurar um inquilino externo diretamente no Visual Studio Code.
  • Crie um novo locatário externo no centro de administração do Microsoft Entra.

Python Django

• Visual Studio Code ou outro editor de código.
• Python 3+.
• Um locatário externo. Para criar um, escolha um dos seguintes métodos:
  • (Recomendado) Use o extensão de ID Externa do Microsoft Entra para configurar um locatário externo diretamente no Visual Studio Code.
  • Crie um novo inquilino externo no centro de administração do Microsoft Entra.

Python Flask

• Visual Studio Code ou outro editor de código.
• Python 3+.
• Um locatário externo. Para criar um, escolha um dos seguintes métodos:
  • (Recomendado) Use o extensão de ID Externa do Microsoft Entra para configurar um locatário externo diretamente no Visual Studio Code.
  • Crie um locatário externo no centro de administração Microsoft Entra.

Registar a aplicação Web

Para permitir que a sua aplicação autentique utilizadores com o Microsoft Entra, a External ID do Microsoft Entra deve ser informada sobre a aplicação que criou. O registo da aplicação estabelece uma relação de confiança entre a aplicação e o Microsoft Entra. Quando você registra um aplicativo, a ID externa gera um identificador exclusivo conhecido como ID do Aplicativo (cliente), um valor usado para identificar seu aplicativo ao criar solicitações de autenticação.

As etapas a seguir mostram como registrar seu aplicativo no centro de administração do Microsoft Entra:

1. Entre no centro de administração do Microsoft Entra como pelo menos um Desenvolvedor de Aplicativos.

2. Se tiver acesso a vários inquilinos, utilize o ícone Definições no menu superior para mudar para o seu inquilino externo a partir do menu Diretórios + subscrições.

3. Navegue até Identidade>Aplicativos>Registros de aplicativos.

4. Selecione + Novo registo.

5. No Registar uma página de de candidatura que aparece;

   1. Insira um aplicativo significativo Nome que é exibido para os usuários do aplicativo, por exemplo, ciam-client-app .
   2. Em Tipos de conta suportados, selecione Apenas contas neste diretório organizacional.

6. Selecione Registo.

7. O painel Visão Geral do aplicativo é exibido após o registro bem-sucedido. Registe o ID da aplicação (cliente) para ser usado no código-fonte da sua aplicação.

Adicionar plataforma e URLs

Uma plataforma especifica o tipo de aplicativo que você deseja integrar. Um URI de redirecionamento é o local para onde o servidor de autenticação da plataforma de identidade envia o usuário depois que ele autoriza e recebe tokens de segurança com êxito.

Para fazer log-in de um utilizador, a sua aplicação deve enviar uma solicitação de entrada especificando um URI de redireccionamento que deve corresponder a um dos URIs de redireccionamento que adicionou no registo da aplicação.

Nó

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação.
2. Na página Configurações da plataforma, selecione Adicionar uma plataformae, em seguida, selecione opção Web.
3. Para os URIs de Redirecionamento insira http://localhost:3000/auth/redirectno.
4. Selecione Configurar para salvar as alterações.

ASP.NET Core

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação.
2. Na página de Configurações da plataforma , selecione Adicionar uma plataformae, em seguida, selecione a opção Web.
3. Para o Redirecionar URIs insira https://localhost:7274/signin-oidc.
4. Em URL de logout do canal frontal, insira https://localhost:7274/signout-callback-oidc para sair.
5. Selecione Configurar para salvar as alterações.

Python Django

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação
2. Na página Configurações da plataforma , selecione a opção Adicionar uma plataformae depois selecione a opção Web .
3. Para os URIs de redirecionamento, insira http://localhost:5000/redirect. Esse URI de redirecionamento é o local para onde o servidor de autorização envia o token de acesso. Você pode personalizá-lo para se adequar ao seu caso de uso.
4. Selecione Configurar para salvar as alterações.

Python Flask

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

1. Em Gerir, selecione Autenticação
2. Na página Configurações da plataforma, selecione Adicionar uma plataformae, em seguida, selecione a opção Web.
3. Para os Redirecionamento de URIs insira http://localhost:3000/getAToken. Esse URI de redirecionamento é o local para onde o servidor de autorização envia o token de acesso. Você pode personalizá-lo para se adequar ao seu caso de uso.
4. Selecione Configurar para salvar as alterações.

Adicionar segredo do cliente do aplicativo

Crie um segredo de cliente para o aplicativo registrado. O aplicativo usa o segredo do cliente para provar sua identidade quando solicita tokens:

1. Na página Registos de aplicações, selecione a aplicação que criou (como segredo do cliente da aplicação web) para abrir a sua página de Visão geral.
2. Em Gerenciar, selecione Certificados & segredos>Segredos do cliente>Novo segredo do cliente.
3. Na caixa Descrição, insira uma descrição para o Segredo do Cliente (por exemplo, Segredo do Cliente do Aplicativo Web).
4. Em Expira, selecione uma duração para a qual o segredo é válido (de acordo com as regras de segurança da sua organização) e, em seguida, selecione Adicionar.
5. Registre o valor do segredo. Use esse valor para configuração em uma etapa posterior. O valor secreto não será exibido novamente e não poderá ser recuperado por nenhum meio, depois que você navegar para fora do Certificados e segredos. Certifique-se de gravá-lo.

Quando você cria credenciais para um aplicativo cliente confidencial:

• A Microsoft recomenda que você use um certificado em vez de um segredo do cliente antes de mover o aplicativo para um ambiente de produção. Para obter mais informações sobre como usar um certificado, consulte as instruções em credenciais de certificado de autenticação de aplicativo da plataforma de identidade da Microsoft.

• Para fins de teste, você pode criar um certificado autoassinado e configurar seus aplicativos para autenticação com ele. No entanto, no de produção, deve adquirir um certificado assinado por uma autoridade de certificação conhecida e depois usar o Cofre de Chaves do Azure para gerir o acesso e a vida útil do certificado.

Conceder consentimento de administrador

Depois de registrar seu aplicativo, ele recebe a permissão User.Read. No entanto, como o locatário é um locatário externo, os próprios usuários do cliente não podem consentir com essa permissão. Você, como administrador do locatário, deve consentir com essa permissão em nome de todos os usuários no locatário:

1. Na página registros do aplicativo, selecione o aplicativo que você criou (como ciam-client-app) para abrir sua página Visão geral.

2. Em Gerenciar, selecione permissões de API.

   1. Selecione Conceder consentimento de administrador para <o nome do seu inquilino>e depois selecione Sim.
   2. Selecione Atualizare, em seguida, verifique se Concedido para <o nome do locatário> aparece em Status para a permissão.

Criar um fluxo de usuário

Siga estas etapas para criar um fluxo de usuário que um cliente pode usar para entrar ou se inscrever em um aplicativo.

1. Entre no centro de administração do Microsoft Entra como pelo menos um Administrador de Fluxo de Usuário de ID Externo.

2. Se tiver acesso a várias instâncias, utilize o ícone de Definições na barra de menu superior para mudar para a sua instância externa a partir do menu Diretórios + subscrições .

3. Navegue até Identidade>Identidades Externas>Fluxos de usuário.

4. Selecione + Novo fluxo de usuário.

5. Na página Criar:

   1. Insira um Nome para o fluxo de utilizador, como SignInSignUpSample.

   2. Na lista Provedores de identidade, selecione Contas de e-mail. Esse provedor de identidade permite que os usuários entrem ou se inscrevam usando seu endereço de e-mail.

      Observação

      Provedores de identidade adicionais serão listados aqui somente depois que você configurar a federação com eles. Por exemplo, se você configurar a federação com Google, Facebook, Apple ou um provedor de identidade OIDC , você poderá selecionar esses provedores de identidade adicionais aqui.

   3. Em Contas de e-mail, você pode selecionar uma das duas opções. Para este tutorial, selecione Email com senha.

      • Email com senha: Permite que novos usuários se inscrevam e entrem usando um endereço de e-mail como nome de login e uma senha como sua credencial de primeiro fator.
      • Senha única por e-mail: permite que novos utilizadores se inscrevam e iniciem sessão usando um endereço de e-mail como nome de entrada e uma senha única recebida por e-mail como a sua primeira credencial de autenticação por fator. A senha única de e-mail deve ser habilitada no nível do locatário (Todos os Provedores de Identidade>Senha de Email Único) para que essa opção esteja disponível no nível de fluxo do usuário.

   4. Em Atributos de usuário, escolha os atributos que você deseja coletar do usuário no momento da inscrição. Ao selecionar Mostrar mais, você pode escolher atributos e declarações para País/Região, Nome para Exibiçãoe Código Postal. Selecione OK. (Os usuários só são solicitados a fornecer atributos quando se inscrevem pela primeira vez.)

6. Selecione Criar. O novo fluxo de usuário aparece na lista Fluxos de usuário. Se necessário, atualize a página.

Para habilitar a redefinição de senha de autoatendimento, use as etapas no artigo Habilitar redefinição de senha de autoatendimento.

Associar o aplicativo Web ao fluxo de usuários

Para que os clientes vejam a experiência de inscrição ou entrada quando usam a sua aplicação, precisa associar a sua aplicação a um fluxo de utilizador. Embora muitos aplicativos possam ser associados ao seu fluxo de usuário, um único aplicativo só pode ser associado a um fluxo de usuário.

1. No menu da barra lateral, selecione Identidade.

2. Selecione Identidades Externase, em seguida, Fluxos de usuário.

3. Na página Fluxos de utilizador, selecione o Nome do fluxo de utilizador que criou anteriormente, por exemplo, SignInSignUpSample.

4. Em Usar, selecione Aplicativos.

5. Selecione Adicionar aplicativo.

6. Selecione o aplicativo na lista, como ciam-client-app, ou use a caixa de pesquisa para localizar o aplicativo e, em seguida, selecione-o.

7. Escolha Selecionar.

Depois de associar seu aplicativo a um fluxo de usuário, você pode testar seu fluxo de usuário simulando a experiência de inscrição ou entrada de um usuário com seu aplicativo a partir do centro de administração do Microsoft Entra. Para fazer isso, use as etapas em Testar seu fluxo de usuário de inscrição e entrada.

Clone ou baixe 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 digite o seguinte comando:

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

• Como alternativa, baixe o .zip arquivo de exemploe depois extraia-o para um caminho de ficheiro onde o nome tem menos de 260 caracteres.

Instalar dependências do projeto

1. Abra uma janela do console e mude 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 digite 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 onde o comprimento do nome é inferior a 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 digite 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 onde o comprimento do nome é inferior a 260 caracteres.

Instalar dependências do projeto

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

   cd django-web-app
   

2. Configure o ambiente virtual:

   • Para 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 aplicativos, 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 digite 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 onde o comprimento do nome é inferior a 260 caracteres.

Instalar dependências do projeto

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

   cd flask-web-app
   

2. Configure o ambiente virtual:

   • Para 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 aplicativos, execute os seguintes comandos:

   python3 -m pip install -r requirements.txt
   

Configurar o aplicativo Web de exemplo

Para que possa iniciar sessão de utilizadores com a aplicação de exemplo, necessita de atualizá-la com os detalhes da sua aplicação e do cliente:

Nó

1. No editor de códigos, abra arquivo App\authConfig.js.

2. Encontre o espaço reservado:

   • Enter_the_Application_Id_Here e substitua-o pelo ID do aplicativo (cliente) do aplicativo que você registrou anteriormente.
   • Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio Directory (locatário). Por exemplo, se o domínio principal do locatário for contoso.onmicrosoft.com, use contoso. Se não tiver o nome do inquilino, saiba como ler os detalhes do inquilino.
   • Enter_the_Client_Secret_Here e substitua-o pelo valor secreto do aplicativo copiado anteriormente.

ASP.NET Core

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

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

2. Abra o arquivo appsettings.json.

3. No Authority, localize Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do seu inquilino. Por exemplo, se o domínio principal do locatário for caseyjensen@onmicrosoft.com, o valor que deves inserir é casyjensen.

4. Encontre o valor Enter_the_Application_Id_Here e substitua-o pela ID do aplicativo (clientId) do aplicativo que você registrou no centro de administração do Microsoft Entra.

5. Substitua Enter_the_Client_Secret_Here pelo valor secreto do cliente que você configurou em Adicionar segredo do cliente do aplicativo.

Python Django

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

2. Crie um arquivo de .env na pasta raiz do projeto usando arquivo de .env.sample como guia.

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

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

Python Flask

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

2. Crie um arquivo de .env na pasta raiz do projeto usando arquivo de .env.sample como guia.

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

   • CLIENT_ID que é o ID da aplicação (cliente) que registou anteriormente.
   • CLIENT_SECRET, que é o valor secreto da aplicação que copiaste 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 do Diretório (locatário). Por exemplo, se o domínio principal do locatário for contoso.onmicrosoft.com, use contoso. Se não tiver o subdomínio do inquilino, saiba como ler os detalhes do inquilino.

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

Executar e testar aplicativo Web de exemplo

Nó

Agora pode testar a aplicação web de exemplo Node.js. Você precisa iniciar o servidor Node.js e acessá-lo através do seu navegador em http://localhost:3000.

1. No seu terminal, execute o seguinte comando:

   npm start 
   

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

   

3. Depois que o carregamento da página for concluído, selecione Entrar quando solicitado.

4. Na página de início de sessão, escreva o seu endereço de e-mail , selecione Seguinte, escreva a sua palavra-passe e, em seguida, selecione Iniciar sessão. Se você não tiver uma conta, selecione Sem conta? Crie um link, que inicia o fluxo de inscrição.

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

   

6. Selecione Sair para encerrar a sessão do utilizador na aplicação web ou selecione Ver informações do token de ID para ver as informações do token de ID devolvidas 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 início de sessão ou de registo exibida, quando um utilizador entra com êxito ou cria uma conta, a ID Externa do Microsoft Entra retorna um token de ID para a aplicação. 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 ponto de extremidade de saída do Microsoft Entra External ID para notificá-lo de que o usuário saiu.

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

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. Inicie sessão com uma conta registada no inquilino externo.

4. Assim que estiver autenticado, o nome para exibição é mostrado ao lado do botão Sair, como mostrado na captura de ecrã seguinte.

   

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

Python Django

Execute a app para ver a experiência de início de sessão em ação.

Observação

Este exemplo usa a biblioteca de identidade de terceiros Python. A biblioteca não é mantida oficialmente pela Microsoft, mas é recomendada para seu uso. Essa biblioteca facilita a adição de autenticação ao seu aplicativo Web, pois abstrai muitos dos detalhes do MSAL Python.

1. No seu 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ê verá uma página semelhante à seguinte captura de tela:

   

3. Depois de o carregamento da página ser concluído, selecione o link Entrar. Ser-lhe-á pedido para iniciar sessão.

4. Na página de início de sessão, escreva o seu endereço de e-mail , selecione Seguinte, escreva a sua palavra-passe e, em seguida, selecione Iniciar sessão. Se você não tiver uma conta, selecione Sem conta? Crie um link, que inicia o fluxo de inscrição.

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

6. Depois de iniciar sessão ou inscrever-se, é redirecionado de volta para a aplicação Web. Você verá uma página semelhante à seguinte captura de tela:

   

7. Selecione logout para sair da aplicação web ou selecione Chamar uma API downstream 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 utilizador inicia sessão ou inscreve-se na página apresentada. Depois de fornecer as credenciais necessárias e consentir com os escopos necessários, o Microsoft Entra External ID 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 utilizadores selecionam o link Logout, a aplicação limpa a sua sessão e redireciona o utilizador para o ponto de terminação de saída do Microsoft Entra External ID, para notificá-lo de que o utilizador saiu. O utilizador é então redirecionado de volta para a aplicação web.

Python Flask

Execute a aplicação para ver a experiência de início de sessão em ação.

Observação

Este exemplo usa a biblioteca de identidade de terceiros Python. A biblioteca não é mantida oficialmente pela Microsoft, mas é recomendada para seu uso. Essa biblioteca facilita a adição de autenticação ao seu aplicativo Web, pois abstrai muitos dos detalhes do MSAL Python.

1. No seu terminal, execute o seguinte comando:

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

   Você pode usar a porta de 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ê deve ver uma página semelhante à captura de ecrã seguinte.

   

3. Depois que o carregamento da página for concluído, selecione link Entrar. Pedir-lhe-ão para iniciar sessão.

4. Na página de início de sessão, escreva o seu endereço de e-mail , selecione Seguinte, escreva a sua palavra-passe e, em seguida, selecione Iniciar sessão. Se você não tiver uma conta, selecione Sem conta? Crie um link, que inicia o fluxo de inscrição.

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

6. Depois de iniciar sessão ou inscrever-se, é redirecionado de volta para a aplicação Web. Você verá uma página semelhante à seguinte captura de tela:

   

7. Selecione Logout para sair da aplicação web ou selecione Chamar uma API downstream para fazer uma chamada para um ponto de extremidade do Microsoft Graph.

Como funciona

Quando os utilizadores selecionam o link Entrar, a aplicação inicia uma solicitação de autenticação e redireciona os utilizadores para o Microsoft Entra External ID. Em seguida, um utilizador inicia sessão ou inscreve-se na página apresentada. Depois de fornecer as credenciais necessárias e consentir com os escopos necessários, o Microsoft Entra External ID 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 ponto de extremidade de saída do Microsoft Entra External ID para notificá-lo de que o usuário saiu. O usuário é então redirecionado de volta para o aplicativo Web.

Conteúdo relacionado

Nó

• Iniciar sessão de utilizadores na sua aplicação Web Node.js
• Guia de início rápido do - Inicie sessão como utilizador e acesse uma API web numa aplicação web de exemplo Node.js
• Início rápido - Editar perfil numa aplicação Web exemplo Node.js

ASP.NET Core

• Utilize a nossa série de tutoriais com várias partes para criar esta aplicação Web ASP.NET a partir do zero
• Ativar redefinição de senha
• Personalizar a marca padrão

Python Django

• Inicie sessão com utilizadores utilizando um exemplo de aplicação Web Flask
• Ativar redefinição de senha
• Personalizar a marca padrão

Python Flask

• Ativar redefinição de senha
• Personalizar a marca padrão