如何在使用散列路由器的react应用程序中实现microsoft oauth

npm install react-router-dom react-oauth2-msal

yarn add react-router-dom react-oauth2-msal

import { HashRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/callback" component={Callback} />
    </Router>
  );
}

export const oauthConfig = {
  authority: 'https://login.microsoftonline.com/{YOUR_TENANT_ID}',
  clientId: '{YOUR_CLIENT_ID}',
  redirectUri: window.location.origin + '/#/callback',
  scopes: ['openid', 'profile', 'email'],
};

import React, { useEffect } from 'react';
import { useMsalAuthentication } from 'react-oauth2-msal';

function Callback() {
  const { error } = useMsalAuthentication();

  useEffect(() => {
    if (error) {
      // 处理错误情况
    } else {
      // 处理成功情况，例如导航到应用程序的主页
    }
  }, [error]);

  return <div>正在进行身份验证...</div>;
}

export default Callback;

import React from 'react';
import { useMsalAuthentication } from 'react-oauth2-msal';

function Home() {
  const { login } = useMsalAuthentication();

  const handleLogin = () => {
    login();
  };

  return (
    <div>
      <button onClick={handleLogin}>使用Microsoft账号登录</button>
    </div>
  );
}

export default Home;