React JS 中的 MSAL 2.0 Auth - 隐身问题

Question

我在 React 中使用 azure-msal-react 进行用户身份验证。使用的代码片段如下。

import React, { useEffect } from 'react';
import { useMsal, useIsAuthenticated, useMsalAuthentication } from '@azure/msal-react';
import './App.scss';
import { useDispatch } from 'react-redux';
import { InteractionType } from '@azure/msal-browser';
import { AuthActions } from './store/actions/authActions';

import Routes from './routes';

function App() {
  const { instance, accounts } = useMsal();
  const dispatch = useDispatch();
  const isAuthenticated = useIsAuthenticated();
  const request = {
    scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
  };
  useMsalAuthentication(InteractionType.Redirect, request);

  useEffect(() => {
    async function getTokenSilently() {
      const tokenRequest = {
        scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
        loginHint: accounts[0].username,
      };
      const res = await instance.ssoSilent(tokenRequest);
      dispatch({ type: AuthActions.SET_TOKEN, payload: res.accessToken });

      dispatch({ type: AuthActions.SET_CLAIMS, payload: accounts[0].username });

   
    }
    if (isAuthenticated) {
      getTokenSilently();
    }
  }, [isAuthenticated]);

  return <Routes />;
}
export default App;

它在隐身模式下抛出以下错误。

有人可以指出正确的方向来解决这个问题吗？有没有更好的方法来使用 msal 实现重定向身份验证？

有人可以指出任何在 React 中执行 msal 2.0 身份验证的代码片段吗？大多数可用的文章真的很旧。

Answer 1

循环发生的原因是 ssoSilent 总是通过打开隐藏的 iframe 来发出网络请求。这总是会失败，因为很可能 3p cookie 被阻止，这会导致再次调用弹出窗口。

您应该改为将 ssoSilent 调用更改为 acquireTokenSilent()。有关详细信息，请参阅此处的 sample。

Github issue link here

import React, { useEffect } from 'react';
import { useMsal, useIsAuthenticated, useMsalAuthentication, useAccount } from '@azure/msal-react';
import './App.scss';
import { useDispatch } from 'react-redux';
import { InteractionType } from '@azure/msal-browser';
import { AuthActions } from './store/actions/authActions';

import Routes from './routes';

function App() {
  const { instance, accounts, inProgress } = useMsal();
  const account = useAccount(accounts[0] || {});

  const dispatch = useDispatch();
  const isAuthenticated = useIsAuthenticated();
  const request = {
    scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
  };
  useMsalAuthentication(InteractionType.Redirect, request);

  useEffect(() => {
    async function getTokenSilently() {
      const tokenRequest = {
        scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
        // loginHint: accounts[0].username,
        account,
      };

      const res = await instance.acquireTokenSilent(tokenRequest);
      dispatch({ type: AuthActions.SET_TOKEN, payload: res.accessToken });

      dispatch({ type: AuthActions.SET_CLAIMS, payload: accounts[0].username });

 
    }
    if (isAuthenticated && inProgress === 'none') {
      getTokenSilently();
    }
  }, [isAuthenticated]);

  return <Routes />;
}
export default App;

React JS 中的 MSAL 2.0 Auth - 隐身问题

MSAL 2.0 Auth in React JS - Incognito issue

javascript

reactjs

azure

msal

msal.js