Tutorial: Criar um aplicativo de página única Angular e prepará-lo para autenticação

• Um membro da força de trabalho. Você pode usar o seu diretório padrão ou configurar um novo inquilino.
• Registre um novo aplicativo no centro de administração do Microsoft Entra, configurado para Contas somente neste diretório organizacional. Consulte Registar uma candidatura para obter mais detalhes. Registre os seguintes valores na página Visão geral do aplicativo para uso posterior:
  • ID da aplicação (cliente)
  • ID do diretório (inquilino)
• Adicione os seguintes URIs de redirecionamento na configuração da plataforma de aplicação de página única. Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • Redirecionar URI: http://localhost:4200/.

• Um inquilino externo. Para criar um, escolha um dos seguintes métodos:
  • (Recomendado) Use a extensão de ID Externa do Microsoft Entra para configurar um tenant externo diretamente no Visual Studio Code.
  • Crie um novo inquilino externo no centro de administração do Microsoft Entra.
• Registre um novo aplicativo no centro de administração do Microsoft Entra, configurado para Contas somente neste diretório organizacional. Consulte Registar uma candidatura para obter mais detalhes. Registre os seguintes valores na página Visão geral do aplicativo para uso posterior:
  • ID da aplicação (cliente)
  • ID do diretório (inquilino)
• Adicione os seguintes URIs de redirecionamento na configuração da plataforma de aplicação de página única. Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • Redirecionar URI: http://localhost:4200/.
• Associe seu aplicativo a um fluxo de usuário no centro de administração do Microsoft Entra. Esse fluxo de usuário pode ser usado em vários aplicativos. Para obter mais informações, consulte Criar fluxos de registo de autoatendimento para aplicações em inquilinos externos e Adicionar a sua aplicação ao fluxo de utilizador.

Para construir o projeto Angular a partir do zero, siga estas etapas:

1. Abra uma janela do terminal e execute o seguinte comando para criar um novo projeto Angular:

   ng new msal-angular-tutorial --routing=true --style=css --strict=false
   

   O comando cria um novo projeto Angular nomeado msal-angular-tutorial com roteamento habilitado, CSS para estilo e modo estrito desativado.

2. Mude para o diretório do projeto:

   cd msal-angular-tutorial
   

3. Instale as dependências do aplicativo:

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

   O comando npm install @azure/msal-browser @azure/msal-angular bootstrap instala o navegador MSAL do Azure, o Azure MSAL Angular e os pacotes Bootstrap.

