Руководство. Вход пользователя в одностраничные приложения Angular - Microsoft identity platform

Статья
11/12/2024

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

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

Добавьте функции входа и выхода в приложение.

Необходимые компоненты

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

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

Откройте файл src/app/app.component.html и замените его содержимое следующим кодом.
```
<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>
```
Код реализует панель навигации в приложении Angular. Он динамически отображает кнопки входа и выхода на основе состояния проверки подлинности пользователей и включает кнопку "Профиль просмотра" для пользователей, вошедшего в систему, повышая пользовательский интерфейс приложения. logout() Методы login() src/app/app.component.ts вызываются при выборе кнопок.

Откройте файл src/app/app-routing.module.ts и замените его содержимое следующим кодом.

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

Фрагмент кода настраивает маршрутизацию в приложении Angular, устанавливая пути для компонентов Profile и Home . Он используется MsalGuard для принудительной проверки подлинности в маршруте профиля , а все несовпаденные пути перенаправляются на компонент Home .

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

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

Код настраивает компонент Angular, который называется HomeComponent интеграцией с библиотекой проверки подлинности Майкрософт (MSAL). В перехватчике ngOnInit жизненного цикла компонент подписывается на msalSubject$ наблюдаемое из MsalBroadcastService, фильтрация для событий успешного входа. При возникновении события входа он извлекает результат проверки подлинности и задает активную учетную запись в приложении MsalServiceдля управления сеансами пользователей.

Откройте файл src/app/home/home.component.html и замените его содержимое следующим кодом.
```
<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>
```
Код приветствует пользователей в приложение и предложит им просмотреть данные Microsoft Graph, щелкнув ссылку "Профиль просмотра".
Откройте файл src/main.ts и замените его содержимое следующим кодом.
```
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
```
Фрагмент кода импортируется platformBrowserDynamic из динамического модуля браузера платформы Angular и AppModule из файла модуля приложения. Затем он используется platformBrowserDynamic() для начальной AppModuleзагрузки приложения Angular. Все ошибки, возникающие во время процесса начальной загрузки, перехватываются и регистрируются в консоли.
Откройте файл src/index.html и замените его содержимое следующим кодом.
```
<!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>
```
Фрагмент кода определяет html5-документ с английским языком и кодировкой символов UTF-8. Он задает заголовок MSAL для Javascript — Angular SPA. Текст включает <app-root> компонент в качестве основной точки входа и <app-redirect> компонента для функций перенаправления.
Откройте файл src/styles.css и замените его содержимое следующим кодом.
```
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 стили веб-страницы путем установки шрифта текста в современный стек sans-serif, удаление полей по умолчанию и применение сглаживания шрифтов для расширенной удобочитаемости. Он центрирует текст и добавляет заполнение в .appклассы .titleи .profile классы, в то время как .profileButton класс использует flexbox для центра его элементов.

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

Руководство. Вызов API из одностраничного приложения Angular

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

Необходимые компоненты

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

Обратная связь

Дополнительные ресурсы

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

Руководство. Добавление входа и выход в одностраничные приложения Angular

Необходимые компоненты

Добавление функций входа и выхода в приложение

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

Обратная связь

Дополнительные ресурсы