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

Makale
01/11/2024

Bu makalede, Azure Active Directory B2C (Azure AD B2C) kimlik doğrulamasını kendi Angular tek sayfalı uygulamanıza (SPA) nasıl ekleyeceğiniz gösterilir. Angular bir uygulamayı Angular kimlik doğrulama kitaplığı için MSAL ile tümleştirmeyi öğrenin.

Bu makaleyi, tek sayfalı uygulama Angular örnek bir 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 eder.

Ö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 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:

npm paket yöneticisini kullanarak Angular CLI'yi yükleyin.
Yönlendirme modülüyle Angular çalışma alanı oluşturun. Uygulama adı şeklindedir msal-angular-tutorial. Bunu gibi geçerli bir Angular uygulama adıyla contoso-car-servicedeğiştirebilirsiniz.
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 (kullanıcı arabirimi için isteğe bağlı):

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	Description
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, oturum açmak ve kullanıcının oturumunu kapatmak, belirteçleri almak ve belirteçleri doğrulamak için kullanır.
app.module.ts	Angular modülü	Bu bileşen, uygulama bölümlerinin 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	yönlendirme modülünü Angular	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.
app.component.*	Angular bileşeni	komutu, `ng new` kök bileşeni olan bir Angular projesi oluşturmuştur. 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 de dahil olmak üzere çeşitli düğmeler bulunur. `app.component.ts` sınıfı oturum açma ve oturum kapatma olaylarını işler.
home.component.*	Angular bileşeni	Bu kılavuzda, giriş sayfasını anonim erişim için işlemek üzere giriş bileşenini ekleyebilirsiniz. Bu bileşen, kullanıcının oturum açıp açmadığını denetlemeyi gösterir.
profile.component.*	Angular bileşeni	Bu kılavuzda, kimlik belirteci taleplerini okumayı öğrenmek için profil bileşenini ekleyebilirsiniz.
webapi.component.*	Angular bileşeni	Bu kılavuzda, web API'sinin nasıl çağrılacağınızı öğ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 :

Her bileşen için bir klasör oluşturun. klasörde TypeScript, HTML, CSS ve test dosyaları bulunur.
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'de açıklandığı gibi ayarları değiştirin Angular örneğini yapılandırın.

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şlatma

Ortak istemci uygulamalarının uygulama gizli dizilerini güvenli bir şekilde saklamasına güvenilmiyor, bu nedenle istemci gizli dizileri yok. src/app klasöründe app.module.ts dosyasını açın ve aşağıdaki değişiklikleri yapın:

MSAL Angular ve MSAL Browser kitaplıklarını içeri aktarın.
Azure AD B2C yapılandırma modülünü içeri aktarın.
öğesini içeri aktar.HttpClientModule HTTP istemcisi web API'lerini çağırmak için kullanılır.
Angular HTTP kesme noktasını içeri aktarın. MSAL, taşıyıcı belirtecini HTTP yetkilendirme üst bilgisine eklemek için kesme noktasını kullanır.
Temel Angular malzemelerini ekleyin.
Birden çok hesap genel istemci uygulaması nesnesini kullanarak MSAL örneği oluşturun. MSAL başlatma şunları içerir:
1. auth-config.ts için yapılandırma nesnesi.
2. Yönlendirme koruyucusu için yapılandırma nesnesi.
3. MSAL kesme noktası için yapılandırma nesnesi. Kesme noktası sınıfı, bilinen korumalı kaynaklara Angular HttpClient sınıfını kullanan giden istekler için belirteçleri otomatik olarak alır.
HTTP_INTERCEPTORS ve MsalGuardAngular sağlayıcılarını yapılandırın.
Angular önyüklemesine ekleyinMsalRedirectComponent.

src/app klasöründe app.module.ts dosyasını 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ı eklenir.

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

Yolları yapılandırma

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önlendirmesi 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 app-routing.module.ts dosyasını düzenleyin, 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ı eklenir.

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

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

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

