Kılavuz: Angular tek sayfalı uygulamanıza giriş ve çıkış ekleme

için geçerlidir: beyaz onay işareti simgesine sahip yeşil daire İş gücü kiracıları beyaz onay işareti simgesiyle yeşil daire (daha fazla bilgi)

Bu öğretici, Angular tek sayfalı uygulama (SPA) oluşturmayı ve Microsoft kimlik platformunu kullanarak kimlik doğrulaması eklemeyi gösteren serinin 2. bölümüdür. bu serininBölüm 1'de bir Angular SPA oluşturdunuz ve ilk yapılandırmaları eklediniz.

Bu öğreticide şunları yapacaksınız:

• Oturum açma ve oturum kapatma ekleme

Önkoşullar

• Önkoşulların ve adımların tamamlanması Öğreticisi'nde: Angular tek sayfalı uygulama oluşturma

Uygulamanıza oturum açma ve oturum kapatma işlevi ekleme

Bu bölümde, Angular uygulamanızda oturum açma ve oturum kapatma işlevlerini desteklemek için bileşenler ekleyeceksiniz. Bu bileşenler kullanıcıların oturumlarının kimliğini doğrulamasını ve yönetmesini sağlar. Kullanıcıları kimlik doğrulama durumlarına göre uygun bileşenlere yönlendirmek için uygulamaya yönlendirme ekleyeceksiniz.

Çalışan kiracısı

