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

【问题标题】：MSAL 2.0 Auth in React JS - Incognito issueReact JS 中的 MSAL 2.0 Auth - 隐身问题
【发布时间】：2021-05-18 00:00:15
【问题描述】：

我在反应中使用azure-msal-react 进行用户身份验证。使用的代码sn-p如下。

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 实现重定向身份验证？

有人可以指出我在反应中执行 msal 2.0 身份验证的任何代码 sn-p。大多数可用的文章都非常旧。

【问题讨论】：

在您发出此请求时是否启用或禁用了第三方 cookie？
如果第三方 cookie 被阻止，则预期会出现此错误，因为静默登录请求使用 iframe，因此依赖于 3p cookie。要解决，请调用交互式方法。
@jasonnutter 我在获取令牌时使用重定向方法登录后收到此错误
getTokenSilently 在身份验证后被调用 { useMsalAuthentication(InteractionType.Redirect, request); }

标签： javascript reactjs azure msal msal.js

【解决方案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;

【讨论】：