Aracılığıyla paylaş

Azure Active Directory B2C kullanarak kendi Angular Uygulamanızda kimlik doğrulamasını etkinleştirme

Önemli

1 Mayıs 2025 tarihinden itibaren Azure AD B2C artık yeni müşteriler için satın alınamayacak. SSS bölümünden daha fazla bilgi edinebilirsiniz.

Bu makalede, kendi Angular tek sayfalı uygulamanıza (SPA) Azure Active Directory B2C (Azure AD B2C) kimlik doğrulaması ekleme adımları gösterilmektedir. Angular uygulamasını Angular için MSAL kimlik doğrulama kitaplığıyla tümleştirmeyi öğrenin.

Bu makaleyi örnek bir Angular tek sayfalı uygulamada kimlik doğrulamasını yapılandırma başlıklı ilgili makaleyle birlikte kullanın. Örnek Angular uygulamasını kendi Angular uygulamanızla değiştirin. Bu makaledeki adımları tamamladıktan sonra uygulamanız Azure AD B2C aracılığıyla oturum açmayı kabul edecektir.

Önkoşullar

Örnek angular tek sayfalı uygulamada kimlik doğrulamasını yapılandırma makalesindeki adımları tamamlayın.

Angular uygulama projesi oluşturma

Mevcut bir Angular uygulama projesini kullanabilir veya yeni bir proje oluşturabilirsiniz. Yeni bir proje oluşturmak için aşağıdaki komutları çalıştırın.

Komutlar:

  1. npm paket yöneticisini kullanarak Angular CLI'yi yükleyin.
  2. Yönlendirme modülüyle Angular çalışma alanı oluşturun. Uygulama adı şeklindedir msal-angular-tutorial. Geçerli bir Angular uygulama adıyla, örneğin contoso-car-service, değiştirebilirsiniz.
  3. Uygulama dizini klasörüne geçin.
npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

Bağımlılıkları yükleme

Uygulamanıza MSAL Browser ve MSAL Angular kitaplıklarını yüklemek için komut kabuğunuzda aşağıdaki komutu çalıştırın:

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

Angular Malzeme bileşen kitaplığını yükleyin (isteğe bağlı, kullanıcı arabirimi için):

npm install @angular/material @angular/cdk

Kimlik doğrulama bileşenlerini ekleme

Örnek kod aşağıdaki bileşenlerden oluşur:

Bileşen Türü Açıklama
auth-config.ts Sabitler Bu yapılandırma dosyası, Azure AD B2C kimlik sağlayıcınız ve web API hizmetinizle ilgili bilgileri içerir. Angular uygulaması, bu bilgileri Azure AD B2C ile güven ilişkisi kurmak, kullanıcının giriş yapmasını ve çıkış yapmasını sağlamak, belirteçleri almak ve doğrulamak için kullanır.
app.module.ts Angular modülü Bu bileşen, uygulama parçalarının nasıl bir araya geldiği açıklanmaktadır. Bu, uygulamayı önyüklemek ve açmak için kullanılan kök modüldür. Bu kılavuzda, app.module.ts modülüne bazı bileşenler ekler ve MSAL kitaplığını MSAL yapılandırma nesnesiyle başlatırsınız.
app-routing.module.ts Angular yönlendirme modülü Bu bileşen, tarayıcı URL'sini yorumlayarak ve ilgili bileşeni yükleyerek gezintiyi etkinleştirir. Bu kılavuzda, yönlendirme modülüne bazı bileşenler ekler ve bileşenleri MSAL Guard ile korursunuz. Korumalı bileşenlere yalnızca yetkili kullanıcılar erişebilir.
uygulama.bileşen.* Angular bileşeni ng new komutu, kök bileşeni olan bir Angular projesi oluşturdu. Bu kılavuzda, uygulama bileşenini üst gezinti çubuğunu barındıracak şekilde değiştireceksiniz. Gezinti çubuğunda oturum açma ve oturum kapatma düğmeleri gibi çeşitli düğmeler bulunur. app.component.ts sınıfı oturum açma ve oturum kapatma olaylarını işler.
ev.bileşen.* Angular bileşeni Bu kılavuzda, anonim erişim için ana sayfayı işlemek üzere ana bileşenini eklersiniz. Bu bileşen, kullanıcının oturum açıp açmadığını denetlemeyi gösterir.
profil.bileşen.* Angular bileşeni Bu kılavuzda, kimlik belirteci taleplerini okumayı öğrenmek için profil bileşenini eklersiniz.
webapi.bileşeni.* Angular bileşeni Bu kılavuzda, web API'sini çağırmayı öğrenmek için webapi bileşenini ekleyebilirsiniz.