4. Abra angular.json e adicione à matriz o caminho CSS do Bootstrap styles.

   "styles": [
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

   O código adiciona o Bootstrap CSS à matriz de estilos no angular.json arquivo.

5. Gerar os componentes Home e Profile

   ng generate component home
   ng generate component profile
   

   Os comandos geram os componentes Home e Profile no projeto Angular.

6. Remova arquivos e códigos desnecessários do projeto:

   rm src/app/app.component.css
   rm src/app/app.component.spec.ts
   rm src/app/home/home.component.css
   rm src/app/home/home.component.spec.ts
   rm src/app/profile/profile.component.css
   rm src/app/profile/profile.component.spec.ts
   

   Os comandos removem arquivos e códigos desnecessários do projeto.

7. Renomeie app.routes.ts para app-routing.module.ts usando o Visual Studio Code e atualize todas as referências de app.routes.ts em toda a aplicação.

8. Renomeie app.config.ts para app.module.ts usando o Visual Studio Code e atualize todas as referências para app.config.ts em todo o aplicativo.

Depois de concluir essas etapas, a estrutura do projeto deve ter a seguinte aparência:

.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── home
│   │   │   ├── home.component.html
│   │   │   └── home.component.ts
│   │   └── profile
│   │       ├── profile.component.html
│   │       └── profile.component.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.css
├── tsconfig.app.json
└── tsconfig.json

1. Abra o Visual Studio Code, selecione Arquivo>Abrir Pasta.... Navegue até o local no qual você deseja criar seu projeto e selecione-o.

2. Abra um novo terminal selecionando Terminal>Novo Terminal.

3. Execute os seguintes comandos para criar um novo projeto Angular com o nome angularspalocal, instale bibliotecas de componentes Angular Material, MSAL Browser, MSAL Angular e gere componentes domésticos e protegidos.

   npm install -g @angular/cli@14.2.0
   ng new angularspalocal --routing=true --style=css --strict=false
   cd angularspalocal
   npm install @angular/material@13.0.0 @angular/cdk@13.0.0
   npm install @azure/msal-browser@2.37.0 @azure/msal-angular@2.5.7
   ng generate component home
   ng generate component guarded
   

Usaremos os valores registrados durante o registro do aplicativo para configurar o aplicativo para autenticação. Siga estes passos:

1. Abra o src/app/app.module.ts arquivo e substitua o conteúdo pelo seguinte código:

   // 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 { }
   

   O código configura o MSAL para autenticação de usuário e proteção de API. Ele configura a aplicação com MsalInterceptor para proteger tanto as solicitações de API como as rotas através de MsalGuard, enquanto define os principais componentes e serviços para autenticação. Substitua os seguintes valores pelos valores do centro de administração do Microsoft Entra.

   • Substitua Enter_the_Application_Id_Here pelo Application (client) ID da inscrição da aplicação.
   • Substitua Enter_the_Tenant_Info_Here pelo Directory (tenant) ID da inscrição da aplicação.

2. Guarde o ficheiro.

1. Crie um novo arquivo chamado auth-config.ts na pasta src/app/ e adicione o seguinte trecho de código. Este arquivo contém parâmetros de autenticação. Esses parâmetros são usados para inicializar as configurações para Angular e MSAL Angular.

   
   /**
    * This file contains authentication parameters. Contents of this file
    * is roughly the same across other MSAL.js libraries. These parameters
    * are used to initialize Angular and MSAL Angular configurations in
    * in app.module.ts file.
    */
   
   import {
     LogLevel,
     Configuration,
     BrowserCacheLocation,
   } 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: Configuration = {
     auth: {
       clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
       authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain
       redirectUri: '/', // Points to window.location.origin by default. You must register this URI on Azure portal/App Registration.
       postLogoutRedirectUri: '/', // Points to window.location.origin by default.
     },
     cache: {
       cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
     },
     system: {
       loggerOptions: {
         loggerCallback(logLevel: LogLevel, message: string) {
           console.log(message);
         },
         logLevel: LogLevel.Verbose,
         piiLoggingEnabled: false,
       },
     },
   };
   
   /**
    * 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/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   export const loginRequest = {
     scopes: [],
   };
   

2. Substitua os seguintes valores pelos valores do centro de administração do Microsoft Entra:

   • Encontre o valor Enter_the_Application_Id_Here e substitua-o pelo Application ID (clientId) do aplicativo que você registrou no centro de administração do Microsoft Entra.
   • Em autoridade, encontre Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do seu inquilino. Por exemplo, se o domínio principal do inquilino for contoso.onmicrosoft.com, use contoso. Se não tiver o nome do locatário, saiba como ler as informações do locatário.

3. Guarde o ficheiro.

4. Abra src/app/app.module.ts e adicione o seguinte trecho de código.

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   import { MatToolbarModule } from "@angular/material/toolbar";
   import { MatButtonModule } from '@angular/material/button';
   import { MatCardModule } from '@angular/material/card';
   import { MatTableModule } from '@angular/material/table';
   import { MatMenuModule } from '@angular/material/menu';
   import { MatDialogModule } from '@angular/material/dialog';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MatIconModule } from '@angular/material/icon';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HomeComponent } from './home/home.component';
   import { GuardedComponent } from './guarded/guarded.component';
   
   import {
       IPublicClientApplication,
       PublicClientApplication,
       InteractionType,
   } from '@azure/msal-browser';
   
   import {
       MSAL_INSTANCE,
       MsalGuardConfiguration,
       MSAL_GUARD_CONFIG,
       MsalService,
       MsalBroadcastService,
       MsalGuard,
       MsalRedirectComponent,
       MsalInterceptor,
       MsalModule,
   } from '@azure/msal-angular';
   
   import { msalConfig, loginRequest } from './auth-config';
   
   /**
    * Here we pass the configuration parameters to create an MSAL instance.
       * For more info, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md
       */
   export function MSALInstanceFactory(): IPublicClientApplication {
       return new PublicClientApplication(msalConfig);
   }
   
   /**
    * Set your default interaction type for MSALGuard here. If you have any
       * additional scopes you want the user to consent upon login, add them here as well.
       */
   export function MsalGuardConfigurationFactory(): MsalGuardConfiguration {
       return {
       interactionType: InteractionType.Redirect,
       authRequest: loginRequest
       };
   }
   
   @NgModule({
       declarations: [
       AppComponent,
       HomeComponent,
       GuardedComponent,
       ],
       imports: [
       BrowserModule,
       BrowserAnimationsModule,
       AppRoutingModule,
       MatToolbarModule,
       MatButtonModule,
       MatCardModule,
       MatTableModule,
       MatMenuModule,
       HttpClientModule,
       BrowserAnimationsModule,
       MatDialogModule,
       MatIconModule,
       MsalModule,
       ],
       providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MsalInterceptor,
           multi: true,
       },
       {
           provide: MSAL_INSTANCE,
           useFactory: MSALInstanceFactory,
       },
       {
           provide: MSAL_GUARD_CONFIG,
           useFactory: MsalGuardConfigurationFactory,
       },
       MsalService,
       MsalBroadcastService,
       MsalGuard,
       ],
       bootstrap: [AppComponent, MsalRedirectComponent],
   })
   export class AppModule { }
   

   Esse código inicializa a instância MSAL e define o tipo de interação padrão para MSALGuard. Ele também fornece os serviços e componentes necessários para autenticação.

