Use o MSAL Guard para proteger rotas

O MSAL Angular fornece MsalGuarduma classe que você pode usar para proteger rotas e exigir autenticação antes de acessar a rota protegida. Este documento fornece mais informações sobre configuração e considerações ao usar o MsalGuard.

MsalGuard é uma classe de conveniência que você pode usar para melhorar a experiência do usuário, mas ela não deve ser confiada para segurança. Os invasores podem potencialmente contornar os guardas do lado do cliente e você deve garantir que o servidor não retorne nenhum dado que o usuário não deve acessar.

Você também pode precisar de um guardião de rota que atenda a necessidades específicas. Recomendamos que você escreva seu próprio guardião se MsalGuard não atender a todas essas necessidades.

Configurações

Configurando o MsalGuard nos arquivos app.module.ts e app-routing.module.ts

O MsalGuard pode ser adicionado ao seu aplicativo como um provedor em app.module.ts, com sua configuração. As importações utilizam uma instância da MSAL, bem como dois objetos de configuração específicos do Angular. O segundo argumento é um MsalGuardConfiguration objeto, que contém os valores para interactionType, um opcional authRequeste um opcional loginFailedRoute.

O MsalGuard é então usado para proteger rotas no app-routing.module.ts. O exemplo de código abaixo demonstra como adicionar o MsalGuard à rota Profile. Proteger a rota Profile significa que, mesmo que um usuário não faça login usando o botão Login, se ele tentar acessar a rota Profile ou clicar no botão Profile, o MsalGuard solicitará que o usuário se autentique por meio de uma janela pop-up ou de redirecionamento antes de mostrar a página Profile.

Sua configuração pode se parecer com a abaixo. Consulte nosso documento de configuração sobre outras maneiras de configurar o MSAL Angular para seu aplicativo e as seções abaixo para obter mais detalhes sobre o MsalConfiguration objeto e as interfaces para roteamento.

// app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { MsalModule, MsalRedirectComponent, MsalGuard } from '@azure/msal-angular'; // Import MsalInterceptor
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            // MSAL Configuration
        }), {
            // MSAL Guard Configuration
            interactionType: InteractionType.Redirect,
            authRequest: {
                scopes: ['user.read']
            },
            loginFailedRoute: '/login-failed'
        }, {
            // MSAL Interceptor Configurations
        }),
        AppRoutingModule
    ],
    providers: [
        // ...
        MsalGuard
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { MsalGuard } from '@azure/msal-angular';

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        path: '',
        component: HomeComponent
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Tipo de Interação

Definir o tipo de interação determina como a MsalGuard solicitação de logon será solicitada interativamente. O InteractionType pode ser importado de @azure/msal-browser e definido como Popup ou Redirect.

authRequest opcional

O opcional authRequest é um recurso avançado que não é necessário. No entanto, recomendamos definir authRequest no MsalGuardConfiguration com scopes para que o consentimento possa ser obtido para os escopos antecipadamente. Se o consentimento para scopes não for fornecido de início, os escopos poderão ser obtidos de forma incremental. Isso pode resultar em um diálogo de consentimento sendo apresentado ao usuário do aplicativo várias vezes.

Consentir com os escopos antecipadamente é demonstrado nos exemplos de código acima e em nossos exemplos.

Todos os parâmetros possíveis para o objeto de solicitação podem ser encontrados aqui: PopupRequest e RedirectRequest.

Rota de Falha de Login

A loginFailedRoute cadeia de caracteres pode ser definida em MsalGuardConfiguration. O MsalGuard redirecionará para esta rota se o login for necessário e falhar.

Consulte o exemplo angular para obter exemplos de implementação no módulo de configuração e roteamento de aplicativo.

Observe que o redirecionamento em caso de falha não está disponível para aplicativos Angular 9 que usam a interface CanLoad devido às diferenças entre os tipos base.

Interfaces

Além de canActivate, MsalGuard também implementa canActivateChild e canLoad, e eles podem ser adicionados às definições de rota em app-routing.module.ts. Você pode vê-los sendo usados em nosso aplicativo de exemplo mais antigo do MSAL Angular v2 para Angular 11, bem como abaixo. Para obter mais informações sobre interfaces, consulte os documentos do Angular.

const routes: Routes = [
    {
        path: 'profile',
        canActivateChild: [MsalGuard],
        children: [
        {
            path: '',
            component: ProfileComponent
        },
        {
            path: 'detail',
            component: DetailComponent
        }
        ]
    },
    { 
        path: 'lazyLoad', 
        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
        canLoad: [MsalGuard]
    },
];

Considerações ao usar o MSAL Guard

Usando o MSAL Guard na página inicial

Definir o MsalGuard na página inicial é nossa recomendação se você quiser que os usuários sejam solicitados a fazer logon quando acessarem seu aplicativo. Não recomendamos chamar login no ngOnInit em app.component.ts, pois isso pode causar loops com redirecionamentos.

Nossas recomendações adicionais dependem da estratégia de roteamento e podem ser encontradas nas seções abaixo.

Usando o Guardião MSAL com roteamento de caminho

Ao usar o PathLocationStrategy e redirecionamentos com seu aplicativo Angular, recomendamos usar uma rota dedicada para redirecionamentos, o que ajudará a evitar loops. Esta rota também deve ser seu redirectUrie não deve ser protegida pelo MsalGuard.

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        // Dedicated route for redirects
        path: 'auth', 
        component: MsalRedirectComponent
    },
    {
        path: '',
        component: HomeComponent
    }
];

