如何在 React/Redux/OIDC 中正确获取用户信息

Question

对 OIDC 相当陌生 - 我过去曾用它做过一些工作，但无论如何我都不会称自己为专家。

我正在尝试在使用 oidc-client-js 和 redux-oidc 库的反应应用程序中使用 OIDC（以 redux-oidc-example 为例）

我收到此错误：

错误：在存储中找不到匹配的状态 在 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。

Answer 1

试试这个。

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);

Answer 2

用户meneger的范围参数应该是空格分隔的字符串而不是数组。

示例：'openid profile email'