MSAL hesabı nesnesiyle etkileşimlerden önce özelliğinin InteractionStatus döndürdüğünü InteractionStatus.Nonedenetleyin. Olay, subscribe kullanıcının kimliğinin setLoginDisplay doğrulanmış olup olmadığını denetlemek için yöntemini çağırır.
Sınıf değişkenleri ekleyin.
login Yetkilendirme akışını başlatan yöntemi ekleyin.
logout Kullanıcının oturumunu kapatan yöntemi ekleyin.
Kullanıcının kimliğinin setLoginDisplay doğrulanmış olup olmadığını denetleye yöntemini ekleyin.
Abone olma olayını temizlemek inProgress$ için ngOnDestroy 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:

Profil ve web API bileşenlerine bir bağlantı ekleyin.
Click olayı özniteliğinin yöntemine login() ayarlandığı oturum açma düğmesini ekleyin. Bu düğme yalnızca sınıf değişkeni ise loginDisplayfalsegörüntülenir.
Click olay özniteliğinin yöntemine ayarlandığı logout() oturumu kapatma düğmesini ekleyin. Bu düğme yalnızca sınıf değişkeni ise loginDisplaytruegörüntülenir.
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 yeniden yönlendirmelerini işleme

MSAL ile yeniden yönlendirmeleri 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 kod 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%; }

İpucu

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 dosyasını aşağıdaki kod parçacığıyla güncelleştirin.

Kod:

MSAL MsalBroadcastServicemsalSubject$ ve inProgress$ gözlemlenebilir olaylara abone olur.
msalSubject$ Olayın kimlik doğrulama sonucunu tarayıcı konsoluna yazmasını sağlar.
Olayın kullanıcının kimliğinin inProgress$ doğrulanmış olup olmadığını denetlemesini 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 kod parçacığıyla güncelleştirin. *ngIf yönergesi, karşılama 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 okuma

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

Kod:

Gerekli bileşenleri içeri aktarır.
MSAL MsalBroadcastServiceinProgress$ gözlemlenebilir olayına abone olur. Olay hesabı yükler ve kimlik belirteci taleplerini okur.
Yöntemin checkAndSetActiveAccount etkin hesabı denetlemesini ve ayarlamasını sağlar. Bu eylem, uygulama birden çok Azure AD B2C kullanıcı akışı veya özel ilkeyle etkileşime geçtiğinde yaygındır.
yönteminin getClaims etkin MSAL hesabı nesnesinden kimlik belirteci taleplerini almasını sağlar. Yöntemi daha sonra talepleri diziye dataSource ekler. Dizi, bileşenin şablon bağlaması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 kod 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 belirteçleri otomatik olarak alır.

Önemli

MSAL başlatma yöntemi (sınıfta), web API'leri app.module.ts gibi korumalı kaynakları nesnesini kullanarak protectedResourceMap 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:

Web API uç noktası için gerekli izinlere (kapsamlara) sahip bir erişim belirteci alır.
Şu biçimi kullanarak erişim belirtecini HTTP isteğinin yetkilendirme üst bilgisinde taşıyıcı belirteç olarak 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 dosyasını aşağıdaki kod parçacığıyla güncelleştirin.

Kod:

Web API'sini çağırmak için Angular HttpClient sınıfını kullanır.
Sınıfın auth-configprotectedResources.todoListApi.endpoint öğesini okur. Bu öğe web API'sinin URI'sini belirtir. Web API URI'sine bağlı olarak, MSAL kesme noktası ilgili kapsamlara sahip bir erişim belirteci alır.
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

Şu 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...

İpucu

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.

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

Önkoşullar

Angular uygulama projesi oluşturma

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

Kimlik doğrulama bileşenlerini ekleme

Uygulama ayarlarını ekleme

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

Yolları yapılandırma

Uygulama yeniden yönlendirmelerini işleme

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

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

Kimlik belirteci taleplerini okuma

Web API çağrısı

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

Sonraki adımlar

Ek kaynaklar

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

Önkoşullar

Angular uygulama projesi oluşturma

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

Kimlik doğrulama bileşenlerini ekleme

Uygulama ayarlarını ekleme

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

Yolları yapılandırma

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

Uygulama yeniden yönlendirmelerini işleme

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

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

Kimlik belirteci taleplerini okuma

Web API çağrısı

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

Sonraki adımlar

Ek kaynaklar