Chrome扩展中MSAL登录报错：redirect_uri无效及交互冲突问题求助

1. 重复点击触发interaction_in_progress错误 #

这个问题是因为首次登录后交互状态未正确结束，或者重复点击时没有检测到已有交互在进行，直接调用了登录API。解决方式是在登录方法中先判断当前是否有活跃交互，再执行登录逻辑：

loginRedirect() {
  // 检测是否已有交互在进行，避免重复触发
  if (this.authService.instance.isInteractionInProgress()) {
    return;
  }
  const request = this.msalGuardConfig.authRequest 
    ? {...this.msalGuardConfig.authRequest} 
    : {};
  this.authService.loginRedirect(request as RedirectRequest);
}

loginPopup() {
  if (this.authService.instance.isInteractionInProgress()) {
    return;
  }
  const request = this.msalGuardConfig.authRequest 
    ? {...this.msalGuardConfig.authRequest} 
    : {};
  this.authService.loginPopup(request as PopupRequest)
    .subscribe((response: AuthenticationResult) => {
      this.authService.instance.setActiveAccount(response.account);
    });
}

2. Popup登录提示redirect_uri无效 #

Chrome扩展的URL格式为chrome-extension://<扩展ID>/页面路径，必须在Azure AD应用中精确注册该地址，同时在登录请求中显式指定匹配的redirectUri：

步骤1：获取扩展ID #

在Chrome扩展管理页面（chrome://extensions/）开启开发者模式，查看你的扩展ID。

步骤2：在Azure AD注册redirect_uri #

进入Azure AD应用注册的认证页面，添加格式为chrome-extension://<你的扩展ID>/login-callback的重定向URI（可根据实际页面调整路径）。

步骤3：在代码中指定redirectUri #

修改loginPopup方法，显式传入匹配的redirectUri：

loginPopup() {
  if (this.authService.instance.isInteractionInProgress()) {
    return;
  }
  const request = {
    ...(this.msalGuardConfig.authRequest || {}),
    // 替换为你在Azure注册的redirect_uri
    redirectUri: `chrome-extension://${chrome.runtime.id}/login-callback`
  };
  this.authService.loginPopup(request as PopupRequest)
    .subscribe((response: AuthenticationResult) => {
      this.authService.instance.setActiveAccount(response.account);
    });
}

3. 首次点击Login仅输出msal:loginStart无后续 #

这是因为登录回调未正确处理，导致交互状态一直卡在"开始"阶段。需要配置专门的回调页面完成登录流程：

步骤1：创建回调组件 #

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-login-callback',
  template: '<p>登录处理中...</p>'
})
export class LoginCallbackComponent implements OnInit {
  constructor(private authService: MsalService) {}

  ngOnInit(): void {
    this.authService.handleRedirectObservable()
      .subscribe({
        next: () => {
          // 回调处理完成后跳转到主页
          window.location.href = chrome.runtime.getURL('/index.html');
        },
        error: (err) => {
          console.error('重定向回调出错:', err);
        }
      });
  }
}

步骤2：配置路由 #

在Angular路由中添加回调页面路由：

const routes: Routes = [
  // 其他路由
  { path: 'login-callback', component: LoginCallbackComponent }
];

步骤3：更新manifest.json #

确保回调页面被列为可访问资源：

"manifest_version": 3,
"web_accessible_resources": [
  {
    "resources": ["login-callback.html"],
    "matches": ["<all_urls>"]
  }
]

内容的提问来源于stack exchange，提问作者sinno.song