Para fazer logon dos usuários ao acessar seu aplicativo, ao usar o PathLocationStrategy, recomendamos:

  • Definindo MsalGuard na sua página inicial
  • Definir o seu redirectUri para 'http://localhost:4200/auth'
  • Adicionando um 'auth' caminho às suas rotas, definindo como MsalRedirectComponent o componente (essa rota não deve ser protegida pelo MsalGuard)
  • Certificando-se de que o MsalRedirectComponent está inicializado
  • Opcionalmente: adicionar MsalGuard a todas as suas rotas se você quiser todas as suas rotas protegidas

Nosso exemplo de Módulos Angular usa o PathLocationStrategy e demonstra como proteger rotas com o MsalGuard.

Usando o MSAL Guard com roteamento de hash

Ao usar o HashLocationStrategy com seu aplicativo Angular, recomendamos fortemente definir rotas de placeholder (como /code) em seu app-routing.module.ts para evitar acionar o roteador do Angular quando o Microsoft Entra ID retornar a resposta com o código de autenticação no hash, pois, sem isso, você poderá ter problemas para concluir a autenticação. Essas rotas placeholder não devem ser protegidas por MsalGuard, e não devem apontar para um componente que dispare interação ou faça chamadas protegidas à API ao carregar a página.

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [MsalGuard]
  },
  {
    // Needed for hash routing
    path: 'code',
    component: HomeComponent
  },
  {
    path: '',
    component: HomeComponent
  }
];

O redirectUri na configuração do MSAL também deve ser definido como a página inicial.

Para fazer logon dos usuários ao acessar seu aplicativo, ao usar o HashLocationStrategy, recomendamos:

  • Definindo MsalGuard na sua página inicial
  • Não definir o MsalGuard nas rotas com placeholder (por exemplo, /code, /error)
  • Certificando-se de que o MsalRedirectComponent está inicializado
  • Opcionalmente: adicionar MsalGuard a todas as outras rotas se você quiser que todas as suas rotas estejam protegidas

Veja nosso exemplo antigo MSAL Angular v2 Angular 11, que usa o HashLocationStrategy e demonstra como proteger rotas com o MsalGuard.

Alterações de msal-angular v1 para v2

  • Configuração: MsalAngularConfiguration foi preterida e não funciona mais. A configuração do MsalGuard agora é feita por meio do MsalGuardConfiguration.
  • Interfaces: MsalGuard agora implementa CanActivateChild e CanLoad além de CanActivate. Consulte a seção acima Interfaces para obter mais detalhes.
  • Redirecionamento em caso de erro: MsalGuard a configuração agora conta com um loginFailedRoute configurável. Consulte a seção acima sobre o loginFailedRoute para obter detalhes.
  • Last updated on