1. Abra src/app/app.component.ts o arquivo e substitua o conteúdo pelo seguinte código:

   // Required for Angular
   import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
   
   // Required for MSAL
   import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
   import { EventMessage, EventType, InteractionStatus, RedirectRequest } from '@azure/msal-browser';
   
   // Required for RJXS
   import { Subject } from 'rxjs';
   import { filter, takeUntil } from 'rxjs/operators';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent implements OnInit, OnDestroy {
     title = 'Angular - MSAL Example';
     loginDisplay = false;
     tokenExpiration: string = '';
     private readonly _destroying$ = new Subject<void>();
   
     constructor(
       @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     // On initialization of the page, display the page elements based on the user state
     ngOnInit(): void {
       this.msalBroadcastService.inProgress$
           .pipe(
           filter((status: InteractionStatus) => status === InteractionStatus.None),
           takeUntil(this._destroying$)
         )
         .subscribe(() => {
           this.setLoginDisplay();
         });
   
         // Used for storing and displaying token expiration
         this.msalBroadcastService.msalSubject$.pipe(filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)).subscribe(msg => {
         this.tokenExpiration=  (msg.payload as any).expiresOn;
         localStorage.setItem('tokenExpiration', this.tokenExpiration);
       });
     }
   
     // If the user is logged in, present the user with a "logged in" experience
     setLoginDisplay() {
       this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
     }
   
     // Log the user in and redirect them if MSAL provides a redirect URI otherwise go to the default URI
     login() {
       if (this.msalGuardConfig.authRequest) {
         this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
       } else {
         this.authService.loginRedirect();
       }
     }
   
     // Log the user out
     logout() {
       this.authService.logoutRedirect();
     }
   
     ngOnDestroy(): void {
       this._destroying$.next(undefined);
       this._destroying$.complete();
     }
   }
   

   O código integra o MSAL com o Angular para gerenciar a autenticação do usuário. Ele monitoriza as alterações de estado de início de sessão, exibe o estado de sessão, lida com eventos de aquisição de token, e fornece métodos para iniciar ou terminar a sessão de utilizadores com base na configuração do Microsoft Entra.

2. Guarde o ficheiro.

