次の方法で共有

チュートリアル: Angular シングルページ アプリケーションでサインインとサインアウトを追加する

  • [アーティクル]

このチュートリアルは、認証に Microsoft ID プラットフォームを使用する Angular シングルページ アプリ (SPA) の構築を紹介するシリーズのパート 3 です。 このチュートリアルでは、Angular SPA にサインインとサインアウトのエクスペリエンスを追加します。

このチュートリアルの内容:

  • サインインとサインアウトの機能をアプリに追加する。

前提条件

サインインとサインアウトの機能をアプリに追加する

Angular アプリケーションでサインインとサインアウトの機能を有効にするには、次の手順に従います。

  1. 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 アプリにナビゲーション バーを実装します。 これにより、ユーザー認証の状態に基づいて [サインイン] と [サインアウト] ボタンが動的に表示され、ログインしているユーザーの [プロファイルの表示] ボタンが含まれているため、アプリケーションのユーザー インターフェイスが強化されます。 src/app/app.component.ts の login() および logout() メソッドは、ボタンが選択されたときに呼び出されます。

  2. 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 アプリケーションのルーティングを構成します。 MsalGuard を使用して、プロファイル ルートに認証を適用しますが、一致しないパスはすべて ホーム コンポーネントにリダイレクトされます。

  3. 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);
      });
  }
}

    このコードでは、Microsoft Authentication Library (MSAL) と統合する HomeComponent と呼ばれる Angular コンポーネントが設定されます。 ngOnInit ライフサイクル フックでは、コンポーネントは MsalBroadcastService から監視可能な msalSubject$ をサブスクライブし、ログイン成功イベントをフィルター処理します。 ログイン イベントが発生すると、認証結果が取得され、MsalService にアクティブなアカウントが設定され、アプリケーションでユーザー セッションを管理できるようになります。

  4. 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 データを表示するようにダイアログを表示します。

  5. src/main.ts ファイルを開き、その内容を次のコードに置き換えます。

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

    コード スニペットは、Angular のプラットフォーム ブラウザーの動的モジュールから platformBrowserDynamicを、アプリケーションのモジュール ファイルから AppModule をインポートします。 その後、platformBrowserDynamic() を使用して AppModule をブートストラップし、Angular アプリケーションを初期化します。 ブートストラップ プロセス中に発生したエラーはすべてキャッチされ、コンソールに記録されます。

  6. 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>

    このコード スニペットでは、言語として英語と UTF-8 文字エンコードを使用する HTML5 ドキュメントを定義します。 タイトルが "MSAL For Javascript - Angular SPA" に設定されます。本文には、メイン エントリ ポイントとして <app-root> コンポーネントと、リダイレクト機能の <app-redirect> コンポーネントが含まれています。

  7. 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 スタックに設定し、既定の余白を削除し、読みやすさを向上させるためにフォント のスムージングを適用して、Web ページのスタイルを設定します。 テキストを中央に配置し、.app、.title、.profile クラスにパディングを追加します。一方、 .profileButton クラスは flexbox を使用してその要素を中央揃えします。

次のステップ

チュートリアル: Angular シングルページ アプリから API を呼び出す