Uygulamanıza aşağıdaki bileşenleri eklemek için aşağıdaki Angular CLI komutlarını çalıştırın. Komutlar generate component :

  1. Her bileşen için bir klasör oluşturun. Klasör TypeScript, HTML, CSS ve test dosyalarını içerir.
  2. app.module.ts ve app-routing.module.ts dosyalarını yeni bileşenlere başvurularla güncelleştirin.
ng generate component home
ng generate component profile
ng generate component webapi

Uygulama ayarlarını ekleme

Azure AD B2C kimlik sağlayıcısı ve web API'sinin ayarları auth-config.ts dosyasında depolanır. src/app klasörünüzde aşağıdaki kodu içeren auth-config.ts adlı bir dosya oluşturun. Ardından 3.1 Angular örneğini yapılandırma bölümünde açıklandığı gibi ayarları değiştirin.

import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
 
export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE, 
     },
     system: {
         loggerOptions: {
            loggerCallback: (logLevel, message, containsPii) => {
                console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-name.onmicrosoft.com/api/tasks.read"],
  },
}
export const loginRequest = {
  scopes: []
};

Kimlik doğrulama kitaplıklarını başlatın

Açık erişimli istemci uygulamalarının uygulama sırlarını güvenli bir şekilde saklayabileceğine güvenilmez, bu yüzden istemci sırları yoktur. src/app klasöründe app.module.ts açın ve aşağıdaki değişiklikleri yapın:

  1. MSAL Angular ve MSAL Browser kitaplıklarını içeri aktarın.
  2. Azure AD B2C yapılandırma modülünü içeri aktarın.
  3. İçeri aktar HttpClientModule. HTTP istemcisi web API'lerini çağırmak için kullanılır.
  4. Angular HTTP önleyicisini içeri aktarın. MSAL, taşıyıcı belirteci HTTP yetkilendirme üst bilgisine eklemek için arılayıcıyı kullanır.
  5. Temel Angular malzemelerini ekleyin.
  6. Birden çok hesap genel istemci uygulaması nesnesini kullanarak MSAL örneği oluşturun. MSAL başlatma süreci şunları gerektirir:
    1. auth-config.ts yapılandırma nesnesi.
    2. Yönlendirme koruyucusunun yapılandırma nesnesi.
    3. MSAL interceptor için yapılandırma nesnesi. Interceptor sınıfı, tanımlı korumalı kaynaklara Angular HttpClient sınıfını kullanan giden istekler için belirteçleri otomatik olarak alır.
  7. HTTP_INTERCEPTORS ve MsalGuardAngular sağlayıcılarını yapılandırın.
  8. MsalRedirectComponent ekleyin.

src/app klasöründe app.module.ts düzenleyin ve aşağıdaki kod parçacığında gösterilen değişiklikleri yapın. Değişikliklere "Değişiklikler buradan başlar" ve "Değişiklikler burada biter" bayraklarıyla işaretlenir.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

/* Changes start here. */
// Import MSAL and MSAL browser libraries. 
import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';

// Import the Azure AD B2C configuration 
import { msalConfig, protectedResources } from './auth-config';

// Import the Angular HTTP interceptor. 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';
import { WebapiComponent } from './webapi/webapi.component';

// Add the essential Angular materials.
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatTableModule } from '@angular/material/table';
/* Changes end here. */

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    HomeComponent,
    WebapiComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    /* Changes start here. */
    // Import the following Angular materials. 
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatTableModule,
    // Import the HTTP client. 
    HttpClientModule,

    // Initiate the MSAL library with the MSAL configuration object
    MsalModule.forRoot(new PublicClientApplication(msalConfig),
      {
        // The routing guard configuration. 
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: protectedResources.todoListApi.scopes
        }
      },
      {
        // MSAL interceptor configuration.
        // The protected resource mapping maps your web API with the corresponding app scopes. If your code needs to call another web API, add the URI mapping here.
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
        ])
      })
    /* Changes end here. */
  ],
  providers: [
    /* Changes start here. */
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalGuard
    /* Changes end here. */
  ],
  bootstrap: [
    AppComponent,
    /* Changes start here. */
    MsalRedirectComponent
    /* Changes end here. */
  ]
})
export class AppModule { }

