使用oidc-client-ts弹窗登录时回调阶段出现“No window.opener”错误的问题咨询

问题描述 #

我正在使用oidc-client-ts实现OAuth2 PKCE认证的弹窗登录流程，但当认证提供商重定向回我的弹窗回调页面时，出现了如下错误：

No window.opener. Can't complete notification.

我的操作步骤 #

我在主应用中通过signinPopup()启动登录流程：

const userManager = new UserManager({
  authority: "https://your-oidc-provider.com",
  client_id: "your-client-id",
  redirect_uri: window.location.origin + "/callback",
});

async function loginWithPopup() {
  try {
    await userManager.signinPopup();
  } catch (error) {
    console.error("Popup login failed:", error);
  }
}

然后在独立的/callback页面处理弹窗回调：

const userManager = new UserManager({
  authority: "https://your-oidc-provider.com",
  client_id: "your-client-id",
  redirect_uri: window.location.origin + "/callback",
});

await userManager.signinCallback();

注意事项 #

• 弹窗控制台里window.opener = null，意味着弹窗无法识别主页面
• window.crossOriginIsolated = false（有相关讨论提到如果这个值为true，弹窗会无法正常工作）
• 我需要对接多个不同的提供商，所以无法创建单例的UserManager实例

请问我哪里操作错了？

备注：内容来源于stack exchange，提问作者Johnny Metz