如何使用 next.js 14 和 App Router 进行 Azure 单点登录

Question

我正在开发一个使用

React 18

和

Next.js 14

的 React Web 应用程序。我按照 Next.js 样板设置的建议使用

App Router

，该设置在

app

文件夹内创建

src

文件夹。.我使用

layout.tsx

作为我的应用程序的入口点。

我没有很多文章中提到的

pages

文件夹或

_app.tsx

。

我已经阅读了 next.js 的官方文档（here）。但没有找到关于为我的

Azure SSO

应用程序配置

App Router

和

Next.js

的清晰细节。

只是想知道是否有任何文章详细解释了流程。或具有上述先决条件的工作示例？

Answer 1

我使用 AppRouter 尝试了以下 React 18 和 Next.js 14 代码进行单点登录。

代码：

src/components/ProtectedRoute.tsx：

import { useRouter } from 'next/router';
import { useMsal } from '@azure/msal-react';
import React from 'react';

const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const router = useRouter();
    const { instance } = useMsal();
    const isAuthenticated =  true;
    if (!isAuthenticated) {
        router.push('/login');
        return null;
    }
    return <>{children}</>;
};
export default ProtectedRoute;

src/layouts/Layout.tsx：

import React, { ReactNode } from 'react';
import { MsalProvider } from '@azure/msal-react';
import { PublicClientApplication } from '@azure/msal-browser'; 
import { msalConfig } from '../msalConfig';

interface LayoutProps {
    children: ReactNode;
}
const Layout: React.FC<LayoutProps> = ({ children }) => {
    const msalInstance = new PublicClientApplication(msalConfig);
    return (
        <MsalProvider instance={msalInstance}>
            <div>
                {children}
            </div>
        </MsalProvider>
    );
};
export default Layout;

src/pages/login.tsx：

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

const Login: React.FC = () => {
    const { instance } = useMsal();
    const handleLogin = () => {
        instance.loginPopup();
    };
    return (
        <div>
            <h1>Login Page</h1>
            <button onClick={handleLogin}>Login with Microsoft</button>
        </div>
    );
};
export default Login;

src/pages/index.tsx：

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

const Home: React.FC = () => {
    const { instance, accounts } = useMsal();
    const handleSignIn = () => {
        instance.loginPopup();
    };
    const handleSignOut = () => {
        instance.logout();
    };
    return (
        <div>
            {accounts.length === 0 && (
                <>
                    <h1>Welcome to my Next.js App</h1>
                    <button onClick={handleSignIn}>Sign In</button>
                </>
            )}
            {accounts.length > 0 && (
                <button onClick={handleSignOut}>Sign Out</button>
            )}
        </div>
    );
};
export default Home;

src/pages/_app.tsx：

import React from 'react';
import { AppProps } from 'next/app';
import Layout from '../layouts/Layout';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
};
export default MyApp;

src/msalConfig.ts：

export const msalConfig = {
    auth: {
        clientId: '<client_ID>',
        authority: 'https://login.microsoftonline.com/<tenant_ID>',
        redirectUri: 'http://localhost:3000', 
    },
};

我在 Azure 应用程序的 Authentication 中添加了输出 URL 作为 单页应用程序，如下所示。