Rotaları yapılandırın

Bu bölümde Angular uygulamanız için yolları yapılandırın. Bir kullanıcı tek sayfalı uygulamanız içinde hareket etmek için sayfadan bir bağlantı seçtiğinde veya adres çubuğuna bir URL girdiğinde, yollar URL'yi Bir Angular bileşeniyle eşler. Angular yönlendirme canActivate arabirimi, kullanıcının oturum açmış olup olmadığını denetlemek için MSAL Guard kullanır. Kullanıcı oturum açmadıysa, MSAL kullanıcıyı kimlik doğrulaması için Azure AD B2C'ye götürür.

src/app klasöründe düzenleyin app-routing.module.ts aşağıdaki kod parçacığında gösterilen değişiklikleri yapın. Değişikliklere "Değişiklikler buradan başlar" ve "Değişiklikler burada biter" bayraklarıyla işaretlenir.

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

const routes: Routes = [
  /* Changes start here. */
  {
    path: 'profile',
    component: ProfileComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    path: 'webapi',
    component: WebapiComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    // The home component allows anonymous access
    path: '',
    component: HomeComponent
  }
  /* Changes end here. */
];


@NgModule({
  /* Changes start here. */
  // Replace the following line with the next one
  //imports: [RouterModule.forRoot(routes)],
  imports: [RouterModule.forRoot(routes, {
    initialNavigation:'enabled'
  })],
  /* Changes end here. */
  exports: [RouterModule]
})
export class AppRoutingModule { }

Oturum açma ve oturum kapatma düğmelerini ekleme

Bu bölümde, uygulama bileşenine oturum açma ve oturum kapatma düğmelerini eklersiniz. src/app klasöründe app.component.ts dosyasını açın ve aşağıdaki değişiklikleri yapın:

  1. Gerekli bileşenleri içeri aktarın.

  2. OnInit yöntemini uygulamak için sınıfını değiştirin. OnInit yöntemi, MSAL MsalBroadcastServiceinProgress$ gözlemlenebilir olayına abone olur. Bu olayı, özellikle etkileşimlerin tamamlandığını denetlemek için kullanıcı etkileşimlerinin durumunu bilmek için kullanın.

    MSAL hesabı nesnesiyle etkileşimlerden önce, bu özelliğin InteractionStatus döndürüp döndürmediğini InteractionStatus.None kontrol edin. subscribe olayı, kullanıcının kimliğinin doğrulanmış olup olmadığını kontrol etmek için setLoginDisplay yöntemini çağırır.

  3. Sınıf değişkenleri ekleyin.

  4. login Yetkilendirme akışını başlatan yöntemi ekleyin.

  5. Kullanıcının oturumunu kapatan logout yöntemini ekleyin.

  6. Kullanıcının kimliğinin setLoginDisplay doğrulanmış olup olmadığını denetleye yöntemini ekleyin.

  7. Abone olma olayını temizlemek için inProgress$ yöntemini ekleyin.

Değişikliklerden sonra kodunuz aşağıdaki kod parçacığı gibi görünmelidir:

import { Component, OnInit, Inject } from '@angular/core';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionStatus, RedirectRequest } 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']
})

/* Changes start here. */
export class AppComponent implements OnInit{
  title = 'msal-angular-tutorial';
  loginDisplay = false;
  private readonly _destroying$ = new Subject<void>();

  constructor(@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration, private broadcastService: MsalBroadcastService, private authService: MsalService) { }

