使用 MSAL.js 将 React 单页应用程序与 Azure Active Directory 集成

Question

我正在学习使用 MSAL 在 React 应用程序上进行身份验证，我正在关注这个：https://www.youtube.com/watch?v=7oPSL5wWeS0

我在 Microsoft 租户中创建了一个应用程序

并更新了代码：

index.tsx

import { PublicClientApplication } from '@azure/msal-browser';


export const pca = new PublicClientApplication({
  auth: {
    clientId: 'clientId',
    authority: 'https://login.microsoftonline.com/tenantId',
    redirectUri: '/'
  }
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <App/>
);

App.tsx

import { SignInButton } from './components/SignInButton';
import { MsalProvider} from "@azure/msal-react";
import { pca } from "./index";


function App() {
  
  return (
    <MsalProvider instance={pca}>
      <SignInButton />      
    </MsalProvider>
  );
}

export default App;

登录按钮.tsx

import { DefaultButton } from '@fluentui/react/lib/Button';
import { useMsal } from "@azure/msal-react";

export const SignInButton = () => {
    const { instance } = useMsal();

    const handleSignIn = () => {
        instance.loginRedirect({
            scopes: ['user.read']
        });
    }

    return (
        <DefaultButton onClick={handleSignIn}>Sign in</DefaultButton>
    )
};

在运行应用程序时，我在单击“登录”按钮后立即看到此错误：

我错过了什么？