Menggunakan MSAL Guard untuk melindungi rute

MSAL Angular menyediakan MsalGuard, kelas yang dapat Anda gunakan untuk melindungi rute dan memerlukan autentikasi sebelum mengakses rute yang dilindungi. Dokumen ini menyediakan informasi selengkapnya tentang mengonfigurasi dan pertimbangan saat menggunakan MsalGuard.

MsalGuard adalah kelas kenyamanan yang dapat Anda gunakan untuk meningkatkan pengalaman pengguna, tetapi tidak boleh diandalkan untuk keamanan. Penyerang berpotensi melewati perlindungan di sisi klien, dan Anda harus memastikan bahwa server tidak mengembalikan data apa pun yang seharusnya tidak dapat diakses oleh pengguna.

Anda mungkin juga memerlukan penjaga rute yang memenuhi kebutuhan tertentu. Kami mendorong Anda untuk membuat guard Anda sendiri jika MsalGuard tidak memenuhi semua kebutuhan tersebut.

Konfigurasi

Mengonfigurasi MsalGuard di app.module.ts dan app-routing.module.ts

MsalGuard dapat ditambahkan ke aplikasi Anda sebagai penyedia di app.module.ts, dengan konfigurasinya. Import tersebut menerima sebuah instans MSAL, serta dua objek konfigurasi khusus Angular. Argumen kedua adalah MsalGuardConfiguration objek, yang berisi nilai untuk interactionType, opsional authRequest, dan opsional loginFailedRoute.

kemudian MsalGuard digunakan untuk melindungi rute di app-routing.module.ts. Sampel kode di bawah ini menunjukkan penambahan MsalGuard ke Profile rute. Melindungi Profile rute berarti bahwa meskipun pengguna tidak masuk menggunakan Login tombol , jika mereka mencoba mengakses Profile rute atau mengklik Profile tombol , MsalGuard akan meminta pengguna untuk mengautentikasi melalui popup atau pengalihan sebelum menampilkan Profile halaman.

Konfigurasi Anda mungkin terlihat seperti di bawah ini. Lihat dokumentasi konfigurasi kami untuk mengetahui cara lain mengonfigurasi MSAL Angular untuk aplikasi Anda, serta bagian di bawah ini untuk detail lebih lanjut tentang objek MsalConfiguration dan antarmuka untuk perutean.

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

Jenis Interaksi

Mengatur jenis interaksi menentukan bagaimana MsalGuard akan secara interaktif meminta masuk. InteractionType dapat diimpor dari @azure/msal-browser dan diatur ke Popup atau Redirect.

AuthRequest opsional

Opsional authRequest adalah fitur lanjutan yang tidak diperlukan. Namun, kami menyarankan agar menyetel authRequest pada MsalGuardConfiguration dengan scopes sehingga persetujuan dapat diperoleh untuk cakupan akses sejak awal. Jika persetujuan untuk scopes belum diberikan sejak awal, cakupan akses dapat diperoleh secara bertahap. Ini dapat mengakibatkan dialog persetujuan disajikan kepada pengguna aplikasi Anda beberapa kali.

Memberikan persetujuan untuk cakupan akses sejak awal didemonstrasikan dalam contoh kode di atas, dan dalam sampel kami.

Semua parameter yang mungkin untuk objek permintaan dapat ditemukan di sini: PopupRequest dan RedirectRequest.

Rute Gagal Masuk

String loginFailedRoute dapat diatur pada MsalGuardConfiguration. MsalGuard akan mengalihkan ke rute ini jika login diperlukan dan gagal.

Lihat sampel Angular untuk contoh penerapannya dalam konfigurasi dan modul perutean aplikasi.

Perhatikan bahwa pengalihan saat terjadi kegagalan tidak tersedia untuk aplikasi Angular 9 yang menggunakan antarmuka CanLoad karena perbedaan tipe dasar.

Interfaces

