如何解决 OKTA 托管注销上的 CORS 错误

Question

我正在尝试将 OKTA 添加到我的 React 应用程序中。我已经登录以正常工作。但我正在为注销而苦苦挣扎。

设置：我在 OKTA these instructions 之后将 OKTA 添加到我的项目中。

这大部分工作正常，但包括这些调用登录的说明

  const { authState, authService } = useOktaAuth();
  const login = () => authService.login('/profile');

authService 找不到。所以我去了 OKTA Example 并将其更改为

  const { authState, oktaAuth } = useOktaAuth();
  const login = async () => oktaAuth.signInWithRedirect();

这也意味着

authService.signOut();

改为

oktaAuth.signOut();

问题：正如我上面所说，我可以正常登录。 authState.isAuthenticated 解析为真。

然而，当我尝试注销时，React 报告“未处理的拒绝 (AuthApiError)”错误：

控制台报告这些错误：

Access to XMLHttpRequest at 'https://dev-7869221.okta.com/oauth2/default/v1/revoke' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST https://dev-7869221.okta.com/oauth2/default/v1/revoke net::ERR_FAILED

Uncaught (in promise) AuthApiError

我克隆了 OKTA 示例代码，并在我的应用程序详细信息中进行了硬编码。 Login/Logout 在演示应用程序上运行良好。当我注销配置对象时，它们匹配。所以我得出结论：

我的 OKTA 应用程序配置正确。
示例应用正在做一些我没有注意到的事情
关于这些详细信息，OKTA 文档已过时。

为了完整起见，我的源代码和 package.json 如下。该应用程序是使用打字稿模板 create-react-app 创建的。

export const config = {
    clientId,
    issuer: `https://${domain}/oauth2/default`,
    redirectUri: 'http://localhost:3000/login/callback',
    scopes: ['openid', 'profile', 'email'],
    pkce: true,
    disableHttpsCheck: false,
};

const oktaAuth = new OktaAuth(config);

const CALLBACK_PATH = '/login/callback';

function App() {
    return (
        <Router>
            <Security oktaAuth={oktaAuth}>
                <Switch>
                    <Route path={CALLBACK_PATH} component={LoginCallback}/>
                    <Route path={'/'} component={Main} exact/>
                    <Route path={'/orgList'} component={OrgList}/>
                </Switch>
            </Security>
        </Router>
    );
}

export default App;

import React from 'react';
import { useOktaAuth } from '@okta/okta-react';

function Main() {
    const { authState, oktaAuth } = useOktaAuth();

    const login = async () => oktaAuth.signInWithRedirect();
    const logout = async () => oktaAuth.signOut();

    if( authState.isPending ) {
        return (
            <>
                <div>Loading authentication...</div>
            </>
        );
    } else if( !authState.isAuthenticated ) {
        return (
            <>
                <div>
                    <button onClick={login}>Login</button>
                </div>
            </>
        );
    }
    return (
        <>
            <button onClick={logout}>Logout</button>
        </>
    );
}

export default Main;

{
  "name": "okta-test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@okta/okta-auth-js": "^4.5.0",
    "@okta/okta-react": "^4.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "@types/jest": "^26.0.19",
    "@types/node": "^12.19.9",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-router-dom": "^5.1.6",
    "cross-env": "^7.0.3",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.3"
  },
  "scripts": {
    "start": "cross-env PORT=3000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

您需要在 Okta 中添加您的主机名作为“可信来源”。为此，请登录 Okta Admin > Security > API > Trusted Origins > 单击 Add Origin 并输入您的应用程序 url 例如 http://127.0.0.1:3000

如何解决 OKTA 托管注销上的 CORS 错误

How to resolve a CORS error on OKTA Hosted Signout

reactjs

oauth-2.0

okta

见文档： https://support.okta.com/help/s/question/0D51Y00007w9P8f/implicitcallback-returning-authapierror-screen-in-single-sign-on?language=en_US

https://developer.okta.com/docs/reference/error-codes/

https://devforum.okta.com/t/cors-issues-while-testing-on-device/857/2