Javascript 使用React.js进行MSAL身份验证和授权

我是React的新手，正在尝试在我的React应用程序中实现单点登录身份验证

目标：

• 提供一个登录页面，用户可以在其中输入其电子邮件地址
• 单击登录用户获取SSO弹出窗口（基于Azure AD）以接受条款并登录
• 用于检索用户详细信息（电子邮件ID等）的调用图API
• 检索登录令牌并存储在浏览器缓存（localStorage）中，并将其用于后续URL访问（React routes）

我遇到了MSAL（），它似乎对此很有用

我尝试过的：

• 基于MSDN文档：，我已经在Azure中注册了我的React SPA应用程序，并获得了客户端ID

• 我创建了一个js文件（

  Auth.js

  ），用于处理文档中提到的登录、令牌生成和图形API调用：

• 在我的

  index.js

  中，我配置了路由：

ReactDOM.render(
，document.getElementById（'root'）


这些路由（组件）在主
App.jsx
组件中呈现：

类应用程序扩展组件{
render（）{
返回(
{this.props.children}
);
}
}

如何将其集成到我的React应用程序中，以便只有经过身份验证的用户才能访问React路由以及我上面提到的目标？请告诉我是否可以提供更多详细信息或解释更多信息。
这通常是使用高阶组件实现的

其思想是，当您加载一个需要身份验证的页面时，您可以调用一个api，使用cookie中存储的访问令牌或您使用的任何存储来获得身份验证。然后，您需要将受保护的路由包装到检查身份验证数据的HOC

import React, {useState, useContext, useRef, createContext } from 'react'

const AuthContext = createContext(null)

export const withAuth = (requireAuth = true) => (WrappedComponent) => {
  function Auth(props) {
    const isMounted = useRef(false);
    // this is the authentication data i passed from parent component
    // im just using 
    const { loading, error, auth } = useContext(AuthContext);
    useEffect(() => {
      isMounted.current = true;
    }, []);
    if (!isMounted.current && loading && requireAuth !== 'optional') {
      return (<span>Loading...</span>);
    }
    if ((!auth || error) && requireAuth === true) {
      return (<Redirect to="/login" />);
    } if (auth && requireAuth === false) {
      return (<Redirect to="/" />);
    }
    return (
      <WrappedComponent {...props} />
    );
  }
  return Auth;
};

export function AuthenticationProvider(props) {
   const [auth, setAuth] = useState()
   const [error, setErr] = usetState()
   const [loading, setLoading] = useState(true)
   useEffect(() => {
     // get authentication here
     api.call('/auth')
       .then(data => {
         setAuth(data)
         setLoading(false) 
       })
      .catch(err => {
        setLoading(false)
        setErr(err)
      })

   })

  return (
    <AuthContext.Provider value={{ auth, error, loading }}>
       {children}
    </AuthContext.Provider>
  )
}

我想推荐使用此软件包：

安装：
导入和配置组件：
从“React”导入React；
从“react microsoft login”导入MicrosoftLogin；
导出默认道具=>{
常量authHandler=（错误，数据）=>{
console.log（错误、数据）；
};
返回(
);
};
是否需要调用图API，以便需要使用Id令牌生成accessToken进行用户身份验证？它不提供刷新令牌客户端身份验证的预期结果。如果需要刷新令牌，则需要实现服务器端身份验证。
  <AuthenticationProvider>
     <App/>
  </AuthenticationProvider>

function ProtectedPage(props){
  // your code here
}

export default withAuth(true)(ProtectedPage)

yarn add react-microsoft-login
# or
npm i react-microsoft-login

import React from "react";
import MicrosoftLogin from "react-microsoft-login";

export default props => {
  const authHandler = (err, data) => {
    console.log(err, data);
  };

  return (
    <MicrosoftLogin clientId={YOUR_CLIENT_ID} authCallback={authHandler} />
  );
};