Blazor Wasm Hosted与Blazor服务器页面混合使用

Question

我希望能够在我的应用程序中混合使用Web Assembly（WASM）和Server页面，以最适合应用程序的方式。例如，对于需要高度安全性或保护知识产权的页面，我想使用Server页面；对于其他需要将工作负载卸载到客户端以提高性能或其他原因的页面，我将使用WASM。

我的计划是使用Blazor Web Assembly托管项目，其中WASM页面托管自客户端项目，而Server页面则托管自服务器项目。

然而，实现这一点比我预期的更为复杂，我找不到此场景的详细说明。

我能找到的最接近的文章是一系列像https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/multiple-hosted-webassembly这样的文章，涉及多个Web Assembly项目的托管。但是，这仅适用于单个解决方案内的多个WASM项目。它没有说明如何从Server项目托管Blazor Server页面。

以上Microsoft链接指出：

Optionally, the server project (MultipleBlazorApps.Server) can serve pages or views as a formal Razor Pages or MVC app.

我想修改这个建议，以便我也可以从服务器项目中提供Blazor组件。以下答案描述了我如何使其工作。如果您还尝试过使其工作，请分享任何其他评论/替代方法。

- gwruck

---

“混合”模式很混乱。假设您的IP逻辑是应用程序域内的代码，为什么不在API服务器中运行该代码，并从WASM演示域发出API请求？设计关键在于您如何划分客户端/服务器边界。如果您愿意，我很乐意提供一个示例作为答案，但我不想对已经了解的人讲道理！ - MrC aka Shaun Curtis

@MrC，也就是Shaun Curtis先生，我对你的一些代码库很感兴趣，并且它们帮助我理解了MapWhen的使用。我认为我在这里记录的用例有点不同，因为这是我看到的唯一一个展示服务器项目/主机如何提供Blazor组件页面而不仅仅是MVC/Razor的地方。 - gwruck

@MrC，也就是Shaun Curtis，我同意选择客户端/服务器边界并通过Web Api保护IP的选择。我还有一个动机是，我发现Blazor Server开发速度更快，我想在仍然使用WASM的情况下利用这个选项。我现在正在测试操作。我对这种实现是否有任何限制感兴趣。我肯定会对您的任何想法感兴趣。 - gwruck

@MrC，也就是Shaun Curtis，我现在正在努力理解身份验证。我将锁定服务器页面，以便只能由wasm客户端调用。我计划在WASM组件中使用iframe来呈现服务器页面，但我仍在研究如何将经过身份验证的凭据传递给iframe。我正在使用AzureAD和MSAL。 - gwruck

我正在考虑是否只需传递API接收到的Bearer Token，还是我需要使用另一个令牌。必须承认，我仍然不确定是否可以只使用客户端和服务器项目来实现我想要的所有内容，身份验证可能会在最后打败我。我学习了您的https://github.com/ShaunCurtis/Blazr.Demo存储库，该存储库提供了将功能分解为多个库的策略。我可能最终被迫采用这种方法，但首先要更深入地探索这种相对简单的情况。 - gwruck

Answer 1

更新的答案展示WASM和服务器项目之间的完全混合 - 包括AzureAD身份验证 在与@MrC aka Shaun Curtis的讨论中，我承诺将AzureAD身份验证添加到解决方案中，结果发现它比我预期的要复杂得多。

我为该解决方案准备了一个Github存储库：https://github.com/gwruck/Blazor_WASM_Server

需要做很多工作，特别是对于身份验证，但最终与Visual Studio的Blazor WASM托管解决方案的基本模板相比，变化并不太大。

以下是解决方案的屏幕截图，我鼓励您查看。

原始答案显示如何在服务器项目上托管Blazor页面的详细说明

1. 创建新的Blazor Web Assembly Solution（WASM）。选择托管选项。您应该在解决方案中有三个项目（Client、Server和Shared）

2. 创建一个新的Blazor Server项目。我们将使用此作为虚拟模板，以便更容易地在WASM项目中实现服务器页面。将突出显示的文件夹/文件复制到WASM.Server项目中。

在服务器项目中

1. 更新所有导入文件中的命名空间/引用等。我还执行以下重命名以避免与WASM项目发生冲突：
   • wwwroot/css文件夹 --> wwwroot/svr-css
   • wwwroot/favicon.ico --> wwwroot/svr-favicon.ico
   • App.razor --> ServerApp.razor（然后在_Layout.cshtml中更新对此文件的引用）
2. 将@page路径（包括_Host）更改为具有前缀，例如@page“/counter”--> @page“svr / counter”

3. 更新ServerApp.razor文件

4. 更新_Layout文件以引用新的svr-css文件夹位置

5. 按照以下方式更新Program.cs（注意：我无法使代码格式化工作，因此如果您需要此代码的文本，请转到本答案末尾的Github链接）

以下是Server项目的最终结构。

然后导航到应用程序url [https://localhost:7073/]，您应该会看到WASM主页：

然后，如果您导航到/srv url [https://localhost:7073/srv]，您应该会看到我们用于创建此示例的虚拟Blazor Server应用程序的Blazor Server主页。

以下是Github存储库的链接。https://github.com/gwruck/BlazorWasmMixedwithServerPages

对于生产应用程序，您还需要实现许多其他内容，包括身份验证以及如何使用户在WASM和Server页面之间导航时获得无缝体验。 还需要考虑Server项目中的其他路径（例如/api等）的MapWhen部分，以确保为这些路径实现正确的行为。

对于导航，我的计划是在WASM应用程序中使用iframe调用和显示Server应用程序页面，以便从用户的角度来看，这是一个应用程序，具有一致的布局等。

为了进行身份验证，我使用Azure AD。考虑到我还要使用服务器项目来托管Web Api，这可能会有一些挑战。如果确实存在困难，我将添加另一篇文章。

- gwruck