Guia de início rápido: inicie sessão para utilizadores numa aplicação de página única (SPA) e chame a API do Microsoft Graph

Neste arranque rápido, utiliza um exemplo de aplicação de página única (SPA) para mostrar como autenticar utilizadores utilizando o fluxo de código de autorização com PKCE (Proof Key for Code Exchange) e chamar a API do Microsoft Graph. O exemplo usa o Biblioteca de Autenticação da Microsoft para manipular a autenticação.

Pré-requisitos

JavaScript

• Uma conta do Azure com uma assinatura ativa. Se 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
  • Administrador de aplicativos na nuvem.
• Node.js.
• Visual Studio Code ou outro editor de código.

React

• Uma conta do Azure com uma assinatura ativa. Se 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
  • Administrador de aplicativos na nuvem.
• Node.js.
• Visual Studio Code ou outro editor de código.

Angular

• Uma conta do Azure com uma assinatura ativa. Se 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
  • Administrador de aplicativos na nuvem.
• Node.js.
• Visual Studio Code ou outro editor de código.

Blazor

• Uma conta do Azure com uma assinatura ativa. Se 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
  • Administrador de aplicativos na nuvem.
• SDK do .NET.
• Visual Studio Code ou outro editor de código.

Registar a aplicação e os identificadores de registo

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

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

2. Se tiver acesso a vários tenants, utilize o ícone Definições no menu superior para mudar para o tenant 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 do para o aplicativo, como identity-client-spa.

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

6. Selecione Registo.

   

7. O painel Visão geral do do aplicativo é exibido quando o registro é concluído. Registre o de ID do Diretório (locatário) e o ID do Aplicativo (cliente) a serem usados no código-fonte do aplicativo.

   

   Observação

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

---

Adicionar um URI de redirecionamento de plataforma

JavaScript

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 SPA.
3. Para as URIs de Redirecionamento insira http://localhost:3000.
4. Selecione Configurar para salvar as alterações.

React

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 SPA, opção.
3. Para os URIs de redirecionamento , introduza http://localhost:3000.
4. Selecione Configurar para salvar as alterações.

Angular

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 SPA.
3. Para os URIs de Redirecionamento, insira http://localhost:4200.
4. Selecione Configurar para salvar as alterações.

Blazor

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, seleccione a opção SPA .
3. Para os URIs de Redirecionamento, insira http://localhost:5000/authentication/login-callback.
4. Selecione Configurar para salvar as alterações.

Clone ou baixe o aplicativo de exemplo

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

JavaScript

• 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-javascript.git
  

• Baixe o ficheiro .zip. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

React

• 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-javascript.git
  

• Baixe o arquivo .zip. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Angular

• 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-javascript.git
  

• Baixe o arquivo .zip. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Blazor

• 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
  

• Baixe o arquivo .zip. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Configurar o projeto

JavaScript

1. No IDE, abra a pasta do projeto ms-identity-docs-code-javascript, que contém o exemplo.

2. Abra authConfig.js vanillajs-spa/App/public/ e atualize os seguintes valores com as informações registradas no centro de administração.

   /**
    * 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 
    */
   const msalConfig = {
       auth: {
   
            // WORKFORCE TENANT
            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
            // EXTERNAL TENANT
            // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
           redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
           navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
       },
       cache: {
           cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
           storeAuthStateInCookie: false, // set this to true if you have to support IE
       },
       system: {
           loggerOptions: {
               loggerCallback: (level, message, containsPii) => {
                   if (containsPii) {
                       return;
                   }
                   switch (level) {
                       case msal.LogLevel.Error:
                           console.error(message);
                           return;
                       case msal.LogLevel.Info:
                           console.info(message);
                           return;
                       case msal.LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case msal.LogLevel.Warning:
                           console.warn(message);
                           return;
                   }
               },
           },
       },
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit: 
    * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   const loginRequest = {
       scopes: ["User.Read"],
   };
   
   /**
    * An optional silentRequest object can be used to achieve silent SSO
    * between applications by providing a "login_hint" property.
    */
   
   // const silentRequest = {
   //   scopes: ["openid", "profile"],
   //   loginHint: "example@domain.net"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
   }
   

   • clientId - O identificador do aplicativo, também conhecido como cliente. Substitua o texto entre aspas pelo valor do ID do aplicativo (cliente) que foi registrado anteriormente.
   • authority - A autoridade é uma URL que indica um diretório do qual a MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor do ID de diretório (locatário) que foi registado anteriormente.
   • redirectUri - O URI de redirecionamento da aplicação. Se necessário, substitua o texto entre aspas pelo URI de redirecionamento que foi registrado anteriormente.