  ngOnInit() {

    this.broadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() => {
      this.setLoginDisplay();
    })
  }

  login() {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  logout() { 
    this.authService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
  /* Changes end here. */
}

src/app klasöründe app.component.html düzenleyin ve aşağıdaki değişiklikleri yapın:

  1. Profil ve web API bileşenlerine bir bağlantı ekleyin.
  2. Tıklama olay özniteliği login() yöntemine ayarlanmış oturum açma düğmesini ekleyin. Bu düğme yalnızca loginDisplay sınıf değişkeni false ise görünür.
  3. Tıklama olay özelliği logout() metoduna ayarlanmış şekilde oturumu kapatma düğmesini ekleyin. Bu düğme yalnızca loginDisplay sınıf değişkeni true ise görünür.
  4. Yönlendirici çıkış öğesi ekleyin.

Değişikliklerden sonra kodunuz aşağıdaki kod parçacığı gibi görünmelidir:

<mat-toolbar color="primary">
  <a class="title" href="/">{{ title }}</a>

  <div class="toolbar-spacer"></div>

  <a mat-button [routerLink]="['profile']">Profile</a>
  <a mat-button [routerLink]="['webapi']">Web API</a>

  <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
  <button mat-raised-button *ngIf="loginDisplay" (click)="logout()">Logout</button>

</mat-toolbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

İsteğe bağlı olarak , app.component.css dosyasını aşağıdaki CSS kod parçacığıyla güncelleştirin:

.toolbar-spacer {
    flex: 1 1 auto;
  }

  a.title {
    color: white;
  }

Uygulama yönlendirmelerini ele almak

MSAL ile yeniden yönlendirmeler kullanırken uygulama yeniden yönlendirme yönergesini index.htmleklemeniz gerekir. src klasöründe, aşağıdaki kod parçacığında gösterildiği gibi index.html düzenleyin:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MsalAngularTutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!-- Changes start here -->
  <app-redirect></app-redirect>
  <!-- Changes end here -->
</body>
</html>

Uygulama CSS'sini ayarlama (isteğe bağlı)

/src klasöründe, styles.css dosyasını aşağıdaki CSS parçacığıyla güncelleştirin:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.container { margin: 1%; }

Tavsiye

Bu noktada uygulamanızı çalıştırabilir ve oturum açma deneyimini test edebilirsiniz. Uygulamanızı çalıştırmak için Angular uygulamasını çalıştırma bölümüne bakın.

Kullanıcının kimliğinin doğrulanmış olup olmadığını denetleme

home.component dosyası, kullanıcının kimliğinin doğrulanmış olup olmadığının nasıl denetlendiğini gösterir. src/app/home klasöründe, home.component.ts aşağıdaki kod parçacığıyla güncelleştirin.

Kod:

  1. MSAL MsalBroadcastServicemsalSubject$ ve inProgress$ gözlemlenebilir olaylara abone olur.
  2. Tarayıcı konsoluna kimlik doğrulama sonucunu yazmasını sağlar msalSubject$ olayının.
  3. Kullanıcı kimliğinin doğrulanmış olup olmadığını kontrol etmek için inProgress$ olayını sağlar. yöntemi bir getAllAccounts() veya daha fazla nesne döndürür.
import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  loginDisplay = false;

  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe((result: EventMessage) => {
        console.log(result);
      });

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      })
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }
}

src/app/home klasöründe ,home.component.html aşağıdaki HTML parçacığıyla güncelleştirin. *ngIf yönergesi, hoş geldiniz iletilerini göstermek veya gizlemek için sınıf değişkenini denetlerloginDisplay.

<div *ngIf="!loginDisplay">
    <p>Please sign-in to see your profile information.</p>
</div>

<div *ngIf="loginDisplay">
    <p>Login successful!</p>
    <p>Request your profile information by clicking Profile above.</p>
</div>

Kimlik belirteci taleplerini okuyun

Profile.component dosyasında kullanıcının kimlik belirteci taleplerine nasıl erişilir gösterilmektedir. src/app/profile klasöründe profile.component.ts aşağıdaki kod parçacığıyla güncelleştirin.

Kod:

  1. Gerekli bileşenleri içeri aktarır.
  2. MSAL MsalBroadcastServiceinProgress$ gözlemlenebilir olayına abonelik yapar. Olay hesabı yükler ve kimlik belirteci iddia verilerini okur.
  3. checkAndSetActiveAccount yönteminin etkin hesabı kontrol edip ayarladığından emin olur. Bu eylem, uygulama birden çok Azure AD B2C kullanıcı akışı veya özel ilkeyle etkileşime geçtiğinde yaygındır.
  4. getClaims yönteminin, etkin MSAL hesabı nesnesinden kimlik belirteci taleplerini almasını sağlar. Yöntem daha sonra talepleri dataSource dizisine ekler. Dizi, bileşenin şablon bağlantısıyla kullanıcıya işlenir.
