如何在 React JS 应用程序中为 Identity Server 4 设置"redirect_uri"并使用路由指向其中一个视图？

Question

我遵循了这个 - http://docs.identityserver.io/en/release/quickstarts/7_javascript_client.html。

使用以下配置，我尝试从我的 ReactJS 应用程序登录身份服务器。 成功登录后加载 http://localhost:3000/callback.html。我在网址中得到了id_token和access_token。但是，我确定这个回调.html不是我在文件夹结构中的"src\callback.html"。即使我删除了"src\callback.html"文件，http://localhost:3000/callback.html#id_token=......。仍处于加载状态。我可以知道如何将redirect_uri更改为 React 应用程序中的视图(例如 Home.js而不是 html 文件(吗？我希望我应该为此使用路线。请指教。

var config = {
authority: "http://localhost:5000",
client_id: "reactSpa",
redirect_uri: "http://localhost:3000/callback.html", // I want it to be something like 'http://localhost:3000/components/home' (a view not an html)
response_type: "id_token token",
scope: "openid profile api1",
post_logout_redirect_uri: "http://localhost:3000/index.html", // same here
};

附注：

我需要将redirect_uri和post_logout_redirect_uri设置为我的 React 应用程序(不是 html 文件(中的任何视图，以便我可以在我的回调视图中执行以下操作。

new Oidc.UserManager().signinRedirectCallback().then(function () {
window.location = "index.html"; // should be just 'index'
}).catch(function (e) {
console.error(e);
});

Answer 1

首先，您需要在身份服务器端更改客户端的RedirectUris。我不知道您使用哪种存储，但如果您在内存客户端中使用，这里是官方文档中的示例：

var jsClient = new Client
{
ClientId = "js",
ClientName = "JavaScript Client",
ClientUri = "http://identityserver.io",
AllowedGrantTypes = GrantTypes.Implicit,
AllowAccessTokensViaBrowser = true,
RedirectUris =           { "http://localhost:7017/index.html" },
PostLogoutRedirectUris = { "http://localhost:7017/index.html" },
AllowedCorsOrigins =     { "http://localhost:7017" },
AllowedScopes =
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
IdentityServerConstants.StandardScopes.Email,
"api1", "api2.read_only"
}
};

并且您还需要在客户端配置上适当地更改redirect_uri(它必须与身份服务器相同(。

Answer 2

以下注释是答案：

您是否尝试将身份服务器配置上的redirect_uri更改为 http://localhost:7017/callback 并使用路由配置(如(创建一个回调组件？ – adem caglin//

在我添加路由后它起作用了。