Angular uygulamanızda oturum açma ve oturum kapatma işlevlerini etkinleştirmek için şu adımları izleyin:

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

   <a class="navbar navbar-dark bg-primary" variant="dark" href="/">
       <a class="navbar-brand"> Microsoft Identity Platform </a>
       <a>
           <button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
           <button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Sign Out</button>
       </a>
   </a>
   <a class="profileButton">
       <a [routerLink]="['profile']" class="btn btn-secondary" *ngIf="loginDisplay">View Profile</a> 
   </a>
   <div class="container">
       <router-outlet></router-outlet>
   </div>
   

   Kod, Angular uygulamasında bir gezinti çubuğu uygular. Kullanıcı kimlik doğrulaması durumuna göre Oturum Aç ve Oturumu Kapat düğmelerini dinamik olarak görüntüler ve oturum açmış kullanıcılar için bir Profili Görüntüle düğmesi içerir ve uygulamanın kullanıcı arabirimini geliştirir. login() içindeki logout() ve src/app/app.component.ts yöntemleri, düğmeler seçildiğinde çağrılır.

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

   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required for the Angular routing service
   import { Routes, RouterModule } from '@angular/router';
   
   // Required for the "Profile" page
   import { ProfileComponent } from './profile/profile.component';
   
   // Required for the "Home" page
   import { HomeComponent } from './home/home.component';
   
   // MsalGuard is required to protect routes and require authentication before accessing protected routes
   import { MsalGuard } from '@azure/msal-angular';
   
   // Define the possible routes
   // Specify MsalGuard on routes to be protected
   // '**' denotes a wild card
   const routes: Routes = [
     {
       path: 'profile',
       component: ProfileComponent,
       canActivate: [
         MsalGuard
       ]
     },
     {
       path: '**',
       component: HomeComponent
     }
   ];
   
   // Create an NgModule that contains all the directives for the routes specified above
   @NgModule({
     imports: [RouterModule.forRoot(routes, {
       useHash: true
     })],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

   Kod parçacığı, Profil ve Ana Sayfa bileşenleri için yollar oluşturarak Angular uygulamasında yönlendirmeyi yapılandırıyor. MsalGuard, Profil yolunda kimlik doğrulamayı zorunlu kılar ve tüm eşleşmeyen yollar Home bileşenine yönlendirilir.

3. src/app/home/home.component.ts Dosyasını açın ve içeriğini aşağıdaki kodla değiştirin.

   // Required for Angular
   import { Component, OnInit } from '@angular/core';
   
   // Required for MSAL
   import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
   
   // Required for Angular multi-browser support
   import { EventMessage, EventType, AuthenticationResult } from '@azure/msal-browser';
   
   // Required for RJXS observables
   import { filter } from 'rxjs/operators';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html'
   })
   export class HomeComponent implements OnInit {
     constructor(
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     // Subscribe to the msalSubject$ observable on the msalBroadcastService
     // This allows the app to consume emitted events from MSAL
     ngOnInit(): void {
       this.msalBroadcastService.msalSubject$
         .pipe(
           filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
         )
         .subscribe((result: EventMessage) => {
           const payload = result.payload as AuthenticationResult;
           this.authService.instance.setActiveAccount(payload.account);
         });
     }
   }
   

   Kod, Microsoft Kimlik Doğrulama Kitaplığı (MSAL) ile tümleşen adlı HomeComponent bir Angular bileşeni ayarlar. Yaşam döngüsü kancası ngOnInit içinde, bileşen msalSubject$ öğesindeki MsalBroadcastService gözlemlenebilire abone olur ve oturum açma başarı olaylarını filtreler. Bir oturum açma olayı gerçekleştiğinde, kimlik doğrulama sonucunu alır ve içinde MsalServiceetkin hesabı ayarlar ve uygulamanın kullanıcı oturumlarını yönetmesini sağlar.

4. src/app/home/home.component.html Dosyasını açın ve içeriğini aşağıdaki kodla değiştirin.

   <div class="title">
       <h5>
           Welcome to the Microsoft Authentication Library For JavaScript - Angular SPA
       </h5>
       <p >View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
   </div>
   

   Kod, kullanıcılara uygulamaya hoş geldiniz diyerek Profili Görüntüle bağlantısına tıklayarak Microsoft Graph verilerini görüntülemelerini ister.

5. src/main.ts Dosyasını açın ve içeriğini aşağıdaki kodla değiştirin.

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   
   import { AppModule } from './app/app.module';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   Kod parçacığı, Angular'ın platform tarayıcısı dinamik modülünden platformBrowserDynamic ve uygulamanın modül dosyasından AppModule içeri aktarır. Ardından, Angular uygulamasını başlatmak için platformBrowserDynamic() kullanarak AppModule önyükler. Önyükleme işlemi sırasında oluşan hatalar yakalanıp konsola kaydedilir.

6. src/index.html Dosyasını açın ve içeriğini aşağıdaki kodla değiştirin.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>MSAL For JavaScript - Angular SPA</title>
     </head>
     <body>
       <app-root></app-root>
       <app-redirect></app-redirect>
     </body>
   </html>
   

   Kod parçacığı, dil olarak İngilizce ve UTF-8 karakter kodlaması içeren bir HTML5 belgesi tanımlar. Başlığı "JavaScript için MSAL - Angular SPA" olarak ayarlar. Gövde, ana giriş noktası olarak <app-root> bileşenini ve yeniden yönlendirme işlevleri için <app-redirect> bileşenini içerir.

7. src/styles.css Dosyasını açın ve içeriğini aşağıdaki kodla değiştirin.

   body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
       'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
       sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
       monospace;
   }
   
   .app {
     text-align: center;
     padding: 8px;
   }
   
   .title{
     text-align: center;
     padding: 18px;
   }
   
   
   .profile{
     text-align: center;
     padding: 18px;
   }
   
   .profileButton{
     display: flex;
     justify-content: center;
     padding: 18px;
   }
   

   CSS kodu, gövde yazı tipini modern bir sans-serif yığınına ayarlayarak, varsayılan kenar boşluklarını kaldırarak ve gelişmiş okunabilirlik için yazı tipi düzeltme uygulayarak web sayfasını stiller. Metni ve .app, .title ve .profile sınıflarındaki nesneleri ortalar ve bu sınıflara dolgular eklerken, .profileButton sınıfı öğelerini ortalamak için flexbox kullanır.

dış kiracı

