并非每个内部应用程序都是纯粹的内部应用程序;有时,多个组织和团队需要有一种方法来自动化他们的操作。例如,您可能希望与财务顾问和其他财务团队共享您的费用管理器应用程序。由于存在多个连接,因此具有强大的用户身份验证对于此类内部应用程序至关重要。但是,向 Web 应用程序添加身份验证层并不是一项直接的任务。传统方法是进行基于表单的电子邮件密码身份验证,然后使用身份验证令牌通过后端验证它们并将它们重定向到应用程序。有时用户和开发人员更喜欢使用社交身份验证的更快方式。此身份验证允许用户使用他们已设置的凭据从他们选择的社交网站登录到您的应用程序。

今天,我将向您展示如何在不编写任何代码的情况下将 Google 社交身份验证添加到 Appsmith 应用程序。为此,我们将使用 Xano 作为后端。

在开始之前,让我简要介绍一下 Appsmith 和 Xano,以防您是新手。

Appsmith是一个低代码开源框架,用于构建内部应用程序、仪表板、crud 应用程序等。使用 Appsmith,可以在几分钟内创建一个功能齐全的自定义前端。使用 Appsmith 连接数据源需要几分钟,您可以在您选择的数据库之上快速构建工具。

Xano是少数提供全面数据库测试环境的无代码后端平台之一,可让您轻松在生产数据和测试数据之间切换。 Xano 还提供 API 请求历史记录和简单的方法来监控 CPU 使用情况和数据库记录使用情况。

好吧,现在让我们开始吧。

入门:在 Xano 和 Appsmith 上创建帐户

第一步是在 Xano 和 Appsmith 上创建帐户。在本教程中,我将在 Appsmith 和 Xano 上使用云版本。

注意:由于 Appsmith 是开源的,您始终可以在本地使用它或使用 Docker 在您自己的服务器上自行托管它。

• 导航到appsmith.com如果您是新用户,请注册一个新帐户或登录现有帐户。

• 导航到xano.com并在另一个选项卡上注册一个免费帐户。确保在入职过程中在身份验证类型中选择 Google 身份验证。

创建 Xano 应用程序后,导航到仪表板中的 API 页面,我们将看到两个 API 组;一个是默认值,另一个是 google-oauth。

• 在我们开始使用它们之前,让我们首先从 Google 获取我们的 OAuth 凭证,为此,您需要打开 Google Console,并创建您的 API 凭证。这是它的样子:

如果您不熟悉在 Google 控制台上创建社交身份验证密钥,您可以按照文档中的这些步骤进行操作,此处为。

• 现在您需要导航到 Xano 仪表板上的设置选项卡,然后在环境变量上点击管理。在此之下,我们将看到 google_oauth_client_id google_oauth_secret 变量。在这里,从 Google 控制台复制凭据。

在 Appsmith 上构建 UI

Appsmith 带有大量预构建的 UI 组件:小部件。这些可以完全自定义,以帮助您构建美观的应用程序。对于这个应用程序,我将保持 UI 简洁明了,但是,您始终可以根据您的用例向您的应用程序添加更多内容。

现在按照以下步骤操作:

• 在 Appsmith 上创建一个新应用程序,然后选择“使用拖放从头开始构建”。

• 将页面名称从Page1 重命名为通过单击现有页面进行登录。

• 从 bad 一侧单击小部件旁边的 + 图标,然后将容器小部件拖放到画布上。

• 现在,在容器内添加一个按钮小部件和一个文本小部件,以创建一个身份验证表单。

• 单击文本小部件并将 Text 属性设置为Log in,同样将按钮标签设置为Continue with Google。

这是在 Appsmith 上构建的表单的屏幕截图:

初始化认证流程

要初始化身份验证过程,我们需要从 Xano 在 Appsmith 上配置 API,按照以下步骤操作:

• 打开 Xano 仪表板,并导航到设置选项卡;现在单击 google-oauth API 组。

