javascript - MSAL 所有租户都通过弹出窗口内的弹出重定向进行登录

Question

我使用 MSAL 快速入门进行 react - 为 SPA 创建单个租户应用程序注册。 react 代码与弹出窗口一起工作，这意味着用户可以登录并且弹出窗口消失。

现在，我需要以尽可能少的更改从单租户迁移到 Multi-Tenancy ，以便我了解 Multi-Tenancy 需要如何进行更改。

我创建了一个新的应用程序注册，唯一的更改是所有 Microsoft 帐户，包括 xbox 等。在我的代码中，我将 msal.auth.authority 从单一租户更改为通用。

登录有效，但弹出窗口本身显示网站而不是关闭，并且我原来的网络浏览器具有身份验证。

如何正确关闭弹出窗口？它适用于单租户，但不适用于 Multi-Tenancy 。

export const msalConfig = {
    auth: {
      clientId: process.env.AZURE_CLIENT_ID,
      authority: `https://login.microsoftonline.com/common`, // This is a URL (e.g. https://login.microsoftonline.com/{your tenant ID} or /common)
      redirectUri: "http://localhost:1234",
    },
    cache: {
      cacheLocation: "sessionStorage", // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
  };
  
  // Add scopes here for ID token to be used at Microsoft identity platform endpoints.
  export const loginRequest = {
   scopes: ["User.Read"]
  };
  
  // Add the endpoints here for Microsoft Graph API services you'd like to use.
  export const graphConfig = {
      graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
  };

import React from "react";
import { useMsal } from "@azure/msal-react";
import { loginRequest } from "../lib/authConfig";
import Button from "react-bootstrap/Button";

function handleLogin(instance) {
  instance.loginPopup(loginRequest).catch((e) => {
    console.error(e);
  });
}

/**
 * Renders a button which, when selected, will open a popup for login
 */
export const SignInButton = () => {
  const { instance } = useMsal();

  return (
    <div className="text-end">
      <Button
        type="button"
        className="btn btn-primary"
        onClick={() => handleLogin(instance)}
      >
        Sign in
      </Button>
    </div>
  );
};

import { render } from "react-dom";
import { BlobStorage } from "./BlobStorage";
import React, { StrictMode} from "react";
import { getAppConfig } from "./lib/appConfiguration";
import { PublicClientApplication } from "@azure/msal-browser";
import {
  MsalProvider,
  AuthenticatedTemplate,
  UnauthenticatedTemplate
} from "@azure/msal-react";
import { PageLayout } from "./components/page-layout";
import { msalConfig } from "./lib/authConfig";
import 'bootstrap/dist/css/bootstrap.min.css';
import Welcome from "./Welcome";
import {
  reactPlugin,
  appInsights,
  initializeMonitor,
  withAITracking,
} from "./lib/appMonitor";

const msalInstance = new PublicClientApplication(msalConfig);

global.appConfig = getAppConfig();
global.appMonitor = appInsights;

console.log(global.appConfig);

initializeMonitor(global.appConfig.REACT_APP_MICROSOFT_APPLICATION_INSIGHTS);

const InnerApp = () => {
  return (
    <div>
      <PageLayout>
        <AuthenticatedTemplate>
          <BlobStorage appConfig={global.appConfig}/>
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
          <Welcome />
        </UnauthenticatedTemplate>
      </PageLayout>
    </div>
  );
};

const MonitoredInnerApp = withAITracking(
  reactPlugin,
  InnerApp,
  "4tt"
);

const App = () => {
  return (
    <StrictMode>
      <MsalProvider instance={msalInstance}>
        <MonitoredInnerApp />
      </MsalProvider>
    </StrictMode>
  );
};

render(<App />, document.getElementById("root"));

import React from "react";
import { Container, Row, Col} from "react-bootstrap";
import { SignInButton } from "./button-sign-in";
import { SignOutButton } from "./button-sign-out";
import { useIsAuthenticated } from "@azure/msal-react";
/**
 * All content is publicly available. 
 */
export const Header = () => {
    const isAuthenticated = useIsAuthenticated();
  return (
    <>
      <Container className="container-fluid bg-secondary text-white" fluid>
        <Row className="align-items-center text-start">
        <Col className="col-sm-1 gap-3 text-uppercase">4tt</Col>
        <Col className="gap-3">All Azure</Col>
          <Col className="text-end">
            {isAuthenticated ? <SignOutButton /> : <SignInButton />}
          </Col>
        </Row>
      </Container>
    </>
  );
};

部分package.json

  "devDependencies": {
    "eslint": "8.8.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "os-browserify": "^0.3.0",
    "parcel": "2.2.1",
    "path-browserify": "^1.0.1",
    "prettier": "2.5.1",
    "process": "^0.11.10"
  },
  "dependencies": {
    "@azure/msal-browser": "^2.27.0",
    "@azure/msal-react": "^1.4.3",
    "@microsoft/applicationinsights-react-js": "^3.3.3",
    "@microsoft/applicationinsights-web": "^2.8.3",
    "bootstrap": "^5.2.0-beta1",
    "dotenv": "^16.0.1",
    "react": "17.0.2",
    "react-bootstrap": "^2.4.0",
    "react-dom": "17.0.2"
  },

Answer 1

此行为可能与 Multi-Tenancy 应用程序使用/通用端点有关。虽然/common endpoint必须与 Multi-Tenancy 应用程序一起使用， guest 用户将被重定向到其主租户进行登录，这可以解释重定向问题。尝试使用您的tenantId而不是/common端点，看看是否可以解决问题。另外，另一个common errors when using the MSAL with multi-tenant app之一它是否错过了最初通过/common 端点创建的缓存条目，因此请确保对签名用户的后续调用是对租户的端点而不是/common 进行的。