带有 OpenID Connect 的 Angular i18n答案

【问题标题】：Angular i18n with OpenID Connect带有 OpenID Connect 的 Angular i18n
【发布时间】：2020-07-31 19:45:31
【问题描述】：

我们有一个需要身份验证的 Angular 应用程序。这是使用 OpenID Connect 和 IdentityServer4 身份验证服务器完成的。

现在我们要添加其他语言。要使用的语言存储在我们可以从我们的身份验证服务器获取的用户配置文件中。

问题：Angular 为每种语言构建了一个应用程序，因此我需要在加载应用程序之前了解该语言，但在应用程序启动期间完成了身份验证，并且我之前不知道用户的语言。

是否有任何通用方法/最佳实践来设置具有多种语言和 Open ID Connect 的 Angular 应用程序？

我知道一种选择是使用 ngx-translate，但它已被弃用，我更愿意继续使用 Angular 工具。我还看到，当前的 Angular 版本支持运行时翻译，但它似乎仍是 beta 版本，尚未正式发布。出于性能原因，我更喜欢“编译时本地化”方法 - 但我根本找不到任何方法来完成这项工作......

设置详情：

Angular 10 支持 nginx kubernetes 入口
以 IdentityServer4 作为 oidc 服务器的 Asp.NET 核心应用程序

【问题讨论】：

您可以创建一个微应用程序，该应用程序将授权然后重定向到所需应用程序的 url。此外，您可以直接从您的应用重定向到相应的 URL。附：我发现 angular i18n 工具不足，因为它们的“静态”策略和无法在 .ts 文件中进行翻译，所以我更喜欢使用 ngx-translate
@Sergey - 感谢您的评论。 ngx-translate 的问题在于它已被某种弃用（github.com/ngx-translate/core/issues/783）。角度工具现在支持 .ts 文件中的翻译 - 剩下的唯一问题是它需要在引导之前使用当前语言环境，也就是说，在可以创建 OIDC 身份验证客户端并获取用户声明之前。
我看过这个话题。但尽管如此，它仍然会收到更新。此外，感谢 Angular 团队，没有太多可破坏的更改，所以我相信它在未来的许多版本中都可以使用。更重要的是 - 它是开源的，因此您可以制作此软件包的副本并继续进行小的更新以使其适合自己

标签： angular identityserver4 angular-i18n

【解决方案1】：

请查看 Github 上的 ASP.NET Core 3.1 IdentityServer4 Identity Bootstrap 4 template 本地化项目，它支持本地化。

【讨论】：

谢谢托雷。 Angular 的棘手之处在于，有多个（每种文化一个）静态 Web 应用程序，我必须以某种方式决定在 OpenID Connect 隐式身份验证流程期间加载哪一个。你有什么提示吗，这个示例的哪一部分可以在这里提供帮助？
并非如此，我认为这完全取决于您的项目和需求。您可以在身份/访问令牌中添加国家/地区声明，并尝试控制语言以及根据该内容加载哪些页面。
您对我的回答满意还是缺少什么？如果没有，请将我的回答标记为已接受。
再次感谢我们的回答，但请注意，这个问题的重点是“如果语言来自 OIDC 服务器，如何引导 Angular”。这就是为什么我无法将其标记为已接受。

【解决方案2】：

此时不要担心身份验证/OpenID Connect 的详细信息。确定要向刚刚访问过您应用的用户显示的内容。

如果用户通过特定于区域设置的 URL 访问您的应用，您可能希望使用指定的区域设置来呈现您的应用。这是一个小例子。
如果用户未指定任何语言环境，您有多种选择：

2.1。使用默认语言环境呈现您的应用。

2.2。询问用户首选的语言环境。

2.3。尝试确定用户的语言环境，可能根据浏览器的 navigator.language 或用户的源 IP。

在你的应用中实现上述逻辑后，你就可以在你的应用中添加OpenID Connect了。

假设您正在使用 .NET Core 保护您的整个应用程序，包括 Angular，当用户访问您的应用程序时，该用户将被转发到 OpenID 提供程序进行身份验证，然后重定向回您的应用程序。然后，您的应用将根据您在上述第 1 步和第 2 步中设计的策略确定用户的区域设置。

【讨论】：

感谢您的意见！很抱歉不清楚细节。该应用程序将只有一个 URL。用户的文化存储在用户配置文件（.Net 核心/身份服务器）中。 Angular 应用程序是一个静态网站（只是 nginx，这里没有 asp.net）。我的大问题：在启动 Angular 应用程序之前我需要文化（选择正确的本地化构建），因此我无法在 Angular 启动期间获取用户配置文件（我们已经在运行本地化应用程序）。我认为这是一个很常见的设置，所以我想知道是否有任何“标准”方法/推荐设置？
因此您需要确定在用户通过身份验证之前应该向用户显示的内容。
您有两种选择： 1. 强制所有匿名用户进行身份验证。因此，您将了解每个访问者的语言环境并避免该问题。 2. 为了处理未登录的用户，您可以使用cookie 来存储/检索用户最后选择的语言环境。对于没有获得该区域设置 cookie 的首次访问者，1) 询问用户；或 2) 显示默认语言环境；或 3) 通过浏览器 navigator.language 或源 IP 猜测用户的首选语言环境。并将用户上次选择的语言环境保存到 cookie 中以供下次访问。
谢谢比尔。我想强制所有用户进行身份验证，但我现在仍然看到无需加载应用程序三次即可获得用户文化的方法：1. 加载应用程序 => 无身份验证 => 重定向到 oidc 服务器 => 登录 => 重定向回来to app => 2. load app => load user profile an getculture => set cookie（这样我就可以在 nginx 中访问它并提供正确的 angular build）=> 3. 重新加载 app，这次使用来自 profile/cookie 的文化。我看不到阻止第三次重新加载的方法...
我明白了！我认为我们可以同意这个问题是可以解决的，但它可能需要性能优化。 carrying out the authentication in a popup / iframe 可以消除 1 和 2 之间的重新加载。 2 和 3 之间的重新加载似乎是 way more difficult to avoid，恐怕我没有专业知识来提供有关该领域的建议。

【解决方案3】：

除了为每个区域设置不同的构建之外，您是否可以使用一个构建，并使用 Angular i18n 以不同的语言呈现页面。

页面语言可以按以下顺序选择

使用浏览器/系统默认语言
使用用户的首选语言（登录后可用）
使用默认语言

【讨论】：

感谢@NewtonJoshua，但我担心这并不能解决问题：语言存储在用户配置文件中。为了能够获取用户配置文件，我们需要我们在身份验证后拥有的用户 ID（角度 oauth oidc lib）=如果在角度应用程序启动后我们拥有。即使我们使用 Angular 运行时本地化（不是 ngx-translate），我们也需要在 Angular 应用程序启动之前的语言环境 ID。这个问题不是关于选择正确的语言环境（我们知道它在配置文件中）——而是关于我们在拥有它之前就需要它的问题。
在 app.component 中，获取 navigator.languages 并使用该语言。一旦你得到用户资料，你就可以切换到那个。
这里的问题：我必须重新加载应用程序才能“切换”语言，而这正是我想要避免的。