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

我试图在我的环境中重现同样的结果,结果如下:

我注册了一个Azure AD应用程序(SPA)并添加了 重定向URI ashttp://localhost:3000这样地:

现在我克隆了 相同的 msal-react 示例和修改后的代码如下:

App.js

import Grid from "@mui/material/Grid";
import { PageLayout } from "./components/PageLayout";
import { Routes, Route } from "react-router-dom";

import { Home } from "./pages/Home";
import { Profile } from "./pages/Profile";

import { MsalProvider } from "@azure/msal-react";


function App({msalInstance}) {
    return (
        <MsalProvider instance = {msalInstance}>
        <PageLayout>
            <Grid container justifyContent="center">
                <Pages />
            </Grid>
        </PageLayout>
        </MsalProvider>
    );
}

const Pages = () => {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/profile" element={<Profile />} />
        </Routes>
    );
}

export default App;

登录按钮.jsx

import Button from '@mui/material/Button';

import { useMsal } from '@azure/msal-react';


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

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

    return (
        <Button color="inherit" onClick={handleSignIn}>Sign in</Button>
    )
};

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import { ThemeProvider } from '@mui/material/styles';
import { theme } from "./styles/theme";

import { BrowserRouter } from "react-router-dom";

import App from './App';

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

const pca = new PublicClientApplication({
    auth: {
        clientId: '7006179e-2a1a-4790-9847-xxxxxxxxx',
        authority: 'https://login.microsoftonline.com/3f5c7a77-062d-426c-8582-xxxxxxxxxxx',
        redirectUri: '/',
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <ThemeProvider theme={theme}>
                <App msalInstance={pca} />
            </ThemeProvider>
        </BrowserRouter>
    </React.StrictMode>
);

当我奔跑时http://localhost:3000在浏览器中,我看到了下面的屏幕:

点击后 Sign In 按钮,我有登录屏幕选择帐户,如下所示:

当我选择哪个应用程序提供的帐户时 客户端ID 存在,我得到了这样的同意屏幕:

同意后,用户成功登录,屏幕如下:

在你的情况下,检查你是否通过 应用程序ID 应用于 clientId 参数与否。

为了重现错误,我更改了代码,将AppID替换为 对象ID 应用于 客户端ID 参数

import React from 'react';
import ReactDOM from 'react-dom/client';

import { ThemeProvider } from '@mui/material/styles';
import { theme } from "./styles/theme";

import { BrowserRouter } from "react-router-dom";

import App from './App';

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

const pca = new PublicClientApplication({
    auth: {
        clientId: 'bfd0d11b-0dd4-4acd-bbab-xxxxxxxxxx',
        authority: 'https://login.microsoftonline.com/3f5c7a77-062d-426c-8582-xxxxxxxxxxx',
        redirectUri: '/',
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <ThemeProvider theme={theme}>
                <App msalInstance={pca} />
            </ThemeProvider>
        </BrowserRouter>
    </React.StrictMode>
);

我得到了 同样的错误 单击后立即 登录 按钮如下:

致 决定 错误,请确保通过 AppID 您可以在此处找到应用程序: