Question

我在react-redux应用程序中将redux-oidc用作身份验证的一部分。我已经使用react 16.4.x将其用于其他几个应用程序。我已经将此应用程序更新为使用16.8.x。除此之外，我的策略是相同的。当我在本地运行该应用程序时，该应用程序按预期工作，但是当它在构建过程中运行并部署到docker时，该应用程序卡在回调屏幕上，而没有错误消息或反馈。我不知道发生了什么事。我尝试将userManager登录到控制台，但也没有任何提示。

如果我查看本地/会话存储，可以看到该过程已通过将信息放入本地存储而开始，但是该过程从未完成，并将用户信息存储在会话存储中。

从我的阅读中，我了解到最常见的错误是oidc客户端中声明的回调URL与应用程序之间的不匹配，但看起来都匹配。

PACKAGE.JSON

{
  "name": "woodburnhb357",
  "version": "1.0.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "history": "^4.9.0",
    "http-proxy-middleware": "^0.19.1",
    "oidc-client": "^1.8.2",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-csv": "^1.1.1",
    "react-dom": "^16.8.6",
    "react-openidconnect": "^1.1.0",
    "react-redux": "^5.1.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-table": "^6.10.0",
    "redux": "^4.0.4",
    "redux-form": "^7.4.2",
    "redux-form-validators": "^2.7.5",
    "redux-oidc": "^3.1.2",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "test-start": " start build/App.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

用户管理器

import { createUserManager } from 'redux-oidc';

let host = window.location.host;
console.log(host);
let userManagerConfig = {};

//local environment
if (host === "localhost:3000" || host === "localhost:8080") {

    userManagerConfig = {
        authority: "https://login.dts.utah.gov:443/sso/oauth2",
        client_id: "driving-allergy-614782",
        redirect_uri: "http://" + host + "/callback",
        response_type: "token id_token",
        scope: "openid email",
        post_logout_redirect_uri: "http://" + host + "/",
        loadUserInfo: true,
        filterProtocolClaims: true
    };

} else if (host === "hb357-at.deq.utah.gov") {
    userManagerConfig = {
        authority: "https://login.dts.utah.gov:443/sso/oauth2",
        client_id: "driving-allergy-614782",
        redirect_uri: "https://" + host + "/callback",
        response_type: "token id_token",
        scope: "openid email",
        post_logout_redirect_uri: "https://" + host + "/",
        loadUserInfo: true,
        filterProtocolClaims: true
    };
} else {
    //production
    userManagerConfig = {
        authority: "https://login.dts.utah.gov:443/sso/oauth2",
        client_id: "misdrive-hydatopneumatolytic-076996",
        redirect_uri: "https://" + host + "/callback",
        response_type: "token id_token",
        scope: "openid email",
        post_logout_redirect_uri: "https://" + host + "/",
        loadUserInfo: true,
        filterProtocolClaims: true
    }
}

const userManager = createUserManager(userManagerConfig);
console.log("UserManager: ", userManager);
export default userManager;

回呼组件

import spinner from "../images/loading_spinner.gif";
import setJWTToken from './setJWTToken';

class LoginCallback extends React.Component {

    successCallback = () => {
        if (sessionStorage.length > 0) {
            let token = JSON.parse(sessionStorage.getItem("oidc.user:" + userManager._settings._authority + ":" + userManager._settings._client_id)).access_token;
            console.log("SuccessCallback: ", token);
            setJWTToken(token);
            history.push("/searchhb357");
        } else {
            history.push("/searchhb357");
        }
    };

    render() {
        return (
            <CallbackComponent
                userManager={userManager}
                successCallback={this.successCallback}
                errorCallback={error => {
                    console.error("ERROR: ", error);
                    history.push("/");
                }}
            >
                <div><img src={spinner} className="spinner" id="spinner" alt="spinner" /></div>
            </CallbackComponent>
        );
    }
}

export default connect()(LoginCallback);

回叫页面

Answer 1

在此上花费了8个小时后，我发现在反应16.8中，服务工作人员未注册。在index.js文件中，我将serviceworker.unregister()更改为serviceworker.register()。这解决了Chrome和Edge中的问题。我在FF中仍然遇到相同的问题。

redux-oidc回调在react-redux构建的应用程序中失败

1 个答案: