ASP.NET Identity with React 应用程序在 OAuth2 回调时中断
ASP.NET Identity with React app is breaking on OAuth2 callback
我用过ASP.NET Core React project template to create a web application into which I've installed Identity Server 4。 React 应用程序负责所有用户交互，dotnet 应用程序仅用作 API。我使用 Microsoft.AspNetCore.Authentication 提供的 services.AddAuthentication().AddGoogle 构建器扩展集成了 Google OAuth2 身份验证选项。最后，整个事情被容器化并部署到 Azure 上的 Linux 应用服务。
我的大部分代码是从一个非常相似的设置的以前版本移植的，但在那种情况下，我将自定义 React 应用程序添加到现有 ASP.NET 应用程序，而不是从官方 React 项目开始dotnet 的模板。那时候一切都很好。但是在部署到 Azure 时，我的新版本遇到了问题。这是突出显示问题的 Fiddler 跟踪：
vault2 是身份服务的客户端。 identity-azure 是身份服务器应用程序。此跟踪显示的流程如下：
- 用户在 Vault 应用程序上单击“登录”
- 浏览器被重定向到身份应用程序
- 用户点击 Google 按钮启动 OAuth2 流程
- 用户使用 Google 帐户登录
- 用户被重定向到默认回调 URL (
https://identity-azure.<domain>.com/signin-google?state=...)
这最后一步就是问题所在。您会注意到您在 Fiddler 跟踪中没有看到回调 URL，而是看到了一些其他请求（例如 service-worker.js），这些请求显然是由 React 应用发出的。所以 signin-google 路径由浏览器缓存的 React 应用程序处理，而不是服务器处理。 React 应用程序使用 react-router-redux 来处理客户端的某些路由，当然 signin-google 不是其中之一，因此它似乎返回了一个空组件。
据我所知，我所有的 ASP.NET 路由（使用 Route 属性实现以修饰控制器操作方法）均由服务器一致处理。但是， signin-google 路由是在身份验证中间件中实现的，据我所知，除了更改其路径外，我对它没有太多控制权。我可以做些什么来强制在服务器端处理这个问题吗？
我应该补充一点，这种行为非常不稳定。似乎如果我的 Google 帐户已签署 out 然后观察到上述情况，但如果我的帐户已经签署 in 然后 signin-google returns 预期的 302 状态代码和 OAuth2 流程继续成功。
我终于弄明白是怎么回事了。至少，我认为我有。我不能确定，因为我已经将 React UI 分解成一个完全独立的应用程序，但我在那里观察到类似的模式。我原来的问题中甚至有线索！事实证明，中断页面实际上是由 React 应用程序的 service worker 提供的。我发现这一点是因为即使在将 React 应用程序从其自己的域中分离出来后，将我的 identity-azure 域保留为纯 ASP.NET Web API，对 identity-azure 下某些 URL 的请求仍在运行同样，我最终注意到他们在我浏览器的“网络”选项卡上报告自己正在接受 ServiceWorker 的服务。下面的例子。
我一清除浏览器应用程序缓存（在 Windows 的 Chrome 中，这是 F12 > Application > Clear storage > Clear site data 并选中了 Unregister service workers。
我不是 100% 确定如果我将我的 React 应用程序留在与 ASP.NET 后端相同的解决方案中，解决方案会是什么，但我认为它会涉及 .我希望这对以后的人有所帮助。
顺便说一下，如果您正在考虑为 Identity Server 4 构建一个完全分离的 UI，那么 great starter example here。
我用过ASP.NET Core React project template to create a web application into which I've installed Identity Server 4。 React 应用程序负责所有用户交互，dotnet 应用程序仅用作 API。我使用 Microsoft.AspNetCore.Authentication 提供的 services.AddAuthentication().AddGoogle 构建器扩展集成了 Google OAuth2 身份验证选项。最后，整个事情被容器化并部署到 Azure 上的 Linux 应用服务。
我的大部分代码是从一个非常相似的设置的以前版本移植的，但在那种情况下，我将自定义 React 应用程序添加到现有 ASP.NET 应用程序，而不是从官方 React 项目开始dotnet 的模板。那时候一切都很好。但是在部署到 Azure 时，我的新版本遇到了问题。这是突出显示问题的 Fiddler 跟踪：
vault2 是身份服务的客户端。 identity-azure 是身份服务器应用程序。此跟踪显示的流程如下：
- 用户在 Vault 应用程序上单击“登录”
- 浏览器被重定向到身份应用程序
- 用户点击 Google 按钮启动 OAuth2 流程
- 用户使用 Google 帐户登录
- 用户被重定向到默认回调 URL (
https://identity-azure.<domain>.com/signin-google?state=...)
这最后一步就是问题所在。您会注意到您在 Fiddler 跟踪中没有看到回调 URL，而是看到了一些其他请求（例如 service-worker.js），这些请求显然是由 React 应用发出的。所以 signin-google 路径由浏览器缓存的 React 应用程序处理，而不是服务器处理。 React 应用程序使用 react-router-redux 来处理客户端的某些路由，当然 signin-google 不是其中之一，因此它似乎返回了一个空组件。
据我所知，我所有的 ASP.NET 路由（使用 Route 属性实现以修饰控制器操作方法）均由服务器一致处理。但是， signin-google 路由是在身份验证中间件中实现的，据我所知，除了更改其路径外，我对它没有太多控制权。我可以做些什么来强制在服务器端处理这个问题吗？
我应该补充一点，这种行为非常不稳定。似乎如果我的 Google 帐户已签署 out 然后观察到上述情况，但如果我的帐户已经签署 in 然后 signin-google returns 预期的 302 状态代码和 OAuth2 流程继续成功。
我终于弄明白是怎么回事了。至少，我认为我有。我不能确定，因为我已经将 React UI 分解成一个完全独立的应用程序，但我在那里观察到类似的模式。我原来的问题中甚至有线索！事实证明，中断页面实际上是由 React 应用程序的 service worker 提供的。我发现这一点是因为即使在将 React 应用程序从其自己的域中分离出来后，将我的 identity-azure 域保留为纯 ASP.NET Web API，对 identity-azure 下某些 URL 的请求仍在运行同样，我最终注意到他们在我浏览器的“网络”选项卡上报告自己正在接受 ServiceWorker 的服务。下面的例子。
我一清除浏览器应用程序缓存（在 Windows 的 Chrome 中，这是 F12 > Application > Clear storage > Clear site data 并选中了 Unregister service workers。
我不是 100% 确定如果我将我的 React 应用程序留在与 ASP.NET 后端相同的解决方案中，解决方案会是什么，但我认为它会涉及
顺便说一下，如果您正在考虑为 Identity Server 4 构建一个完全分离的 UI，那么 great starter example here。