1. src/app/app.component.html açın ve mevcut kodu aşağıdaki kod parçacığıyla değiştirin.

     <mat-toolbar color="primary">
         <a class="title" href="/">{{ title }}</a>
         <div class="toolbar-spacer"></div>
         <a mat-button [routerLink]="['guarded']">Guarded Component</a>
         <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
         <button mat-raised-button color="accent" *ngIf="loginDisplay" (click)="logout()">Logout</button>
       </mat-toolbar>
       <div class="container">
         <!--This is to avoid reload during acquireTokenSilent() because of hidden iframe -->
         <router-outlet *ngIf="!isIframe"></router-outlet>
       </div>
       <footer *ngIf="loginDisplay">
         <mat-toolbar>
           <div class="footer-text"> How did we do? <a
               href="https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR_ivMYEeUKlEq8CxnMPgdNZUNDlUTTk2NVNYQkZSSjdaTk5KT1o4V1VVNS4u"
               target="_blank"> Share your experience with us!</a>
           </div>
         </mat-toolbar>
       </footer>
   

   Bu kod parçacığı Angular uygulamasına bir gezinti çubuğu ekler. Gezinti çubuğu, kullanıcıların uygulamada oturum açıp kapatmasını sağlayan bir başlık ve Oturum Açma ve Oturumu Kapatma düğmeleri içerir.

2. src/app/app.component.css açın ve kodu aşağıdaki kod parçacığıyla değiştirin.

   .toolbar-spacer {
     flex: 1 1 auto;
   }
   
   a.title {
     color: white;
   }
   
   footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     color: white;
     text-align: center;
   }
   
   .footer-text {
     font-size: small;
     text-align: center;
     flex: 1 1 auto;
   }
   

   Bu kod parçacığı, Angular uygulamasının gezinti çubuğunu ve alt kısmını şekillendirir. Başlığın rengini beyaz olarak ayarlar, alt bilgi metnini ortaya hizalar ve alt bilgi metninin boyutunu ayarlar.

3. src/app/app-routing.module.ts açın ve dosyanın tüm içeriğini aşağıdaki kod parçacığıyla değiştirin. Bu, home ve guarded bileşenlerine yollar ekler.

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { BrowserUtils } from '@azure/msal-browser';
   import { MsalGuard } from '@azure/msal-angular';
   
   import { HomeComponent } from './home/home.component';
   import { GuardedComponent } from './guarded/guarded.component';
   
   /**
    * MSAL Angular can protect routes in your application
       * using MsalGuard. For more info, visit:
       * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/initialization.md#secure-the-routes-in-your-application
       */
   const routes: Routes = [
       {
       path: 'guarded',
       component: GuardedComponent,
       canActivate: [
           MsalGuard
       ]
       },
       {
       path: '',
       component: HomeComponent,
       },
   ];
   
   @NgModule({
       imports: [
       RouterModule.forRoot(routes, {
           // Don't perform initial navigation in iframes or popups
           initialNavigation:
           !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup()
               ? 'enabledNonBlocking'
               : 'disabled', // Set to enabledBlocking to use Angular Universal
       }),
       ],
       exports: [RouterModule],
   })
   export class AppRoutingModule { }
   

4. src/styles.css açın ve mevcut kodu aşağıdaki kod parçacığıyla değiştirin.

   @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
   html, body { height: 100%; }
   body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   

   Bu kod parçacığı, Önceden oluşturulmuş Angular Malzeme temasını içeri aktarır ve HTML ve gövde öğelerinin yüksekliğini ayarlar. Varsayılan kenar boşluğunu kaldırır ve yazı tipi ailesini ayarlar.