• 我们应该看到我们可以使用的所有 API 来完成我们的身份验证,是的,所有这些都是自动生成的,无需编写任何代码,这要感谢 Xano。

• 现在,选择 oauth/google/init API 并复制端点。

• 在 Appsmith 上,单击 Datasources 旁边的 + 图标并创建一个新的 API。

• 将 API 端点重命名为 init,并粘贴复制的 URL。

• 这个端点需要一个redirect_uri,如果身份验证成功,这基本上会重定向到另一个页面。因此,我们需要在 Appsmith 上创建一个新页面,并将其 URL 复制到 init API 上的 redirect_uri 参数。

• 现在在 Appsmith 上创建一个页面,方法是单击侧边栏上页面旁边的 + 图标。将页面重命名为 welcome。

• 复制其 URL,导航回登录并将 URL 粘贴到 redirect_uri 参数中,API 应如下所示:

• 我们需要在 google 控制台上添加 Redirect URL,以便在重定向成功后从 Google Auth 进行重定向。

最后一件事,我们需要将按钮 onClick 操作设置为 JS 并复制以下内容:

{{init.run(() u003d> navigateTo(init.data.authUrl, {},'SAME_WINDOW'), () u003d> {})}}

此代码片段将导航到从 init API 调用请求的redirectURI,这显然是到欢迎页面。

注意:我们在本节中使用的来自 Xano 的身份验证端点负责将用户发送到 Google 网页进行身份验证。完成后,用户将被重定向到发起此请求的位置,然后根据您的要求,用户将进入登录、注册或继续路径。

接下来,我们需要配置continue流程以从用户那里获取详细信息并管理用户是首次用户还是现有用户。

配置continue认证流程

要配置continue工作流程,请导航到 Appsmith 上的欢迎页面;这是初始化完成后用户登陆的地方。首先,让我们设计 UI。

• 将容器小部件拖放到画布上,就像我们为登录页面所做的那样。

• 为外观添加图像、文本小部件和按钮小部件,这是我的设计方式,您可以添加自己选择的图像和颜色:

接下来,通过单击数据源部分旁边的 + 图标创建一个新 API,然后按照以下步骤操作:

• 将 URL 重命名为 oauth_continue

• 从 Xano 复制 /oauth/google/continue 端点并将其粘贴到请求 URL 中。

• 这个端点需要两个参数:

• 代码:将从 URL queryParams 中查询。 (从google重定向完成后从上一个登录页面访问)

• redirect_uri:与页面 URL 相同

现在让我们通过单击登录页面中的登录按钮来测试它,我们应该可以成功地看到 continue API 上的响应。

这是GIF:

太棒了,我们现在能够成功完成身份验证过程,现在让我们使用 JavaScript 将数据绑定到 UI 上。

为此,将文本小部件上的文本属性设置为:

Welcome {{oauth_continue.data.name}}

这将在用户登录时显示来自 Google 帐户的用户名。

使用 Xano Auth 保护 Appsmith 上的页面

要使用身份验证在 Appsmith 上创建安全页面,请单击页面旁边的 + 图标添加一个新页面。接下来,将 TAB 小部件拖放到画布上。

现在,打开选项卡小部件的属性窗格并将选项卡名称重命名为logedin和notlogedin;在 Default Tab 属性下,粘贴以下代码段:

{{appsmith.store?.user?.token? 'logedin':'notlogedin'}}

此代码段将在用户登录时显示logedin选项卡,在没有用户时显示notloggedin选项卡。以下是它的工作原理:

这就是我们如何在内部应用程序上实现社交认证!要查看有关其他社交提供者的更多详细信息,请在此处关注 Xano 文档。

---

如果您有兴趣使用我们网站上未列出的数据库作为集成,请通过在Github上提出 PR 告诉我们,我们将尽最大努力尽早将其包含在内。

在Discord上加入我们不断发展的社区,并在Youtube和Twitter上关注我们以保持最新状态。