对于每个请求，Okta反应加载过多的iframe。

Question

我正试图在我的申请中设置Okta反应。它通过Okta-signin-小部件成功地进行身份验证。但是，在每次加载页面时，它至少会向/authorize调用4个HTTP请求：

​

它似乎为这些请求的每个DOM附加了一个iframe。下面是我为小部件和Okta- React编写的React代码：

Root.js

<Provider store={store}>
    <Router>
      <Security
        issuer="https://dev-xxxx.oktapreview.com/oauth2/default"
        client_id="xxxx"
        redirect_uri={redirectUri}
        onAuthRequired={customAuthHandler}
      >
        <App />
      </Security>
    </Router>
  </Provider>

App.js

    import React from 'react';
class App extends React.Component {
  render() {
    return (
      <div className="fill">
        <SecureRoute path="/test" component={Test} />
        <Route
          path="/signin"
          render={({ location, history }) => (
            <Signin location={location} history={history} {...this.props} />
          )}
        />
        <Route path="/implicit/callback" render={() => <ImplicitCallback />} />
      </div>
    );
  }
}

导出默认withRouter(应用程序)

Signin.js

import React from 'react';

import ReactDOM from 'react-dom';
import { Redirect } from 'react-router-dom';
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import '@okta/okta-signin-widget/dist/css/okta-theme.css';
import { withAuth } from '@okta/okta-react';

class OktaSignInWidget extends React.Component {
  constructor(props) {
    super(props);

    this.onSuccess = this.onSuccess.bind(this);
  }
  componentDidMount() {
    const el = ReactDOM.findDOMNode(this);

    this.widget = new OktaSignIn({
      baseUrl: this.props.baseUrl,
      authParams: {
        display: 'page',
        responseType: ['id_token', 'token'],
        scopes: ['openid', 'groups', 'profile']
      }
    });
    this.widget.renderEl({ el }, this.onSuccess, this.props.onError);
  }

  onSuccess(res) {
    this.props.onSuccess(res);
    this.widget.remove();
  }

  render() {
    return <div />;
  }
}

export default withAuth(
  class Signin extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authenticated: null
      };

      this.onSuccess = this.onSuccess.bind(this);
      this.onError = this.onError.bind(this);
      this.checkAuthentication = this.checkAuthentication.bind(this);
      this.checkAuthentication();
    }

    componentDidUpdate() {
      this.checkAuthentication();
    }

    async checkAuthentication() {
      const authenticated = await this.props.auth.isAuthenticated();

      if (authenticated !== this.state.authenticated) {
        this.setState({ authenticated });
      }
    }

    onSuccess = res => {
      this.props.auth.redirect({
        sessionToken: res.sessionToken || res.session.token
      });
    };

    onError = error => {
      console.log('Something went wrong', error);
    };

    render() {
      if (this.state.authenticated === null) return null;

      if (this.state.authenticated) {
        return <Redirect to={{ pathname: '/test' }} />;
      }

      return (
        <OktaSignInWidget
          baseUrl="https://dev-xxxx.oktapreview.com"
          onSuccess={this.onSuccess}
          onError={this.onError}
        />
      );
    }
  }
);

我正在使用：

"@okta/okta-auth-js": "^2.0.0",
"@okta/okta-react": "^1.0.3",
"@okta/okta-signin-widget": "^2.10.0",
"react-router-dom": "^4.3.1",
"react": "^16.4.2",

当您的应用程序与Okta-React集成时，有人见过这样的东西吗？这是预期的行为吗？我以为Okta只需要做其中一个请求？

Answer 1

@okta/okta-auth-js@2.0.0中有一个bug会导致许多令牌刷新，如果您将这个依赖项升级到2.0.1，它应该会修复这个问题。