Azure AD B2C - 缓存位置从 sessionStorage 更改为 localStorage

Question

我正在使用一个 React 单页应用程序，该应用程序使用 Azure ADB2C 进行用户注册和登录。

该应用程序已投入生产，为客户提供服务。

我们正在使用 @msal/browser 和 @msal/react 包。当前设置的缓存是

sessionStorage

。

我们正在考虑将其更改为

localStorage

。

此更改是否有任何陷阱或问题需要解决？

谢谢，阿南德。

已经登录的用户会有问题吗？

Answer 1

我在 Azure AD B2C 中使用 @msal/browser 和 @msal/react 包尝试使用以下代码通过 localStorage 进行登录和注销。

代码：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import App from './App';
import { config } from './Config';

const msalInstance = new PublicClientApplication({
  auth: {
    clientId: config.appId,
    redirectUri: config.redirectUri,
    authority: config.authority,
    knownAuthorities: config.knownAuthorities,
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true,
  },
});

const root = document.getElementById('root');

const render = (Component) => {
  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <Component />
      </MsalProvider>
    </React.StrictMode>,
  );
};
render(App);

AuthButton.js：

import React from 'react';
import { config } from './Config';

function AuthButton({ msalInstance }) {
  const login = async () => {
    try {
      await msalInstance.loginPopup({
        scopes: config.scopes,
        prompt: 'login',
      });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={login}>Login</button>
    </div>
  );
}
export default AuthButton;

App.js：

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

function App() {
  const { accounts, instance } = useMsal();

  return (
    <div className="App">
      <header className="App-header">
        <h1>MSAL React App</h1>
        {accounts.length === 0 ? (
          <AuthButton msalInstance={instance} />
        ) : (
          <div>
            <p>Welcome, {accounts[0].name}</p>
            <button onClick={() => instance.logout()}>Logout</button>
          </div>
        )}
      </header>
    </div>
  );
}
export default App;

Config.js：

export const config = {
    appId: '<client_ID>',
    redirectUri: 'http://localhost:3000',
    scopes: ['openid', 'profile','user.read'],
    authority: 'https://<b2c-tenant>.b2clogin.com/<your-b2c-tenant>.onmicrosoft.com/<policy-name>',
    knownAuthorities: ['https://<b2c-tenant>.b2clogin.com/<your-b2c-tenant>.onmicrosoft.com/<policy-name>'],
  };

我将以下 URL 添加到应用程序身份验证中作为单页应用程序：