Как правильно получить информацию о пользователе в React / Redux / OIDC - PullRequest
Новая
       13

Как правильно получить информацию о пользователе в React / Redux / OIDC

0 голосов
/ 19 мая 2019

Совершенно новичок в OIDC - я немного поработал над этим в прошлом, но я бы не стал называть себя экспертом.

Я пытаюсь использовать OIDC в ​​приложении реакции, используя библиотеки oidc-client-js и redux-oidc (вместе с примером redux-oidc в качестве примера)

Я получаю эту ошибку:

Ошибка: не найдено подходящего состояния в хранилище в eval (oidc-client.min.js: 1011)

Теперь я искал решение этой проблемы, и это самое близкое, что я вижу к своей проблеме, но я все еще не вижу здесь ничего, что бы четко объясняло что-либо:

https://github.com/IdentityModel/oidc-client-js/issues/648

Вот моя функция обратного вызова: 

const successCallback = (user) => {
  this.props.dispatch(push("/settings"))
};


class CallbackPage extends React.Component {
  render() {
    return (
      <CallbackComponent
        userManager={userManager}
        successCallback={successCallback}
        errorCallback={error => {
          //this.props.dispatch(push("/chat"));
          console.error(error);
        }}
        >
        <div>Redirecting TEST...</div>
      </CallbackComponent>
    );
  }
}

export default connect()(CallbackPage);

До комментирования props.dispatch в обратном вызове ошибки это был бесконечный цикл. Теперь он просто зависает на странице обратного вызова с тем, что я вставил в обратный вызов ошибки.

Я не буду помещать свои полные настройки userManager, так как кажется, что это будет чрезмерно, но вот некоторые основные моменты: 

{
    "authority": "https://subdomain.appname.com/auth/realms/appname/",
    "client_id": "appname-app",
    "redirect_uri": "http://localhost:3001/callback",
    "response_type": "code",
    "extraQueryParams": {"kc_idp_hint": "google"},
    "loadUserInfo": true,
    "scope": ["openid", "profile", "email"]
}

Я не уверен, что еще может пригодиться кому-либо, кто устраняет неполадки - я могу предоставить информацию о моем store.js или моем главном приложении index.js, если необходимо.

1 Ответ

0 голосов
/ 19 мая 2019

Попробуй это. 

class CallbackPage extends React.Component {

successCallback = (user) => {
  this.props.dispatch(push("/settings"))
};

  render() {
    return (
      <CallbackComponent
        userManager={userManager}
        successCallback={this.successCallback}
        errorCallback={error => {
          //this.props.dispatch(push("/chat"));
          console.error(error);
        }}
        >
        <div>Redirecting TEST...</div>
      </CallbackComponent>
    );
  }
}

export default connect()(CallbackPage);
...