Okta React为每个请求加载了太多的iframe

Question

我正在尝试在我的应用程序中设置Okta-React。它通过Okta-signin-widget成功验证。但是，在每次加载页面时，它会向/authorize：调用至少4个HTTP请求

它似乎为每个请求附加一个iframe到DOM。这是我的小部件和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（App）

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/[email protected]中有一个错误导致许多令牌刷新，如果你将这个依赖项升级到2.0.1它应该解决问题。