Reaja

1. No IDE, abra a pasta do projeto ms-identity-docs-code-javascript/react-spa, que contém o exemplo.

2. Abra authConfig.js react-spa/src/ e atualize os seguintes valores com as informações registradas no centro de administração.

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   import { LogLevel } from "@azure/msal-browser";
   
   /**
    * 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: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       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
       },
       system: {	
           loggerOptions: {	
               loggerCallback: (level, message, containsPii) => {	
                   if (containsPii) {		
                       return;		
                   }		
                   switch (level) {
                       case LogLevel.Error:
                           console.error(message);
                           return;
                       case LogLevel.Info:
                           console.info(message);
                           return;
                       case LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case LogLevel.Warning:
                           console.warn(message);
                           return;
                       default:
                           return;
                   }	
               }	
           }	
       }
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit: 
    * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
    */
   export const loginRequest = {
       scopes: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

   • clientId - O identificador do aplicativo, também conhecido como cliente. Substitua o texto entre aspas pelo valor do ID da Aplicação (cliente) que foi registrado anteriormente.
   • authority - A autoridade é uma URL que indica um diretório do qual a MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor de ID do Directory (locatário) que foi registrado anteriormente.
   • redirectUri - O URI de redirecionamento da aplicação. Se necessário, substitua o texto entre aspas pelo URI de redirecionamento que foi registrado anteriormente.

Angular

1. No IDE, abra a pasta do projeto ms-identity-docs-code-javascript/angular-spa, que contém o exemplo.

2. Abra angular-spa/src/app/app.module.ts e atualize os seguintes valores com as informações registradas no centro de administração.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   • clientId - O identificador do aplicativo, também conhecido como cliente. Substitua o texto entre aspas pelo valor de ID do aplicativo (cliente) que foi registrado anteriormente.
   • authority - A autoridade é uma URL que indica um diretório do qual a MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor do ID de Diretório (locatário) que foi registrado anteriormente.
   • redirectUri - O URI de redirecionamento da aplicação. Se necessário, substitua o texto entre aspas pelo URI de redirecionamento que foi registrado anteriormente.

Blazor

1. No IDE, abra a pasta do projeto ms-identity-docs-code-dotnet/spa-blazor-wasm, que contém o exemplo.

2. Abra appsettings.json spa-blazor-wasm/wwwroot/ e atualize os seguintes valores com as informações registradas anteriormente no centro de administração.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority - A autoridade é uma URL que indica um diretório do qual a MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor de ID do Directory (locatário) que foi registrado anteriormente.
   • ClientId - O identificador do aplicativo, também conhecido como cliente. Substitua o texto entre aspas pelo valor de ID do aplicativo (cliente) que foi registrado anteriormente.

Execute o aplicativo e entre e saia

JavaScript

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

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

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Copie o URL https que aparece no terminal, por exemplo, https://localhost:3000e 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. Ser-lhe-á solicitado 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. O aplicativo solicitará permissão para manter o acesso aos dados aos quais você deu acesso, e para fazer login e ler seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

   

React

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

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

   cd react-spa/App
   npm install
   npm start
   

2. Copie o URL https que aparece no terminal, por exemplo, https://localhost:3000e 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 solicitado um endereço de e-mail para que lhe possa ser enviada uma palavra-passe única. 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, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

   

Angular

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

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

   cd angular-spa/App
   npm install
   npm start
   

2. Copie o URL do https que aparece no terminal, por exemplo, https://localhost:4200e cole-o em uma barra de endereço do 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. Ser-lhe-á solicitado 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. O aplicativo solicitará permissão para manter o acesso aos dados aos quais você deu acesso, e para fazer login e ler seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

   

Blazor

Execute o projeto com um servidor Web usando dotnet:

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

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   dotnet run
   

2. Copie o URL http que aparece no terminal, por exemplo, http://localhost:5000e 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. Ser-lhe-á solicitado 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. O aplicativo solicitará permissão para manter o acesso aos dados aos quais você deu acesso, e para fazer login e ler seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

   

Pré-requisitos

JavaScript

• Um locatário externo. Para criar um, escolha um dos seguintes métodos:
  • Use o extensão de ID Externa do Microsoft Entra para configurar um locatário externo diretamente no Visual Studio Code. (Recomendado)
  • Crie um novo de locatário externo no centro de administração do Microsoft Entra.
• 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
  • Administrador de aplicativos na nuvem.
• Node.js.
• Visual Studio Code ou outro editor de código.

React

• Um locatário externo. Para criar um, escolha um dos seguintes métodos:
  • Use o 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.
• 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
  • Administrador de aplicativos na nuvem.
• Node.js.
• Visual Studio Code ou outro editor de código.

Angular

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

Registar a aplicação e registar os identificadores

Para permitir que a sua aplicação autentique utilizadores com o Microsoft Entra, é necessário que o ID Externo do Microsoft Entra tenha conhecimento da aplicação que criar. 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 um Desenvolvedor de Aplicativospelo menos.

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>Aplicações>Registos de aplicações.

4. Selecione + Novo registo.

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

   1. Insira um Nome de aplicação significativo que será apresentado aos utilizadores da aplicação, 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 da aplicação é exibido após o registro bem-sucedido. Registe a identificação da aplicação (cliente) para ser utilizada no código-fonte da sua aplicação.

Adicionar um URI de redirecionamento de plataforma

JavaScript

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, escolha a opção SPA.
3. Para o Redirecionar URIs insira http://localhost:3000.
4. Selecione Configurar para salvar as alterações.

React

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 SPA opção.
3. Para os URIs de Redirecionamento insira http://localhost:3000.
4. Selecione Configurar para salvar as alterações.

Angular

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 SPA .
3. Para as URIs de Redirecionamento , insira http://localhost:4200.
4. Selecione Configurar para salvar as alterações.

Conceder consentimento de administrador

Depois de registrar o seu aplicativo, é-lhe atribuída 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 a <o seu inquilino>, depois selecione Sim.
   2. Selecione Atualizare depois verifique se Concedido para <o nome do locatário> aparece em Estado para a permissão.

Criar um fluxo de usuário

Para que os usuários clientes vejam a experiência de inscrição ou entrada quando usam seu aplicativo, você precisa associar seu aplicativo a um fluxo de usuário. 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 o processo de registo e início de sessão do utilizador.

Associar o SPA ao fluxo de usuários

Para que os utilizadores vejam a experiência de registo ou início de sessão quando usam o seu aplicativo, precisa associar o seu aplicativo 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, utilize os passos em Testar o fluxo de registo e autenticação de utilizador.

Clone ou baixe exemplo de SPA

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

JavaScript

• 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
  

• Faça o download do exemplo. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

React

• 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
  

• Faça o download do exemplo. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Angular

• 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
  

• Faça o download do exemplo. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Configurar o SPA de exemplo

JavaScript

1. Abra App/public/authConfig.js e substitua o seguinte pelos valores obtidos no centro de administração do Microsoft Entra:

   • 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.

2. Salve o arquivo.

Reaja

1. Abra SPA\src\authConfig.js e substitua o seguinte pelos valores obtidos no centro de administração do Microsoft Entra:

   • 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 inquilino for contoso.onmicrosoft.com, utilize contoso. Se não tiver o nome do locatário, aprenda como ler os detalhes do locatário.

2. Salve o arquivo.

Angular

1. Abra SPA/src/app/auth-config.ts e substitua o seguinte pelos valores obtidos no centro de administração do Microsoft Entra:

   • 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 locatário, saiba como ler os detalhes do locatário.

2. Salve o arquivo.

Execute o seu projeto e inicie sessão

JavaScript

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

   cd 1-Authentication\0-sign-in-vanillajs\App
   npm install
   npm start
   

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

3. Inicie sessão com uma conta registada no locatário.

4. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

   

React

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

   cd 1-Authentication\1-sign-in-react\SPA
   npm install
   npm start
   

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

3. Inicie sessão com uma conta registada no locatário externo.

4. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

Angular

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

   cd 1-Authentication\2-sign-in-angular\SPA
   npm install
   npm start
   

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

3. Inicie sessão com uma conta registada no locatário externo.

4. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

   

Sair do aplicativo

1. Encontre o botão Terminar sessão na 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.

É apresentada uma mensagem a indicar que terminou sessão. Agora você pode fechar a janela do navegador.

Conteúdo relacionado

• Início Rápido: Proteja uma API Web ASP.NET Core com a plataforma de identidade da Microsoft.
• Saiba mais criando um SPA React que permite aos utilizadores iniciar sessão na seguinte série de tutoriais multipartes.
• Ativar redefinição de senha.
• Personalize a marca padrão.
• Configurar o início de sessão com o Google.