如何修复 IdentityServer ReactJS 的路由

Question

我正在为我目前正在进行的项目设置身份验证。我需要能够按下按钮登录到我的服务器，然后被重定向到 IdentityServer4 并再次返回到我的应用程序。

我正在使用 "react-router-dom": "^4.3.1", "redux-oidc": "^3.1.4", "oidc-client": "^1.8.2",

并且项目后端是使用 .NET 设置的。我采用https://github.com/maxmantz/redux-oidc-example 示例开始我的实现，并首先使用http://docs.identityserver.io/en/aspnetcore1/quickstarts/7_javascript_client.html 来实现它，以便后端和API 工作。

我的问题与https://github.com/maxmantz/redux-oidc/issues/96 几乎相同，但我不明白如何解决它。

我已经尝试使用找到的不同链接来解决它，但它们都继续回到同一个问题。我认为那是因为前面提到的路由。

前端：

应用和索引：

const App = () => (
  <BrowserRouter>
    <Routes />
  </BrowserRouter>
);

ReactDOM.render(
  <Provider store={store}>
    <OidcProvider store={store} userManager={userManager}>
       <App />
    </OidcProvider>
  </Provider>,
  document.getElementById('root')
);

路由器：

const Routes = props => {
  return (
    <div className="App">
      {console.log('Routes props, ',  props)}
      <Route path="/" component={Header} />
      <Switch>
        <Route path="/home" component={HomePage} />
        <Route path="/" component={LandingPage} />
        {/* I THINK MY ERROR LIES HERE, I COULD USE WHAT EVER PATH WITHOUT IT MEANING ANYTHING*/ }
        <Route path="/callback" component={CallbackPage} />
      </Switch>
    </div>
  );
};

function mapStateToProps(state) {
  return {
    user: state.oidc.user,
    isLoadingUser: state.oidc.isLoadingUser
  };
}

function mapDispatchToProps(dispatch) {
  return {
    dispatch
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Routes);

authConst：

import { createUserManager } from 'redux-oidc';

const userManagerConfig= {
  authority: 'http://localhost:5000',
  client_id: 'js',
  redirect_uri: 'http://localhost:3000/callback',
  response_type: 'code',
  scope: 'openid profile api1',
  post_logout_redirect_uri: 'http://localhost:3000'
};

const userManager = createUserManager(userManagerConfig);
export default userManager;

登录页面：

import React from 'react';
import userManager from '../../setup/authConst';


class LoginPage extends React.Component {
  onLoginButtonClick = () => {
    userManager.signinRedirect();
};

  render() {
    return (
      <div style={styles.root}>
        <h3>Welcome to the redux-oidc sample app!</h3>
        <p>Please log in to continue</p>
        <button onClick={this.onLoginButtonClick}>Redirect Login</button>
      </div>
    );
  }
}
export default LoginPage;

登陆页面：

import { connect } from 'react-redux';
import LoginPage from './LoginPage';
import { Redirect } from 'react-router-dom';

function LandingPage(props) {
  const { user } = props;
  return !user || user.expired ? (
    <LoginPage />
  ) : (
    <HomePage />
  );
}

function mapStateToProps(state) {
  return {
    user: state.oidc.user
  };
}

function mapDispatchToProps(dispatch) {
  return {
    dispatch
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LandingPage);

回调：从未接触过。不会打印控制台日志

import React from 'react';
import { connect } from 'react-redux';
import { CallbackComponent } from 'redux-oidc';
import { push } from 'react-router-redux';

class CallbackPage extends React.Component {
  successCallback = user => {
    this.props.dispatch(push('/'));
  };
  errorCallback = error => {
    console.error(
      'There was an error handling the token callback: ' + error.message
    );
  };

  render() {
    // just redirect to '/' in both cases
    return (
      <>
        <CallbackComponent successCallback={this.successCallback}>
          <div>Redirecting...</div>
        </CallbackComponent>
      </>
    );
  }
}

export default connect()(CallbackPage);

商店：

import thunkMiddleware from 'redux-thunk';
//import loggerMiddleware from 'redux-logger';
import rootReducer from '../reducers/rootReducer';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { loadUser } from "redux-oidc";
import userManager from './authConst'

function configureStore(preloadedState) {
  const middlewares = [thunkMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);
  const enhancers = [middlewareEnhancer];
  const composedEnhancers = composeWithDevTools(...enhancers);

  /*if (process.env.NODE_ENV !== 'production' && module.hot) {
        module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
    }*/


  return createStore(rootReducer, preloadedState, composedEnhancers);
}

const store = configureStore(); 

loadUser(store, userManager)
  .then((user) => {
    console.log('USER_FOUND', user);
    if (user) {
      store.dispatch({
        type: 'redux-oidc/USER_FOUND',
        payload: user,
      });
    }
  }).catch((err) => {
    console.log(err);
  });

export default store; 

后端：

 new Client
                {
                    ClientId = "js",
                    ClientName = "JavaScript Client",
                    AllowedGrantTypes = GrantTypes.Code,

                    RedirectUris =     { "http://localhost:3000/callback" },
                    PostLogoutRedirectUris = { "http://localhost:3000" },
                    AllowedCorsOrigins =     { "http://localhost:3000" },

                    AllowedScopes =
                    {
                        IdentityServerConstants.StandardScopes.OpenId,
                        IdentityServerConstants.StandardScopes.Profile,
                        "api1"
                    }

预计会被重定向到 CallbackPage，但从未到达那里。

登录按钮后我的 URI 示例： http://localhost:3000/call?code=415d7281052e165e5636cbc421b058a963c886ae73c6a8fe52ce65e1e384960e&scope=openid%20profile%20api1&state=c903848b038e4f0a83a1cb402804d868&session_state=wjishlP7ceWS0jpgWoHU9dkTKnef_BB1iSQFIh6QcJY.97b10e0098da117feb2a7a043fda362b

Answer 1

刚刚将我的登陆页面的路线移到回调下方，它可以工作。