Поделиться через

Руководство по созданию приложения Angular и его подготовке к проверке подлинности

  • Статья

применяется к: зеленый круг с символом белой флажки. арендаторы рабочей силы зеленый круг с символом белой галочки. внешние клиенты (подробнее)

Это первая часть серии, демонстрирующая создание одностраничного приложения Angular (SPA), добавление проверки подлинности и извлечение пользовательских данных с помощью платформы удостоверений Майкрософт.

В этом руководстве рассматриваются следующие темы:

  • Создание проекта Angular
  • Настройка параметров для приложения
  • Добавление кода проверки подлинности в приложение

Предварительные условия

Создание проекта Angular

В этом разделе описано, как создать проект Angular с помощью Интерфейса командной строки Angular в Visual Studio Code. Выберите соответствующую вкладку на основе типа клиента.

Чтобы создать проект Angular с нуля, выполните следующие действия.

  1. Откройте окно терминала и выполните следующую команду, чтобы создать проект Angular:

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

    Команда создает новый проект msal-angular-tutorial Angular с включенной маршрутизацией, CSS для стилизации и строгий режим отключен.

  2. Перейдите в каталог проекта:

    cd msal-angular-tutorial

  3. Установите зависимости приложения:

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

    npm install @azure/msal-browser @azure/msal-angular bootstrap Команда устанавливает браузер Azure MSAL, пакеты Azure MSAL Angular и Bootstrap.

  4. Откройте angular.json и добавьте путь CSS Bootstrap в массив styles.

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

    Код добавляет CSS Bootstrap в массив стилей в файле angular.json.

  5. Создайте компоненты "Главная" и "Профиль":

    ng generate component home
ng generate component profile

    Команды создают компоненты "Главная" и "Профиль" в проекте Angular.

  6. Удалите ненужные файлы и код из проекта:

    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

    Команды удаляют ненужные файлы и код из проекта.

  7. Переименуйте app.routes.ts в app-routing.module.ts с помощью Visual Studio Code и обновите все ссылки на app.routes.ts в приложении.

  8. Переименуйте app.config.ts в app.module.ts с помощью Visual Studio Code и обновите все ссылки на app.config.ts во всем приложении.

После выполнения этих действий структура проекта должна выглядеть следующим образом:

.
├── 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. Откройте файл src/app/app.module.ts и замените его содержимое следующим кодом:

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

    Код настраивает MSAL для проверки подлинности пользователей и защиты API. Он настраивает приложение с помощью MsalInterceptor для защиты запросов API и MsalGuard для защиты маршрутов, при этом определяя ключевые компоненты и службы для аутентификации. Замените следующие значения значениями из Центра администрирования Microsoft Entra.

    • Замените Enter_the_Application_Id_Here на Application (client) ID из регистрации приложения.
    • Замените Enter_the_Tenant_Info_Here на Directory (tenant) ID из регистрации приложения.

  2. Сохраните файл.

Добавление кода проверки подлинности в приложение

В этом разделе вы добавите код проверки подлинности в приложение для обработки проверки подлинности пользователей и управления сеансами. Выберите соответствующую вкладку на основе типа клиента.

  1. Откройте src/app/app.component.ts файл и замените содержимое следующим кодом:

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

    Код интегрирует MSAL с Angular для управления проверкой подлинности пользователей. Он отслеживает изменения состояния входа, отображает текущее состояние входа, обрабатывает события получения токенов и предоставляет методы для входа и выхода пользователей из системы на основе конфигурации Microsoft Entra.

  2. Сохраните файл.

Следующие шаги

Руководство: Добавление функциональных компонентов для входа и выхода в приложении Angular