将 Google SSO 添加到您的 Mendix 使用 OIDC 模块的应用程序 | Mendix

跳到主要内容

将 Google SSO 添加到您的 Mendix 使用 OIDC 模块的应用程序

将 Google SSO 添加到您的 Mendix 使用 OIDC 模块的应用程序

如今,没有哪个终端用户有时间完成冗长的注册流程,我们填写的“确认电子邮件地址”框已经够我们一辈子使用的了。这就是为什么现在几乎每个网站或应用都提供“继续使用 Google”或其他常用平台(如 Facebook 或 Microsoft)的选项。

除了简化应用的用户体验之外,SSO 还有其他优势。多个应用使用同一个密码或账户可以限制系统中的脆弱点数量,提高安全性,同时让注册用户更容易记住自己的凭证。事实证明,人们的密码管理能力很差,而且通常人们会将同一个密码用于多个账户(这是一个非常糟糕的主意)。

因此,在这篇博客中,我将向你展示如何使用 Google SSO 将登录添加到任何 Mendix 使用 OIDC 市场模块(Open ID Connect 单点登录)

我们需要什么?

在我们开始之前,请花点时间检查您是否已准备好所有需要的东西。确保您已创建 Google 云平台帐户。

你还需要在你的 Mendix 应用程序:

  • 社区共享
  • 加密
  • Nanoflow 共享
  • OIDC 模块

入门

点击 Google云端控制台,转到您的项目概览,如下所示。

点击创建一个 新项目,为其命名(可以是任何名称),然后单击 创建

打开您的项目,在仪表板上页面顶部的搜索栏中搜索 OAUTH Consent Screen。

对于用户类型,选择外部(这将允许任何拥有谷歌帐户的用户创建帐户并访问您的应用程序。单击创建继续。在下一页上,使用您自己的信息填写所需的所有详细信息,如下所示。

在下一个屏幕“范围”中,您无需填写任何内容。只需单击屏幕底部的“保存并继续”即可。

在标题为“测试用户”的最后一页上,您可以指定允许在测试期间访问应用程序的用户列表。当您的应用程序仍在开发中时,通常不需要这样做,除非您需要超过 100 个测试用户(因为这是限制)。决定是否需要指定用户,然后单击 保存并继续e 以继续。

现在我们可以导航到凭证页面(在左侧菜单上),然后单击“创建凭证”,从出现的下拉菜单中选择“OAuth ClientID”

在下一页上,选择您的应用程序类型,在本例中,我选择了 Web 应用程序

为您的客户端命名,并添加 2 个“授权重定向 URI”。第一个要添加的是应用程序的云 URL(免费应用程序 URL 或任何云 URL),第二个是您的本地主机。我们添加本地主机选项,以便我们能够在本地进行测试。请记住在任何应用程序重定向 URL 的末尾添加“/oauth/v2/callback”。单击 创建 当你完成了。

全部完成!请确保将您的客户端 ID 和客户端密钥保存在安全的地方以供日后参考。

在 Studio Pro 中

现在为了 Mendix 此构建的部分!为了确保匿名用户可以访问所需的页面,我们需要确保我们的应用程序配置为启用安全性并允许匿名用户访问。为此,我们需要一个访客用户角色,我们可以将其选为匿名用户。

还要确保您的访客用户角色作为匿名模块角色分配给 OIDC 模块,并且管理员需要被分配同一 OIDC 模块的管理员用户角色。

现在我们已经设置了安全性和用户角色,我们还需要允许用户访问登录页面。转到项目导航并为访客添加基于角色的主页。为此,您可以选择 OIDC 模块提供的页面“OIDC.Login_Web_Button”。还为用户提供基于角色的主页。

最后,我们必须允许管理员访问和配置 SSO 客户端凭据。再次重申,ODIC 模块中已经提供了一个名为“OIDC_Client_Overview”的页面。将其添加到您的导航中,并确保您的应用管理员可以访问它。

在本地运行您的应用,并以管理员身份登录。我使用演示切换器小部件轻松登录此处。接下来导航到 OIDC 客户端概览页面。单击新建以创建新配置。

在别名中填写您想要的任意名称,我简单地称之为 Google。

输入您的客户端 ID,并将状态设置为 Active。最重要的是,您需要添加 Google 的自动配置 URL(https://accounts.google.com/.well-known/openid-configuration) 并点击“导入配置”。这将自动填充其余必填字段。此 URL 特定于 Google,其他提供商将有自己的版本,因此请确保您拥有所用提供商的正确导入 URL。

最后一步是选择范围,即客户端提供的有关用户的属性。确保选择 OpenID、电子邮件和个人资料(个人资料是存储大多数用户信息的地方)。

测试登录

当访客用户访问你的网站时,他们将看到以下页面,用户应点击“通过 SSO 登录”

接下来他们将看到此屏幕,提示用户选择他们想要登录的谷歌帐户。

如果配置成功,用户将以经过身份验证的用户身份登录主页。为了确保此设置有效,我在主页上添加了一个数据视图,该视图返回已登录用户的帐户,并使用标签显示 $Account/FullName 属性。

最后一件事

虽然在本博客中我重点介绍了如何使用 Google 作为 SSO 客户端,但请务必记住,此模块可以支持其他平台,例如 Salesforce 和 Microsoft,但此设置适用于任何符合 OIDC 的客户端。最后,此模块也适用于 Native Mobile,因此请尽情尝试并尝试它的新实现!

特别感谢 艾瑞克·蒂尼伯,这个市场模块的创建者,并感谢他对撰写本文提供的帮助!

选择你的语言