Инициализация виджета Okta Signin во второй раз в одностраничном веб-приложении вызывает исключение

Мы интегрируем Okta Sign-in Widget в наше веб-приложение на основе React. .

Пример фрагмента:

var oktaSignIn = new OktaSignIn({baseUrl: baseUrl});
oktaSignIn.renderEl(...)

У нас отлично работает при рендеринге виджета в первый раз, но после того, как пользователь входит в систему и снова выходит из системы, веб-приложение визуализирует компонент входа во второй раз и пытается снова выполнить renderEl для рендеринга виджета. Это вызывает следующее исключение:

Backbone.history has already been started

Я создал этот jsfiddle, чтобы продемонстрировать проблему. Он просто дважды создает экземпляр виджета входа (второй раз после ожидания). Вы можете видеть, что второй вызов вызывает исключение.

https://jsfiddle.net/nudwcroo/6/

На данный момент мой обходной путь заключается в перезагрузке всего веб-приложения при переходе к компоненту входа в систему, но это нежелательно для одностраничного приложения.

Это известная проблема? Есть ли способ дважды инициализировать виджет входа в систему за один сеанс javascript?


javascript okta
person Ian Su    schedule 13.01.2016    source источник
comment
Сидишь в той же лодке, что и ты, все еще не закреплённый с Окты ...   -  person Victor Bjelkholm    schedule 10.08.2016

Ответы (2)


arrow_upward
0
arrow_downward

Поскольку виджет может быть создан только один раз на странице, лучше всего скрыть / показать элемент для всех одностраничных приложений.

<div id="okta-login-container"></div>

<script type="text/javascript">
    var oktaSignIn = new OktaSignIn(/* config */);

    oktaSignIn.renderEl(
      { el: '#okta-login-container' },
      function (res) {
        if (res.status === 'SUCCESS') {
            // Hide element 
            $("#okta-login-container").hide();
        }
      }
    );
</script>

Когда вы создаете свою logout() функцию, убедитесь, что show() элемент, а не отрисовываете его снова.

function logout() {
    $('#okta-login-container').show();
    // Do more logic
}
person jmelberg    schedule 02.02.2017

arrow_upward
0
arrow_downward

Для тех, кто столкнулся с подобными проблемами после выполнения примера Okta, представленного здесь: (https://github.com/okta/samples-js-react/blob/master/custom-login/src/Login.jsx)

Проблема заключается в попытке инициализировать виджет несколько раз в одностраничном приложении. Я исправил это, инициализировав виджет только один раз на уровне приложения, а затем отрендерив его и удалив из DOM, когда дочерний компонент монтируется / отключается.

Пример:

//App.js
class App extends Component {
  constructor() {
    super()
    this.signIn = new OktaSignIn({...})
  }

  render() {
    return <SignInPage widget={this.signIn} />
  }
}

--

//SignInPage.js
...
  componentDidMount() {
    let { redirectUri } = this.state
    let { widget } = this.props
    widget.renderEl(
      { el: '#sign-in-widget' },
      (response) => {
        response.session.setCookieAndRedirect(redirectUri)
      },
      (error) => {
        throw error;
      },
    );

  }

  componentWillUnmount() {
      let { widget } = this.props
      widget.remove()
  }

  render() {
    return  <div id="sign-in-widget"/></div>
  }
person slickbrick    schedule 29.01.2019