为什么使用Django时Okta React Login重定向到空白页面

Question

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

这是我的authConfig:

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

这是我的账户Auth

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

看起来并不是在处理用authorization_code交换令牌的回调。你可能想看看Okta的React示例应用程序，看看它是如何工作的。