reactjs 跨多个应用的Okta SSO

a64a0gku  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(156)

我正在使用Okta来管理我的应用程序的用户,该应用程序是在React中创建的。我实现了一个自定义的登录页面,它工作正常,并对用户进行了身份验证。应用程序的必要条件之一是,当用户已经在Okta域中进行身份验证时(例如,account.mycompany.com),用户不必再次在此应用程序中进行身份验证。它应该保持身份验证。我在项目中使用this Okta package
我设法做到了这一点,当用户已经在Okta域中进行了身份验证时,应用程序会加载他的身份验证并继续流程。问题是,当用户未通过身份验证时,它会将用户发送到okta托管的登录页面。我需要它发送到我的。
下面是我的app的代码。在注解中,这一行是这样做的,这是我想知道要改变什么才能有预期的行为。

const MyApp = () => {
  const defaultTheme = useTheme();
  const theme = createTheme(deepmerge(defaultTheme, MainTheme));
  const navigate = useNavigate();
  const oktaAuth = new OktaAuth(getOktaConfig());

  const triggerLogin = async () => {
    // this is the line that handles the user already authenticated 
    // and also the line that is sending the user to the okta hosted login page.
    // What do I change so it continues to authenticate the user when he's already 
    // authenticated in the domain but also it doesn't send him to the okta hosted login page?
    await oktaAuth.signInWithRedirect();
  };

  const onAuthRequired = async () => {
    const previousAuthState = oktaAuth.authStateManager.getPreviousAuthState();
    if (!previousAuthState || !previousAuthState.isAuthenticated) {
      // App initialization stage
      await triggerLogin();
    } else {
      // Ask the user to trigger the login process during token autoRenew process
      navigate(routes.SIGN_IN().PATH, { replace: true });
    }
  };

  const restoreOriginalUri = async () => {
    navigate(routes.DASHBOARD().PATH, { replace: true });
  };

  return (
    <Security
      oktaAuth={oktaAuth}
      onAuthRequired={onAuthRequired}
      restoreOriginalUri={restoreOriginalUri}
    >
      <Provider store={store}>
        <AppProviders>
          <LayoutWrapper>
            <ThemeProvider theme={theme}>
              <Router />
            </ThemeProvider>
          </LayoutWrapper>
        </AppProviders>
      </Provider>
    </Security>
  );
};

谢谢你的帮助
我已经尝试在signInWithRedirect方法中传递原始uri。
await oktaAuth.signInWithRedirect( { originalUri:routes.SIGN_IN().PATH });
它没有给予我我需要的行为。我觉得我需要一种方法来通知Okta,通过代码或配置,登录页面的URL,当用户没有通过身份验证时,将用户重定向到该页面。不确定是否有可能。

sqougxex

sqougxex1#

第三方cookies很重要。我在Incognito和Chrome中进行了测试,默认情况下选择此选项“在Incognito中阻止第三方cookie”,这阻止了流程正常工作。
由于我在互联网上的许多地方都看到了同样的问题,所以我在下面粘贴了一段代码,使它在我的React应用程序中工作。

useEffect(() => {
    if (oktaAuth.authStateManager.getAuthState()?.isAuthenticated) {
      navigate(routes.DASHBOARD().PATH, { replace: true });
    } else {
      oktaAuth.session.exists().then((exists) => {
        if (exists) {
          oktaAuth.token
            .getWithoutPrompt({
              responseType: ['token', 'id_token'],
            })
            .then((res) => {
              oktaAuth.handleLoginRedirect(res.tokens);
            });
        }
      });
    }
  }, [isAuthenticated]);

谢谢

相关问题