umi4 实现msal aad 登录loginRedirect方式并获取令牌

在 Umi 4 中使用 Ant Design Pro Layout 以及 MSAL (Microsoft Authentication Library) 实现登录并获取令牌进入到首页，你需要按照以下步骤进行操作：

1. 安装所需依赖：
   使用 npm 或 yarn 安装所需的包：

   npm install @azure/msal-browser @azure/msal-react ant-design/pro-layout

   或

   yarn add @azure/msal-browser @azure/msal-react ant-design/pro-layout

2. 配置 MSAL：
在项目中创建一个新文件，例如 src/msalConfig.js。在此文件中，配置 MSAL 实例并导出它：

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

const msalConfig = {  
  auth: {  
    clientId: "your-client-id",  
    authority: "https://login.microsoftonline.com/your-tenant-id",  
    redirectUri: "http://localhost:8000",  
  },  
};  

const msalInstance = new PublicClientApplication(msalConfig);  

export { msalInstance };  

请将 your-client-id 和 your-tenant-id 替换为在 Azure Portal 中注册的应用程序的相应值。

注意：要想实现整个应用程序中管理用户的身份验证状态，在umi4之前layout 有children 属性直接用MsalProvider标签包裹就可以。而umi4没有使用Outlet标签替代children，思考如何实现呢

3、更新 src/app.tsx 以包含 MsalProvider：

import React from 'react';  
import { history } from 'umi';  
import { msalInstance } from './msalConfig';  
import { MsalProvider } from '@azure/msal-react';  

export function render(oldRender) {  
  oldRender();  
}  

export function rootContainer(container) {  
  return React.createElement(  
    MsalProvider,  
    {  
      instance: msalInstance,  
    },  
    container  
  );  
}  

解释app.tsx

这段代码是一个umi插件的入口文件，其中包含了两个函数：render和rootContainer。

render函数是umi框架提供的函数，在应用程序启动之前会被调用，用来执行一些额外的初始化操作。在这个示例中，oldRender参数是一个回调函数，它会在render函数执行完毕后被调用，以便继续渲染应用程序。

rootContainer函数则是应用程序的根组件，它接收一个名为container的参数，该参数表示应用程序中所有其他组件的层次结构。在这个示例中，rootContainer函数返回一个MsalProvider组件，它是Azure Active Directory中的一个React组件，用于在整个应用程序中管理用户的身份验证状态。

MsalProvider组件接收一个名为instance的属性，它是一个MSAL实例，用于管理身份验证和令牌获取等操作。在这个示例中，msalInstance是从@/layouts/msalConfig导入的，它是一个MSAL实例的配置文件，包含了应用程序的客户端ID和租户ID等信息。

最后，rootContainer函数使用React.createElement函数将MsalProvider组件和container参数一起传递，以便将其作为根组件渲染到应用程序中。

4. 创建一个登录组件，例如 src/pages/login/index.js，并实现 MSAL loginRedirect 方法：

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

const Login = () => {  
  const { instance } = useMsal();  

  const handleLogin = () => {  
    const loginRequest = {  
      scopes: ["openid", "profile", "User.Read"],  // 换成自己的租户授权信息
    };  
    instance.loginRedirect(loginRequest);  
  };  

  return (  
    <div>  
      <button onClick={handleLogin}>Login with Microsoft</button>  
    </div>  
  );  
};  

export default Login;  

5. 使用 Ant Design Pro Layout 和 Outlet 路由标签实现登录跳转：
在 src/layouts/index.js 中，使用 ProLayout 和 Outlet 标签并在成功登录并获取到令牌后执行跳转到首页：

import React, { useEffect } from "react";  
import ProLayout from "@ant-design/pro-layout";  
import { Outlet } from "react-router-dom";  
import { useMsal } from "@azure/msal-react";  
import { useHistory } from "react-router-dom";  

const Layout = () => {  
  const { instance } = useMsal();  
  const history = useHistory();  

  useEffect(() => {  
    const handleRedirect = async () => {  
      const response = await instance.handleRedirectPromise();  
      if (response) {  
        // 登录成功，跳转到首页  
        history.push("/");  
      }  
    };  

    handleRedirect();  
  }, [instance, history]);  

  return (  
    <ProLayout>  
      <Outlet />  
    </ProLayout>  
  );  
};  

export default Layout;  

使用此代码，当用户成功登录

注意，我们做的是单页面应用在 Azure 的时候按照以下步骤

 

 将redirectUri 设置为你的代码里的回调地址

拓展、

. 在成功登录后，你可以使用 msal-browser 的 instance 对象获取访问令牌并使用 Microsoft Graph API 获取用户信息。将以下代码添加到 src/layouts/index.js 文件中的 useEffect 函数内部：

useEffect(() => {  
  const handleRedirect = async () => {  
    const response = await instance.handleRedirectPromise();  
    if (response) {  
      // 登录成功，跳转到首页  
      history.push("/");  
        
      // 获取访问令牌  
      const accessTokenRequest = {  
        scopes: ["User.Read"],  
        account: instance.getAccountByUsername(response.account.username),  
      };  
      const accessTokenResponse = await instance.acquireTokenSilent(accessTokenRequest);  
      const accessToken = accessTokenResponse.accessToken;  

      // 使用访问令牌获取用户信息  
      const userResponse = await fetch("https://graph.microsoft.com/v1.0/me", {  
        headers: {  
          Authorization: `Bearer ${accessToken}`,  
        },  
      });  
      const userInfo = await userResponse.json();  
      console.log(userInfo);  
    }  
  };  

  handleRedirect();  
}, [instance, history]);  

这段代码首先使用 acquireTokenSilent 方法获取访问令牌，然后使用 fetch API 调用 Microsoft Graph API 的 /me 端点以获取用户信息。获取到的用户信息将被输出到控制台。

现在，当用户成功登录并获取令牌后，应用程序将获取用户信息并将其输出到控制台。你可以根据需要自定义此代码以将用户信息存储在状态管理库（如 Redux 或 MobX）中或直接在组件状态中。

案例开源代码umi4+react18+add