ReactJS与IdentityServer4和oidc-client-js错误：“无响应代码”

Question

我正试图让ReactJS通过oidc-client-js库使用IdentityServer4。

问题

我单击登录按钮，然后重定向到IdentityServer4，登录后，我重定向到/login-callback，然后从那里重定向到/，但控制台中有以下错误：

​

​

我不知道我做错了什么，但我试过各种方法，但似乎没有什么效果。

码

所有代码都是开源的和坐在这里的.

App.jsx

// other code ommited, but this is a route
<AuthHandshake path="/login-callback" />

AuthHandshake.jsx

import React from "react";
import { AuthConsumer } from "../AuthProvider/AuthProvider";

function AuthHandshake() {
  return <AuthConsumer>{value => value.loginCallback()}</AuthConsumer>;
}

export default AuthHandshake;

AuthProvider.jsx

import React, { useState } from "react";
import { navigate } from "@reach/router";
import { UserManager, WebStorageStateStore } from "oidc-client";
import AuthContext from "../../contexts/AuthContext";
import { IDENTITY_CONFIG } from "../../utils/authConfig";

IDENTITY_CONFIG.userStore = new WebStorageStateStore({
  store: window.localStorage
});

const userManager = new UserManager(IDENTITY_CONFIG);

const login = () => {
  console.log("Login button click handled.");
  userManager.signinRedirect();
};

const logout = () => {
  userManager.signoutRedirect();
};

export function AuthProvider(props) {
  const [user, setUser] = useState(null);

  const loginCallback = () => {
    userManager.signinRedirectCallback().then(
      user => {
        window.history.replaceState(
          {},
          window.document.title,
          window.location.origin
        );
        setUser(user);
        navigate("/");
      },
      error => {
        console.error(error);
      }
    );
  };

  const providerValue = {
    login: login,
    logout: logout,
    loginCallback: loginCallback,
    isAuthenticated: user
  };

  const Provider = () => {
    if (user) {
      return (
        <AuthContext.Provider value={providerValue}>
          {props.children}
        </AuthContext.Provider>
      );
    } else {
      return <div className="auth-provider">{props.children}</div>;
    }
  };

  return (
    <>
      <AuthContext.Provider value={providerValue}>
        {props.children}
      </AuthContext.Provider>
    </>
  );
}

export const AuthConsumer = AuthContext.Consumer;

在IdentityServer方面，我已经将post注销重定向到相同的东西( /login-callback )

new Client
{
  ClientId = "bejebeje-react-local",
  ClientName = "Bejebeje ReactJS SPA Client",
  AllowedGrantTypes = GrantTypes.Code,
  RequirePkce = true,
  RequireClientSecret = false,
  RequireConsent = false,
  RedirectUris = { "http://localhost:1234/login-callback" },
  PostLogoutRedirectUris = { "http://localhost:1234/logout-callback" },
  AllowedCorsOrigins = { "http://localhost:1234" },
  AllowedScopes = { "openid", "profile", "bejebeje-api-local" },
  AllowOfflineAccess = true,
  RefreshTokenUsage = TokenUsage.ReUse,
}

我哪里出问题了？

Answer 1

试试这个..。https://github.com/JwanKhalaf/Bejebeje.React/blob/bug/fix-no-code-response-on-redirect/src/components/AuthProvider/AuthProvider.jsx#L15

基本上，当您从客户机(OIDC-client.js)发送登录请求时，客户机将在URL中发送唯一标识符(State)和登录请求。客户端将此值保存在您选择的存储选项(本地/会话)中。成功登录后，服务器在响应重定向url中发出令牌，并且它还包括最初在登录请求中发送的唯一标识符客户端。在工具中查看登录请求url和响应url。

当OIDC客户端库接收登录响应。时，它从URL中获取唯一标识符，并与登录请求时保存在本地/会话存储中的值匹配。如果它们不匹配，客户端将不接受服务器发出的令牌。

--这只是一个额外的安全级别，以确保客户机不接受任何随机服务器发出的任何令牌或任何标记为URL.的书签。

希望这能帮上忙！

usermanager.signinRedirect({ state: { bar: 15 } });

Answer 2

我不得不将response_mode: 'query'添加到UserManager中。

var mgr = new Oidc.UserManager({ response_mode: 'query' });
mgr.signinRedirectCallback().then(res => {
    window.location = "/signin-callback";
}).catch(error => {
    window.location = "/";
})