MSAL Angular のエラー

BrowserAuthErrors

インタラクション進行中

エラー メッセージ: 相互作用は現在進行中です。 対話型 API を呼び出す前に、この操作が完了していることを確認してください。

このエラーは、ある対話型 API (loginPopup、loginRedirect、acquireTokenPopup、acquireTokenRedirect) が呼び出されたときに、別の対話型 API がまだ進行中だった場合に発生します。 login API と acquireToken API は非同期であるため、別の約束を呼び出す前に、結果として得られる約束が解決されていることを確認する必要があります。

@azure/msal-angularでは、これが発生する可能性がある 2 つの一般的なシナリオがあります。

  1. アプリケーションがリダイレクトを正しく処理していません。 このエラーは、アプリまたはユーザーが対話型 API を呼び出そうとしたときに発生します。
  2. アプリケーションは、他の場所で既に相互作用が進行中かどうかを最初に確認することなく、上記のいずれかの API を呼び出しています。

リダイレクトは、MsalRedirectComponentを使用するか、handleRedirectObservable()を呼び出して処理する必要があります。 これら 2 つの方法のいずれかでリダイレクトを明示的に処理しないと、上記のエラーが発生します。 両方の方法の詳細については、リダイレクトに関するドキュメント を参照 してください。

さらに、監視可能な inProgress$ をサブスクライブし、 InteractionStatus.Noneのフィルター処理を行った後で、対話を行う必要があります。 別の操作が進行中の間の操作はサポートされていないため、上記のエラーが発生します。 InteractionStatus.Noneの確認は、これが発生しないことを確認する方法です。 詳細については 、イベントドキュメント を参照してください。

このエラーの詳細については、 @azure/msal-browser エラードキュメント を参照してください。

❌ 次の例では、別のコンポーネントが進行中の対話型 API 呼び出しをすでに開始している場合、このエラーが発生します。

import { Component, OnInit } from '@angular/core';
import { MsalService, MsalBroadcastService, InteractionStatus } from '@azure/msal-angular';
import { filter } from 'rxjs/operators';

@Component()
export class ExampleComponent implements OnInit {

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

  ngOnInit(): void {
    this.authService.loginRedirect();
  }

✔️ 前の例を修正するには、 loginRedirectを呼び出す前に、他の操作が進行中でないことを確認します。

import { Component, OnInit } from '@angular/core';
import { InteractionStatus } from '@azure/msal-browser';
import { MsalService, MsalBroadcastService } from '@azure/msal-angular';
import { filter } from 'rxjs/operators';

@Component()
export class ExampleComponent implements OnInit {

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

  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
      )
      .subscribe(() => {
        this.authService.loginRedirect();
      })
  }

トラブルシューティングの手順

  • 詳細ログを有効に し、イベントの順序をトレースします。 別の API が解決される前に対話型 API が呼び出されていないことを確認します。
  • リダイレクト フローを使用する場合は、 MsalRedirectComponet が正しくブートストラップされているか、リダイレクト先のすべてのページで handleRedirectObservable が呼び出されていることを確認します。

このエラーが発生する原因がわからない場合は、issue を作成し、次の情報を共有する準備をしてください。

  • 詳細ログ
  • 問題の再現に使用できるサンプル アプリやコード スニペット
  • ページを更新します。 エラーは消えませんか?
  • 新しいタブでアプリケーションを開きます。エラーは消えませんか?
  • Last updated on