使用Azure Login实现网站登录时遭遇interaction_in_progress错误的技术求助

这个错误我之前做Azure认证功能时也碰到过，本质是MSAL的客户端库检测到已经有一个交互式认证流程（比如登录弹窗）正在进行中，此时再调用loginPopup这类交互式API就会触发这个报错。

常见触发原因 #

• 重复点击登录按钮：用户快速连续点击两次登录，第一次的弹窗还没加载完成，第二次请求就来了
• 浏览器拦截弹窗：弹窗被浏览器阻止后，MSAL无法感知交互结束，会一直认为流程在进行中
• 状态管理缺失：组件没有标记“正在登录”的状态，导致多次触发登录逻辑
• 未处理之前的认证流程：比如之前的redirect或popup流程没完成，就又发起新请求

可行解决方案 #

1. 添加登录状态锁，防止重复调用 #

这是最直接的解决办法，在调用loginPopup前先检查是否已经在登录流程中，避免重复触发。修改你的代码如下：

async login() {
  // 如果正在登录，直接返回，避免重复请求
  if (this.state.isLoggingIn) return;

  try {
    // 标记为正在登录状态
    this.setState({ isLoggingIn: true });
    // 注意：scopes需要是数组类型，原代码的字符串形式可能会有问题
    await this.PublicClientApplication.loginPopup({
      scopes: ["user_read"],
      prompt: "select_account"
    });
    this.setState({ isAuthendaicated: true, isLoggingIn: false });
  } catch (err) {
    // 登录失败后也要重置登录状态
    this.setState({
      isAuthendaicated: false,
      user: {},
      err: err.message,
      isLoggingIn: false
    });
  }
}

记得在组件的初始state里添加isLoggingIn: false。

2. 利用MSAL内置状态检测请求 #

MSAL提供了方法可以检查当前是否有活跃的认证流程，你可以在调用登录前先做判断：

async login() {
  // 先检查是否已有登录账户，避免重复登录
  const activeAccount = this.PublicClientApplication.getActiveAccount();
  if (activeAccount) {
    this.setState({ isAuthendaicated: true });
    return;
  }

  // 检查是否有正在进行的交互流程
  const currentFlow = this.PublicClientApplication.getActiveFlow();
  if (currentFlow) {
    console.log("已有认证流程在进行中，请等待");
    return;
  }

  try {
    await this.PublicClientApplication.loginPopup({
      scopes: ["user_read"],
      prompt: "select_account"
    });
    this.setState({ isAuthendaicated: true });
  } catch (err) {
    this.setState({
      isAuthendaicated: false,
      user: {},
      err: err.message
    });
  }
}

3. 改用redirect方式避免弹窗拦截问题 #

如果浏览器弹窗拦截是主要问题，可以换成loginRedirect方法，这种方式不会被浏览器拦截，流程更稳定：

// 发起redirect登录
login() {
  try {
    this.PublicClientApplication.loginRedirect({
      scopes: ["user_read"],
      prompt: "select_account"
    });
  } catch (err) {
    this.setState({
      isAuthendaicated: false,
      user: {},
      err: err.message
    });
  }
}

// 在组件挂载时处理redirect回调
componentDidMount() {
  this.PublicClientApplication.handleRedirectPromise()
    .then(response => {
      if (response) {
        // 登录成功，更新状态
        this.setState({ isAuthendaicated: true });
      }
    })
    .catch(err => {
      console.error("Redirect登录失败:", err);
    });
}

额外小提示 #

你的代码里scopes参数用了字符串"user_read"，MSAL JS要求scopes是数组类型，建议改成["user_read"]，避免潜在的兼容性问题。

内容的提问来源于stack exchange，提问作者Thomas M