5. src/app/home/home.component.ts açın ve mevcut kodu aşağıdaki kod parçacığıyla değiştirin.

   import { Component, Inject, OnInit } from '@angular/core';
   import { Subject } from 'rxjs';
   import { filter } from 'rxjs/operators';
   
   import { MsalBroadcastService, MsalGuardConfiguration, MsalService, MSAL_GUARD_CONFIG } from '@azure/msal-angular';
   import { AuthenticationResult, InteractionStatus, InteractionType } from '@azure/msal-browser';
   
   import { createClaimsTable } from '../claim-utils';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css'],
   })
   export class HomeComponent implements OnInit {
     loginDisplay = false;
     dataSource: any = [];
     displayedColumns: string[] = ['claim', 'value', 'description'];
   
     private readonly _destroying$ = new Subject<void>();
   
     constructor(
       @Inject(MSAL_GUARD_CONFIG)
       private msalGuardConfig: MsalGuardConfiguration,
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     ngOnInit(): void {
   
       this.msalBroadcastService.inProgress$
         .pipe(
           filter((status: InteractionStatus) => status === InteractionStatus.None)
         )
         .subscribe(() => {
           this.setLoginDisplay();
           this.getClaims(
             this.authService.instance.getActiveAccount()?.idTokenClaims
           );
         });
     }
   
     setLoginDisplay() {
       this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
     }
   
     getClaims(claims: any) {
       if (claims) {
         const claimsTable = createClaimsTable(claims);
         this.dataSource = [...claimsTable];
       }
     }
   
     signUp() {
       if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
         this.authService.loginPopup({
           scopes: [],
           prompt: 'create',
         })
           .subscribe((response: AuthenticationResult) => {
             this.authService.instance.setActiveAccount(response.account);
           });
       } else {
         this.authService.loginRedirect({
           scopes: [],
           prompt: 'create',
         });
       }
   
     }
   
     // unsubscribe to events when component is destroyed
     ngOnDestroy(): void {
       this._destroying$.next(undefined);
       this._destroying$.complete();
     }
   }
   

   Bu kod parçacığı, Angular uygulamasının giriş sayfasını yönetmekle sorumlu olan HomeComponent sınıfını tanımlar. Bileşen, uygulamanın kimlik doğrulama durumunu izlemek için inProgress$ üzerinden gözlemlenebilir olan MsalBroadcastService'a abone olur. Kimlik doğrulama durumu değiştiğinde, bileşen oturum açma görüntüsünü güncelleştirir ve talepleri etkin hesabın kimlik belirtecinden alır. signUp() yöntemi, kullanıcı kimlik doğrulama işlemini başlatan Kaydol düğmesine tıkladığında çağrılır.

6. src/app/home/home.component.html açın ve var olan kodu aşağıdaki kod parçacığıyla değiştirin. Bu kod, uygulamanın giriş sayfasının HTML öğelerini tanımlar.

   <mat-card class="card-section" *ngIf="!loginDisplay">
     <mat-card-title>Angular single-page application built with MSAL Angular</mat-card-title>
     <mat-card-subtitle>Sign in with Microsoft Entra External ID</mat-card-subtitle>
     <mat-card-content>This sample demonstrates how to configure MSAL Angular to sign up, sign in and sign out with Microsoft Entra External ID</mat-card-content>
     <button mat-raised-button color="primary" (click)="signUp()">Sign up</button>
   </mat-card>
   <br>
   <p class="text-center" *ngIf="loginDisplay"> See below the claims in your <strong> ID token </strong>. For more
     information, visit: <span>
       <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#claims-in-an-id-token">
         docs.microsoft.com </a>
     </span>
   </p>
   <div id="table-container">
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="loginDisplay">
       <!-- Claim Column -->
       <ng-container matColumnDef="claim">
         <th mat-header-cell *matHeaderCellDef> Claim </th>
         <td mat-cell *matCellDef="let element"> {{element.claim}} </td>
       </ng-container>
       <!-- Value Column -->
       <ng-container matColumnDef="value">
         <th mat-header-cell *matHeaderCellDef> Value </th>
         <td mat-cell *matCellDef="let element"> {{element.value}} </td>
       </ng-container>
       <!-- Value Column -->
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
         <td mat-cell *matCellDef="let element"> {{element.description}} </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
   

   Bu kod parçacığı, Angular uygulamasının giriş sayfasının HTML öğelerini tanımlar. Kullanıcıların Microsoft Entra Dış Kimliği ile kimlik doğrulaması için Kaydol düğmesini içeren bir kart bölümü içerir.

7. src/app/home/home.component.cssaçın. Var olan tüm kodları aşağıdaki kod parçacığıyla değiştirin.

   #table-container {
     height: '100vh';
     overflow: auto;
   }
   
   table {
     margin: 3% auto 1% auto;
     width: 70%;
   }
   
   .mat-row {
     height: auto;
   }
   
   .mat-cell {
     padding: 8px 8px 8px 0;
   }
   
   p {
     text-align: center;
   }
   
   .card-section {
     margin: 10%;
     padding: 5%;
   }
   

   Bu kod parçacığı, Angular uygulamasının giriş sayfasının HTML öğelerini stiller. Tablo kapsayıcısının yükseklik ve taşma özelliklerini ayarlar, tablonun kenar boşluğu ve genişliğini ayarlar ve paragraf öğesindeki metni hizalar.

Sonraki adım

Öğreticisi: Öğretici: Angular SPA ile kullanıcı verilerini ayıklama