Compartilhar via

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

Aplica-se a: Círculo verde com um símbolo de marca de seleção branco. Locatários da força de trabalho Círculo verde com um símbolo de marca de seleção branco. Locatários externos (saiba mais)

Este tutorial é a primeira parte de uma série que demonstra a criação de um SPA (aplicativo de página única) Angular, adicionando autenticação e extraindo dados do usuário usando a plataforma de identidade da Microsoft.

Neste tutorial, você:

  • Criar um novo projeto Angular
  • Definir as configurações do aplicativo
  • Adicionar o código de autenticação ao aplicativo

Pré-requisitos

Criar um novo projeto Angular

Nesta seção, você criará um novo projeto Angular usando a CLI angular no Visual Studio Code. Escolha a guia apropriada com base no tipo de locatário.

Para criar o projeto Angular do zero, siga estas etapas:

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

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

    O comando cria um projeto Angular chamado msal-angular-tutorial com roteamento habilitado, CSS para estilização e modo estrito desativado.

  2. Mudar 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 os pacotes Azure MSAL browser, MSAL Angular do Azure e Bootstrap.

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

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

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

  5. Gerar componentes Início e Perfil:

    ng generate component home
ng generate component profile

    Os comandos geram os componentes Início e Perfil no projeto Angular.

  6. Remova arquivos e código 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 todo o aplicativo.

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

Após concluir essas etapas, a estrutura do projeto deverá se parecer com:

.
├── 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

Definir as configurações do aplicativo

Nesta seção, você definirá as configurações do aplicativo para autenticação. Usaremos os valores registrados durante o registro do aplicativo para configurar o aplicativo para autenticação. Escolha a guia apropriada com base no tipo de locatário.

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

  1. Abra o arquivo src/app/app.module.ts 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 a MSAL para autenticação do usuário e proteção de API. Ele configura o aplicativo com MsalInterceptor para proteger as solicitações de API e MsalGuard para proteger rotas, enquanto define os principais componentes e serviços para autenticação. Substitua os valores a seguir pelos valores obtidos do Centro de administração do Microsoft Entra.

    • Substitua Enter_the_Application_Id_Here pelo Application (client) ID do registro do aplicativo.
    • Substitua Enter_the_Tenant_Info_Here pelo Directory (tenant) ID do registro do aplicativo.

  2. Salve o arquivo.

Adicionar o código de autenticação ao aplicativo

Nesta seção, você adicionará o código de autenticação ao aplicativo para lidar com a autenticação do usuário e o gerenciamento de sessão. Escolha a guia apropriada com base no tipo de locatário.

  1. Abra o arquivo src/app/app.component.ts 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 a MSAL com o Angular para gerenciar a autenticação do usuário. Ele monitora as alterações de status de entrada, exibe o estado de entrada, gerencia eventos de aquisição de token e fornece métodos para logar ou deslogar usuários com base na configuração do Microsoft Entra.

  2. Salve o arquivo.

Próximas etapas

Tutorial: Adicionar componentes funcionais de entrada e saída em um aplicativo Angular