1. Abra src/app/app.component.ts e substitua o código pelo seguinte para iniciar sessão de um utilizador utilizando um pop-up. Este código usa a biblioteca MSAL Angular para autenticar um utilizador.

     import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
     import {
       MsalService,
       MsalBroadcastService,
       MSAL_GUARD_CONFIG,
       MsalGuardConfiguration,
     } from '@azure/msal-angular';
     import {
       AuthenticationResult,
       InteractionStatus,
       InteractionType,
       PopupRequest,
       RedirectRequest,
       EventMessage,
       EventType
     } from '@azure/msal-browser';
     import { Subject } from 'rxjs';
     import { filter, takeUntil } from 'rxjs/operators';
   
     @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css'],
     })
     export class AppComponent implements OnInit, OnDestroy {
       title = 'Microsoft identity platform';
       loginDisplay = false;
       isIframe = false;
   
       private readonly _destroying$ = new Subject<void>();
   
       constructor(
         @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
         private authService: MsalService,
         private msalBroadcastService: MsalBroadcastService,
       ) { }
   
       ngOnInit(): void {
         this.isIframe = window !== window.parent && !window.opener;
         this.setLoginDisplay();
         this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
   
         /**
          * You can subscribe to MSAL events as shown below. For more info,
          * visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md
          */
         this.msalBroadcastService.inProgress$
           .pipe(
             filter(
               (status: InteractionStatus) => status === InteractionStatus.None
             ),
             takeUntil(this._destroying$)
           )
           .subscribe(() => {
             this.setLoginDisplay();
             this.checkAndSetActiveAccount();
           });
   
         this.msalBroadcastService.msalSubject$
           .pipe(
             filter(
               (msg: EventMessage) => msg.eventType === EventType.LOGOUT_SUCCESS
             ),
             takeUntil(this._destroying$)
           )
           .subscribe((result: EventMessage) => {
             this.setLoginDisplay();
             this.checkAndSetActiveAccount();
           });
   
         this.msalBroadcastService.msalSubject$
           .pipe(
             filter(
               (msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS
             ),
             takeUntil(this._destroying$)
           )
           .subscribe((result: EventMessage) => {
             const payload = result.payload as AuthenticationResult;
             this.authService.instance.setActiveAccount(payload.account);
           });
       }
   
       setLoginDisplay() {
         this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
       }
   
       checkAndSetActiveAccount() {
         /**
          * If no active account set but there are accounts signed in, sets first account to active account
          * To use active account set here, subscribe to inProgress$ first in your component
          * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
          */
         let activeAccount = this.authService.instance.getActiveAccount();
   
         if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
           let accounts = this.authService.instance.getAllAccounts();
           // add your code for handling multiple accounts here
           this.authService.instance.setActiveAccount(accounts[0]);
         }
       }
   
       login() {
         if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
           if (this.msalGuardConfig.authRequest) {
             this.authService.loginPopup({
               ...this.msalGuardConfig.authRequest,
             } as PopupRequest)
               .subscribe((response: AuthenticationResult) => {
                 this.authService.instance.setActiveAccount(response.account);
               });
           } else {
             this.authService.loginPopup()
               .subscribe((response: AuthenticationResult) => {
                 this.authService.instance.setActiveAccount(response.account);
               });
           }
         } else {
           if (this.msalGuardConfig.authRequest) {
             this.authService.loginRedirect({
               ...this.msalGuardConfig.authRequest,
             } as RedirectRequest);
           } else {
             this.authService.loginRedirect();
           }
         }
       }
   
       logout() {
   
         if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
           this.authService.logoutPopup({
             account: this.authService.instance.getActiveAccount(),
           });
         } else {
           this.authService.logoutRedirect({
             account: this.authService.instance.getActiveAccount(),
           });
         }
       }
   
       // unsubscribe to events when component is destroyed
       ngOnDestroy(): void {
         this._destroying$.next(undefined);
         this._destroying$.complete();
       }
     }
   

   Este código monitoriza as alterações de estado de início de sessão, apresenta o estado de início de sessão e fornece métodos para iniciar ou terminar sessão de utilizadores com base na configuração do Microsoft Entra.