.net 如何修复IdentityServer的路由

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

我正在使用 “反应路由器dom”：“^4.3.1”， “redux oidc”：“^3.1.4”， “oidc客户端”：“^1.8.2”

项目后端是使用.NET设置的。我已经用这个例子开始了我的实现，并使用first来实现它，这样后端和API就可以工作了

我的问题和你的差不多，但我不知道如何解决它

我试着用我找到的不同链接来解决这个问题，但它们都回到了同一个问题上。我想这是因为前面提到的路线

前端：

应用程序和索引：

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

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

登录页面：

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;

后端：

 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"
                    }

预期被重定向到Callback页面，但从未到达该页面

登录按钮后的我的URI示例：

---

刚刚将我的登录页路线移动到callback下方，它就可以工作了

刚刚将我的登录页路线移到callback下面，它就可以工作了

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"
                    }