如何在Identity Server 4中自定义错误跳转路径适配React应用？

好消息！IdentityServer4早就实现了自定义错误路径的功能，不用再纠结2016年的那个回复啦。下面是具体的实现步骤：

在你的IdentityServer项目配置代码里（.NET 6+是Program.cs，老版本是Startup.cs的ConfigureServices方法），找到AddIdentityServer的配置块，通过AddUserInteraction扩展方法指定自定义的错误URL：

builder.Services.AddIdentityServer()
    // 保留你原有的其他配置（比如AddInMemoryClients、AddAspNetIdentity等）
    .AddUserInteraction(options =>
    {
        // 替换成你的React应用对应的错误路由，比如"/error"
        options.ErrorUrl = "/error";
        // 如果你需要，还可以同时自定义登录、登出等路径
        // options.LoginUrl = "/login";
        // options.LogoutUrl = "/logout";
    });

当IdentityServer触发错误跳转时，会自动带上errorId查询参数，最终重定向地址会是/error?errorId=<你的错误ID>，完美匹配React的路由规则。

接下来在React应用里创建对应的错误页面组件，并配置路由（以React Router为例）：

import { Routes, Route, useSearchParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function ErrorPage() {
  const [searchParams] = useSearchParams();
  const errorId = searchParams.get('errorId');
  const [errorDetails, setErrorDetails] = useState(null);

  useEffect(() => {
    if (errorId) {
      // 调用IdentityServer的内置错误端点，获取详细错误信息
      fetch(`/connect/error?errorId=${errorId}`)
        .then(res => res.json())
        .then(data => setErrorDetails(data))
        .catch(err => console.error('获取错误详情失败:', err));
    }
  }, [errorId]);

  return (
    <div className="error-page">
      <h1>抱歉，出现了错误</h1>
      {errorDetails ? (
        <p>{errorDetails.errorDescription || errorDetails.error}</p>
      ) : (
        <p>加载错误信息中...</p>
      )}
    </div>
  );
}

// 在路由配置中添加错误路由
<Routes>
  {/* 保留你原有的其他路由 */}
  <Route path="/error" element={<ErrorPage />} />
</Routes>

• 跨域处理：如果React应用和IdentityServer部署在不同域名下，需要在IdentityServer的CORS配置中允许React域名访问/connect/error端点。
• 版本兼容性：这个配置在IdentityServer4 v2及以上版本就已支持，如果你使用的是更老的版本，建议升级到稳定版。
• 权限说明：/connect/error端点默认无需认证即可访问，若有特殊权限需求，可调整IdentityServer的端点权限配置。

内容的提问来源于stack exchange，提问作者Tom Troughton