import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {
  displayedColumns: string[] = ['claim', 'value'];
  dataSource: Claim[] = [];
  private readonly _destroying$ = new Subject<void>();
  
  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) =>  status === InteractionStatus.None || status === InteractionStatus.HandleRedirect),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.checkAndSetActiveAccount();
        this.getClaims(this.authService.instance.getActiveAccount()?.idTokenClaims)
      })
  }

  checkAndSetActiveAccount() {

    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  getClaims(claims: any) {

    let list: Claim[]  =  new Array<Claim>();

    Object.keys(claims).forEach(function(k, v){
      
      let c = new Claim()
      c.id = v;
      c.claim = k;
      c.value =  claims ? claims[k]: null;
      list.push(c);
    });
    this.dataSource = list;

  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

export class Claim {
  id: number;
  claim: string;
  value: string;
}

src/app/profile klasöründe ,profile.component.html aşağıdaki HTML parçacığıyla güncelleştirin:

<h1>ID token claims:</h1>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- 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>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Web API çağrısı

Belirteç tabanlı yetkilendirme web API'sini çağırmak için uygulamanın geçerli bir erişim belirtecine sahip olması gerekir. MsalInterceptor sağlayıcısı, bilinen korumalı kaynaklara Angular HttpClient sınıfını kullanan giden istekler için otomatik olarak belirteçler alır.

Önemli

MSAL başlatma yöntemi, app.module.ts sınıfında, protectedResourceMap nesnesini kullanarak web API'ler gibi korumalı kaynakları gerekli uygulama kapsamlarıyla eşler. Kodunuzun başka bir web API'sini çağırması gerekiyorsa, web API URI'sini ve ilgili kapsamları içeren web API HTTP yöntemini nesnesine protectedResourceMap ekleyin. Daha fazla bilgi için bkz . Korumalı Kaynak Eşlemesi.

HttpClient nesnesi bir web API'sini çağırdığında, MsalInterceptor sağlayıcısı aşağıdaki adımları uygular:

  1. Web API uç noktası için gerekli izinlere (kapsamlara) sahip bir erişim belirteci alır.

  2. Erişim belirtecini http isteğinin yetkilendirme üst bilgisinde taşıyıcı belirteç olarak şu biçimi kullanarak geçirir:

    Authorization: Bearer <access-token>

webapi.component dosyası, bir web API'sinin nasıl çağrılduğunu gösterir. src/app/webapi klasöründe, webapi.component.ts aşağıdaki kod parçacığıyla güncelleştirin.

Kod:

  1. Web API'sini çağırmak için Angular HttpClient sınıfını kullanır.
  2. Sınıfın auth-configprotectedResources.todoListApi.endpoint öğesini okur. Bu öğe web API URI'sini belirtir. Web API URI'sine bağlı olarak, MSAL interceptor ilgili kapsamlara sahip bir erişim belirteci alır.
  3. Web API'sinden profili alır ve sınıf değişkenini profile ayarlar.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { protectedResources } from '../auth-config';

type ProfileType = {
  name?: string
};

@Component({
  selector: 'app-webapi',
  templateUrl: './webapi.component.html',
  styleUrls: ['./webapi.component.css']
})
export class WebapiComponent implements OnInit {
  todoListEndpoint: string = protectedResources.todoListApi.endpoint;
  profile!: ProfileType;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(this.todoListEndpoint)
      .subscribe(profile => {
        this.profile = profile;
      });
  }
}

src/app/webapi klasöründe ,webapi.component.html aşağıdaki HTML parçacığıyla güncelleştirin. Bileşenin şablonu, web API'sinin döndürdüğü adı işler. Sayfanın en altında, şablon web API'sinin adresini işler.

<h1>The web API returns:</h1>
<div>
    <p><strong>Name: </strong> {{profile?.name}}</p>
</div>

<div class="footer-text">
    Web API: {{todoListEndpoint}}
</div>

İsteğe bağlı olarak , webapi.component.css dosyasını aşağıdaki CSS kod parçacığıyla güncelleştirin:

.footer-text {
    position: absolute;
    bottom: 50px;
    color: gray;
}

Angular uygulamasını çalıştırma

Aşağıdaki komutu çalıştırın:

npm start

Konsol penceresinde, uygulamanın barındırıldığı bağlantı noktasının numarası görüntülenir.

Listening on port 4200...

Tavsiye

Alternatif olarak, komutunu çalıştırmak npm start için Visual Studio Code hata ayıklayıcısını kullanın. Hata ayıklayıcısı düzenleme, derleme ve hata ayıklama döngünüzü hızlandırmaya yardımcı olur.

http://localhost:4200 Uygulamayı görüntülemek için tarayıcınızda adresine gidin.

Sonraki Adımlar