如何解决为什么使用 Django 时 Okta-React 登录重定向到空白页面?
我在我的 React 项目中使用 Okta-React 进行身份验证,当我运行 React 测试服务器时,我的登录身份验证成功并重定向到帐户页面。当我运行 React build 命令并使用 Django 呈现构建文件时,我的登录名正确地进行了身份验证,但是当它重定向回我的站点时,我得到一个空白的 /implicit/callback 页面,没有登录令牌或用户信息,以及代码和状态卡在 URL 中。有谁知道为什么只有在使用 Django 时才会发生这种情况,以及我可以做些什么来解决这个问题?
这是我的 authConfig:
calcArea
这是我的帐号验证
const config = {
issuer: 'https://dev-#######.okta.com/oauth2/default',redirectUri: window.location.origin + '/implicit/callback',clientId: '#@#@#@#@#@#@#@#@#',pkce: true
};
export default config;
这是一个 URL 卡住时的例子
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;
解决方法
您似乎不是 handling the callback 可以将 authorization_code 交换为令牌。您可能想查看 Okta 的 React sample app 以了解其工作原理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。