MSAL所有租户在弹出窗口内注册弹出式重定向

Question

我使用MSAL快速启动来做出反应--为SPA创建一个单独的租户应用程序注册。react代码与弹出一起工作，这意味着用户可以登录，弹出就消失了。

现在，我需要从单一租户转移到多租户，以尽可能少的变化，所以我理解如何改变是需要多租户。

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

该标志工作，但弹出窗口本身显示的网站，而不是关闭和我原来的网页浏览器有身份验证。

如何使弹出窗口正确关闭？它只适用于单一租户，而不是多租户。

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

这种行为可能与多租户应用程序使用/common端点有关。尽管/common端点必须与多租户应用程序一起使用，但来宾用户将被重定向到他们的家庭租户，在其中签名可以解释重定向问题。尝试使用您的tenantId而不是/common端点，看看这是否解决了问题。另外，另一个使用MSAL与多租户应用程序时常见的错误是它错过了最初通过/common端点生成的缓存条目，因此要确保对签名用户的后续调用是对租户的端点进行的，而不是/common。

Answer 2

出现此问题是因为您的路由器替换了url中的散列--库在弹出中验证所需的哈希。如果您只使用基于弹出的登录，当您在url中找到散列时，将入口点更改为不命中您的逻辑，例如，如果您使用的是react

在index.js中替换这个

  ReactDOM.render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <App/>
      </MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
  );

有了这个

if (window.location.hash !== ''){
  console.log("hash found" + window.location.hash);
}
else {
  ReactDOM.render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <App/>
      </MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
  );
}