Selain canActivate, MsalGuard juga mengimplementasikan canActivateChild dan canLoad, dan ini dapat ditambahkan ke definisi rute Anda dalam app-routing.module.ts. Anda dapat melihat penggunaannya pada aplikasi sampel MSAL Angular v2 Angular 11 versi lama kami, serta di bawah ini. Untuk informasi selengkapnya tentang antarmuka, lihat dokumen 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]
    },
];

Pertimbangan saat menggunakan MSAL Guard

Menggunakan MSAL Guard di beranda

Menetapkan MsalGuard di halaman awal adalah rekomendasi kami jika Anda ingin pengguna diminta untuk masuk saat mereka mengakses aplikasi Anda. Kami tidak menyarankan untuk memanggil login di ngOnInit dalam app.component.ts, karena hal ini dapat menyebabkan perulangan saat pengalihan.

Rekomendasi tambahan kami tergantung pada strategi perutean Anda dan dapat Anda temukan pada bagian berikut.

Menggunakan MSAL Guard dengan perutean jalur

Saat menggunakan PathLocationStrategy dan mengalihkan dengan aplikasi Angular Anda, sebaiknya gunakan rute khusus untuk pengalihan, yang akan membantu mencegah perulangan. Rute ini juga harus menjadi redirectUri Anda, dan tidak boleh dilindungi oleh MsalGuard.

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

Agar pengguna masuk saat membuka aplikasi Anda, saat menggunakan PathLocationStrategy, kami sarankan:

  • Mengatur MsalGuard di halaman awal Anda
  • Atur redirectUri Anda ke 'http://localhost:4200/auth'
  • Menambahkan path 'auth' ke rute Anda, menetapkan MsalRedirectComponent sebagai komponen (rute ini tidak boleh dilindungi oleh MsalGuard)
  • Memastikan MsalRedirectComponent di-bootstrap
  • Secara opsional: menambahkan MsalGuard ke semua rute jika Anda ingin semua rute Anda dilindungi

Sampel Modul Angular kami menggunakan PathLocationStrategy dan menunjukkan cara melindungi rute dengan MsalGuard.

Menggunakan MSAL Guard dengan perutean hash

Saat menggunakan HashLocationStrategy dengan aplikasi Angular Anda, kami sangat menyarankan agar Anda menetapkan rute placeholder (seperti /code) di app-routing.module.ts untuk mencegah router Angular terpicu saat Microsoft Entra ID mengembalikan respons kode autentikasi di hash URL, karena tanpa melakukannya, Anda mungkin mengalami masalah saat menyelesaikan proses autentikasi. Rute tempat penampung ini tidak boleh dilindungi oleh MsalGuard, dan tidak boleh menunjuk ke komponen yang memicu interaksi atau melakukan panggilan API yang dilindungi pada pemuatan halaman.

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

redirectUri di Konfigurasi MSAL juga harus disetel ke halaman beranda.

Untuk membuat pengguna masuk saat membuka aplikasi Anda, ketika menggunakan HashLocationStrategy, kami merekomendasikan:

  • Mengatur MsalGuard di halaman awal Anda
  • Tidak menetapkan MsalGuard untuk rute placeholder (misalnya /code, /error)
  • Memastikan MsalRedirectComponent di-bootstrap
  • Secara opsional: menambahkan MsalGuard ke semua rute lainnya jika Anda ingin semua rute Anda dilindungi

Lihat sampel MSAL Angular v2 Angular 11 kami yang lebih lama, yang menggunakan HashLocationStrategy dan menunjukkan cara melindungi rute dengan MsalGuard.

Perubahan dari msal-angular v1 ke v2

  • Konfigurasi: MsalAngularConfiguration telah tidak digunakan lagi dan tidak lagi berfungsi. Mengonfigurasi MsalGuard sekarang dilakukan melalui MsalGuardConfiguration.
  • Antarmuka: MsalGuard sekarang mengimplementasikan CanActivateChild dan CanLoad selain CanActivate. Lihat bagian di atas tentang Interfaces untuk detail selengkapnya.
  • Pengalihan saat gagal: konfigurasi MsalGuard kini memiliki loginFailedRoute yang dapat dikonfigurasi. Lihat bagian di atas pada loginFailedRoute untuk detailnya.
  • Last updated on