Question

我是React的新手，并试图在我的React App中实现单点登录身份验证。

目标：

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

我遇到过MSAL（https://github.com/AzureAD/microsoft-authentication-library-for-js），这似乎对此很有帮助。

我尝试过的事情：

基于MSDN文档：https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa，我已经在Azure中注册了我的React SPA应用并获得了客户端ID。
我已经创建了一个js文件（Auth.js）来处理登录，令牌生成和图形API调用，如文档所述：https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa#use-the-microsoft-authentication-library-msal-to-sign-in-the-user
我在index.js中配置了以下路线：

ReactDOM.render(<MuiThemeProvider theme={theme}> <Router> <Switch> <Route path="/" exact component={Projects}/> <Route path="/projects" exact component={Projects}/> <Route path="/admin" exact component={Admin}/> <Route path="/projectstages/:projectNumber" exact component={ProjectStages}/> <Route path="/formspage" exact component={FormsPage}/> <Route path="/users" exact component={UserManagement}/> </Switch> </Router> </MuiThemeProvider>, document.getElementById('root'));

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

class App extends Component { render(){ return( <div className="App"> {this.props.children} </div> ); } }

如何将其集成到我的React应用程序中，以便只有经过身份验证的用户才能访问React路由以及上面提到的目标？请让我知道是否可以提供更多详细信息或对此进行更多解释。

Answer 1

这通常是通过使用高阶分量来实现的。

这个想法是，当您加载需要身份验证的页面时，您会调用一个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>
  )
}

然后，您可以使用身份验证提供程序包装您的应用程序

  <AuthenticationProvider>
     <App/>
  </AuthenticationProvider>

对于每个页面，您都可以像这样使用HOC

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

export default withAuth(true)(ProtectedPage)

Answer 2

我建议为此使用软件包： https://www.npmjs.com/package/react-microsoft-login

安装：

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} />
  );
};

MSAL身份验证和使用React.js的身份验证

2 个答案: