Eğitim: Angular uygulaması oluşturma ve kimlik doğrulama için hazırlık yapma

Angular projesini sıfırdan oluşturmak için şu adımları izleyin:

1. Yeni bir Angular projesi oluşturmak için bir terminal penceresi açın ve aşağıdaki komutu çalıştırın:

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

   Komut, msal-angular-tutorial adlı, yönlendirme etkin, stil için CSS kullanılan ve katı modu devre dışı bırakılmış yeni bir Angular projesi oluşturur.

2. Proje dizinine geçin:

   cd msal-angular-tutorial
   

3. Uygulama bağımlılıklarını yükleme:

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

   Komutu npm install @azure/msal-browser @azure/msal-angular bootstrap Azure MSAL tarayıcısını, Azure MSAL Angular'ı ve Bootstrap paketlerini yükler.

4. Bootstrap'ın CSS yolunu açın angular.json ve diziye styles ekleyin:

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

   Kod, Bootstrap CSS'yi dosyadaki stiller dizisine angular.json ekler.

5. Giriş ve Profil bileşenleri oluşturma:

   ng generate component home
   ng generate component profile
   

   Komutlar, Angular projesinde Giriş ve Profil bileşenlerini oluşturur.

6. Gereksiz dosyaları ve kodu projeden kaldırın:

   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
   

   Komutlar, gereksiz dosyaları ve kodu projeden kaldırır.

7. app.routes.ts'yi Visual Studio Code kullanarak app-routing.module.ts olarak yeniden adlandırın ve app.routes.ts'nin uygulama genelindeki tüm başvurularını güncelleyin.

8. app.config.ts'yi Visual Studio Code kullanarak app.module.ts olarak yeniden adlandırın ve uygulama genelinde app.config.ts ile ilgili tüm başvuruları güncelleyin.

Bu adımları tamamladıktan sonra proje yapısı şöyle görünmelidir:

.
├── 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. Visual Studio Code'u açın, Dosya>Klasör Aç...seçeneğini seçin. Projenizi oluşturmak istediğiniz konuma gidin ve bu konumu seçin.

2. Terminal>Yeni Terminal'ni seçerek yeni bir terminal açın.

3. angularspalocaladlı yeni bir Angular projesi oluşturmak için aşağıdaki komutları çalıştırın, Angular Malzeme bileşen kitaplıklarını, MSAL Browser'ı, MSAL Angular'ı yükleyin ve ev ve korumalı bileşenler oluşturun.

   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
   

Uygulamayı kimlik doğrulaması için yapılandırmak üzere uygulama kaydı sırasında kaydedilen değerleri kullanacağız. Şu adımları izleyin:

1. src/app/app.module.ts Dosyasını açın ve içeriğini aşağıdaki kodla değiştirin:

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

   Kod, kullanıcı kimlik doğrulaması ve API koruması için MSAL'yi ayarlar. MsalInterceptor ve MsalGuard ile API isteklerinin güvenliğini sağlamak ve yolları korumak için uygulamayı yapılandırır, kimlik doğrulama için temel bileşenleri ve hizmetleri tanımlar. Aşağıdaki değerleri Microsoft Entra yönetim merkezindeki değerlerle değiştirin.

   • Uygulama kaydındaki Application (client) ID ile Enter_the_Application_Id_Here öğesini değiştirin.
   • Uygulama kaydındaki Directory (tenant) ID ile Enter_the_Tenant_Info_Here öğesini değiştirin.

2. Dosyayı kaydedin.

1. src/app/ klasöründe auth-config.ts adlı yeni bir dosya oluşturun ve aşağıdaki kod parçacığını ekleyin. Bu dosya kimlik doğrulama parametrelerini içerir. Bu parametreler Angular ve MSAL Angular yapılandırmalarını başlatmak için kullanılır.

   
   /**
    * 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. Aşağıdaki değerleri Microsoft Entra yönetim merkezindeki değerlerle değiştirin:

   • Enter_the_Application_Id_Here değerini bulun ve Microsoft Entra yönetim merkezine kaydettiğiniz uygulamanın Uygulama Kimliği (clientId) ile değiştirin.
   • yetkilisinde Enter_the_Tenant_Subdomain_Here bulun ve kiracınızın alt etki alanıyla değiştirin. Örneğin, kiracıya ait birincil etki alanınız contoso.onmicrosoft.comolduğunda contosokullanın. Kiracı adınızı bilmiyorsanız, kiracı ayrıntılarınızı nasıl okuyacağınızı öğrenin .

3. Dosyayı kaydedin.

4. src/app/app.module.ts açın ve aşağıdaki kod parçacığını ekleyin.

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

   Bu kod MSAL örneğini başlatır ve MSALGuard için varsayılan etkileşim türünü ayarlar. Ayrıca kimlik doğrulaması için gerekli hizmetleri ve bileşenleri sağlar.

1. dosyasını açın src/app/app.component.ts ve içeriğini aşağıdaki kodla değiştirin:

   // 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();
     }
   }
   

   Kod, kullanıcı kimlik doğrulamasını yönetmek için MSAL'yi Angular ile tümleştirir. Oturum açma durumu değişikliklerini dinler, oturum açma durumunu görüntüler, belirteç alma olaylarını işler ve Microsoft Entra yapılandırmasına göre kullanıcıların oturumunu açmak veya kapatmak için yöntemler sağlar.

2. Dosyayı kaydedin.

1. src/app/app.component.ts açın ve bir kullanıcıyı erişim noktası (POP) kullanarak oturum açmak için kodu aşağıdakiyle değiştirin. Bu kod, bir kullanıcıda oturum açmak için MSAL Angular kitaplığını kullanır.

     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();
       }
     }
   

   Bu kod oturum açma durumu değişikliklerini dinler, oturum açma durumunu görüntüler ve Microsoft Entra yapılandırmasına göre kullanıcıların oturumunu açma veya kapatma yöntemleri sağlar.