为什么在使用 Django 时 Okta-React 登录会重定向到空白页面？

Question

我在我的 React 项目中使用 Okta-React 进行身份验证，当我运行 React 测试服务器时，我的登录身份验证成功并重定向到帐户页面。当我运行 React 构建命令并使用 Django 呈现构建文件时，我的登录身份验证正确，但是当它重定向回我的站点时，我得到一个空白的 /implicit/callback 页面，没有登录令牌或用户信息，并且代码和状态卡在 URL 中。有谁知道为什么只有在使用 Django 时才会发生这种情况，我可以做些什么来解决这个问题？

这是我的 authConfig：

const config = {
  issuer: 'https://dev-#######.okta.com/oauth2/default',
  redirectUri: window.location.origin + '/implicit/callback',
  clientId: '#@#@#@#@#@#@#@#@#',
  pkce: true
};

export default config;

这是我的帐户授权

import React, { useState, useEffect } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import '../scss/sass.scss';
import "../../node_modules/bootstrap/scss/bootstrap.scss";
import 'react-bootstrap';

const AccountAuth = () => {
  const { authState, authService } = useOktaAuth();
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    if (!authState.isAuthenticated) {
      // When user isn't authenticated, forget any user info
      setUserInfo(null);
    } else {
      authService.getUser().then((info) => {
        setUserInfo(info);
      });
    }
  }, [authState, authService]); // Update if authState changes

  localStorage.setItem("username", userInfo && userInfo.given_name)

  const login = async () => {
    // Redirect to '/account_page' after login
    localStorage.setItem("accountLink", "/account_page")
    localStorage.setItem("loginPostingVisibilityStyle", { display: "none" })
    localStorage.setItem("postingVisibleStyle", { display: 'block' })
    authService.login('/auth_index');
  }

  const logout = async () => {
    // Redirect to '/' after logout
    localStorage.setItem("username", null)
    localStorage.setItem("accountLink", "/auth_index")
    localStorage.setItem("loginPostingVisibilityStyle", { display: "block" })
    localStorage.setItem("postingVisibleStyle", { display: 'none' })
    authService.logout('/');
  }

  return authState.isAuthenticated ?
    <button className="settings-index" onClick={logout}>Logout</button> :
    <button className="settings-index" onClick={login}>Login</button>;


};

export default AccountAuth;

这里是URL卡住的例子

http://localhost:8000/implicit/callback?code=-mRoU2jTR5HAFJeNVo_PVZsIj8qXuB1-aioFUiZBlWo&state=c9RXCvEgQ4okNgp7C7wPkI62ifzTakC0Ezwd8ffTEb29g5fNALj7aQ63fjFNGGhT

Answer 1

您似乎 handling the callback to exchange the authorization_code for tokens. You might want to check out Okta's React sample app 看不到它是如何工作的。

为什么在使用 Django 时 Okta-React 登录会重定向到空白页面？

Why does Okta-React Login redirect to blank page when using Django?

javascript

python

reactjs

django

okta