用Auth0动作定制用户注册体验

625 阅读11分钟

你知道你可以定制Auth0提供的一些功能吗?你可以用Actions来做。你在寻找一个例子吗?让我向你展示如何在用户注册一个应用程序时定制他们的体验。

Auth0和用户注册

使用Auth0来保护你的应用程序,从用户最初的视觉印象开始就提供了很多简化:登录页面。Auth0通用登录页面不仅减轻了你验证用户的负担,而且还减轻了管理用户自我注册的任务。事实上,在默认配置中,如果用户没有账户来访问你的应用程序,他们有机会通过下图中强调的注册链接进行自我注册。

Auth0 Universal Login page with user registration

按照该链接,用户可以提供一个电子邮件地址和密码,以在短时间内开始注册和认证过程。

所有这一切都发生在你身边,没有任何干预。它是全包的!

定制用户的注册体验

这很好,但也许你想知道如何定制用户的注册体验,例如,通过发送一个自定义的欢迎邮件。比如你想感谢用户的注册,并让他们了解使用该应用程序的条款和条件。这就是你在这篇文章中要学习的内容!

你将了解到,你可以扩展Auth0的标准流程,并根据你的需要对其进行定制。特别是,你将使用Auth0 Actions在用户注册你的应用程序后发送你的欢迎邮件信息。

让我们开始吧!

示例应用程序

为此,你将使用一个样本应用程序,让你亲身体验建议的解决方案。

你在本文中要使用的示例应用程序是用C#构建的,需要在你的机器上安装.NET。然而,你要实现的用户注册定制与你的应用程序的具体编程语言和框架无关。

要获得该示例应用程序,请用以下命令从GitHub上克隆它。

git clone https://github.com/auth0-blog/acme-aspnet-mvc.git

下载该应用程序后,按照README文件中的说明进行配置,以便使用Auth0。当然,你需要一个Auth0账户。如果你没有,你可以免费得到一个

如果你想了解更多关于样本应用程序是如何建立的,你可以查看这篇博文

配置完样本应用程序后,你可以用以下命令运行它。

dotnet run

将你的浏览器指向https://localhost:7095/地址,你应该得到以下页面。

Sample app home page

什么是Auth0行动?

如前所述,你将使用Auth0 Actions来定制用户的注册过程。

Auth0 Actions是在Node.js环境中运行的JavaScript函数,当一些内部Auth0流程中发生特定事件时执行。

例如,你可以在用户认证或更改密码时运行一个或多个Auth0 Actions。你可以在用户注册之前或之后,或者当你向你的供应商发送短信进行多因素认证时运行它们。你可以把Actions看作是当特定的Auth0事件发生时运行的事件处理程序。例如,在我们的具体案例中,你想处理用户在Auth0注册后立即发生的事件。当这个事件发生时,你想运行你的代码来发送一个定制的欢迎邮件。你可以想象这个事件的处理,如下图所示。

Post user registration Auth0 Action

为了实现这一行为,你要使用Auth0 Dashboard,它为你提供了一个编辑器、一个测试环境、一个集成部署环境和一个版本工具。

你可以查看这些博客文章,以快速了解Auth0行为,以及它们与已被废弃的规则和钩子的比较

实施电子邮件发送者动作

让我们开始实施我们的定制。进入你的Auth0仪表板,在左侧菜单的Actions项目下选择Library。你将进入一个页面,在那里你的所有行动都在那里。如果你从来没有创建过任何行动,该页面将出现在这个图片中。

Auth0 Actions Library page

你可以创建你自己的Action或从Auth0市场安装第三方Action。在第一种情况下,你将开始点击建立自定义按钮,所产生的Action将被列在自定义标签中。在第二种情况下,你将开始点击*+添加动作按钮,选择一个随时可用的动作,新的动作将被列在已安装*标签中。

创建一个新的Action

对于当前项目,你将建立一个自定义的Action。所以,点击Build Custom按钮并填写弹出的表格。你应该为Action提供一个友好的名字,并选择将运行它的触发器,即你要用这个Action处理的事件。对于我们的项目,你应该选择发布用户注册触发器,如下图所示。

Create custom Action dialog

一旦你点击了创建按钮,你就进入了动作编辑器,在那里你可以找到以下代码。

exports.onExecutePostUserRegistration = async (event) => {
};

这是一个JavaScript函数,在用户注册后将被执行。这个函数将被导出到运行在Auth0端的Node.js环境中。

正如你所看到的,该函数有一个event 参数,它提供了关于当前运行环境的一些信息。例如,它允许你访问当前用户的数据、当前请求、租户等。关于用户注册后事件对象的更多细节,请查看文档

要直接进入解决方案,请在动作编辑器中用以下代码替换当前代码。

const axios = require("axios");

exports.onExecutePostUserRegistration = async (event) => {
  try {
    axios.post('https://api.sendgrid.com/v3/mail/send',
      {
        personalizations: [{
          to: [{ email: event.user.email }]
        }],
        from: { email: 'no-reply@acme-demo-corporation.com' },
        subject: 'Welcome to ACME Corporation website',
        content: [{
          type: 'text/html',
          value: `Hello ${event.user.name},<br>
          Welcome to our website!<br>
          As an ACME user, you can take advantage of our catalog and services.
          Please, take a look at our <a href="https://acme-demo-corporation.com/terms-and-conditions">terms and conditions</a>.<br>
          <br>          
          Kind regards,<br>
          ACME Corporation<br>`
        }]
      },
      {
        headers: {
          'Authorization': 'Bearer ' + event.secrets.SENDGRID_API_KEY
        }
      }
    );
  } catch (err) {
    console.log(`Error sending email to ${event.user.email}:`, err.message)
  }
};

这段代码使用Axios作为HTTP客户端,向SendGrid API发出请求,以发送你的欢迎邮件信息。

这个例子中实现的Action使用SendGrid来发送邮件。当然,你可以调整代码以使用你喜欢的电子邮件提供商。

基本上,Action的代码发送一个HTTP POST消息到SendGrid的 mail/send端点发送HTTP POST消息,其中包含一些定义电子邮件的数据。要了解更多关于SendGrid的具体API,请查看官方文档

配置你的行动

看一下Action的代码,有几件事情你应该注意一下。

  • 你可以通过访问用户的电子邮件和姓名获得 event.user.emailevent.user.name分别获得用户的电子邮件和姓名。
  • 你使用 event.secrets.SENDGRID_API_KEY属性来访问SendGrid所需的API密钥,以授权你的请求。

虽然用户的数据是由Auth0通过event 参数自动提供的,但你需要手动配置SendGrid的API密钥作为一个秘密。为此,点击动作编辑器左侧的钥匙图标,然后在打开的滑动面板中点击添加秘密按钮。你应该得到一个类似于以下的弹出窗口。

Configure Auth0 Action secret

在表格中的 SENDGRID_API_KEY在 "Key"字段中,在 "Value"字段中填写你的SendGrid API密钥。

为了完成Action的配置,你需要让Axios库在Node.js环境中可用。因此,点击Action编辑器左侧的立方体图标,然后在打开的滑动面板上点击添加模块按钮。这时你应该看到一个像下面这样的弹出窗口。

Add Auth0 Action dependency

axios 字符串填入表格的名称栏中。除非你想安装一个特定版本的库,否则你不需要指定其他东西。

点击保存草稿按钮,保存你当前的工作。

测试你的行动

现在你的Action已经可以运行了。然而,在把它投入生产之前,应该做一些测试,确保一切都按预期进行。

点击Action编辑器左边的三角形图标。一个面板打开,里面有一个事件实例,如下图所示。

Testing an Auth0 Action

这个事件对象是当你点击测试面板底部的运行按钮时,将传递给你的Action的参数。在运行测试之前,你有机会修改该事件对象。例如,你可以检测事件中的user 对象,并用你的个人电子邮件地址改变其email 属性。这样,通过运行测试,你就可以收到Action发送的邮件,并验证它是否有效。

因此,在事件对象中改变用户的电子邮件地址,然后点击运行按钮。如果一切工作正常,你应该在右下方看到一个窗口,如图所示。

Test results of an Auth0 Action

这个新窗口给你一些测试执行的反馈。当然,如果你在邮箱中收到预期的电子邮件,你的测试就成功了。

部署你的行动

到目前为止,你的Action只存在于你的开发环境中。你还不能在生产中使用它。为了使它在Auth0生产环境中可用,你需要部署它。点击Action编辑器上面的Deploy按钮,就可以轻松实现。

将开发环境和生产环境分开是非常重要的,特别是当你在生产环境中已经有了一个工作的Action,并且需要应用一些变化时。你可以把你的改变应用到Action上,并在编辑器中测试,而不用担心破坏生产环境。当你对这些变化有信心时,你可以部署新版本的Action,在生产中更新它。

另外,Action编辑器会跟踪你的Action的各种版本。你可以通过点击版本历史按钮看到它们。你会看到你当前和以前的版本列表,如下图所示。

Auth0 Action version history

通过这个列表,你可以检查Action以前的版本,如果需要,你可以用其中的一个版本恢复当前的版本。

将你的动作添加到用户注册后的流程中

一旦部署,你的Action将在Auth0仪表板的Action's Library页面Custom标签中可用。为了实现本文开头所述的目标,下一步是让刚刚创建的Action在用户注册你的应用程序后立即运行。

为此,在Auth0仪表板的左侧菜单中选择 Actions 项目下的Flows。你会看到一个页面,显示你可以配置的可能流程。

Auth0 flows

对于你的目标,你将选择发布用户注册流。你将进入流程编辑器,它为你提供了流程的视觉图,如下图所示。

Auth0 flow editor

在编辑器的右侧,你可以看到可用的行动列表。与库页面一样,你的行动被分类为已安装自定义。你将在自定义标签中找到你的发送欢迎信息的动作。在这一点上,你需要做的是把发送欢迎信息框从编辑器的右侧拖到流程图的中间,在开始完成节点之间。你的最终结果将如下图所示。

Post user registration Auth0 flow with Action

请记住,一般来说,你可以根据需要在一个Auth0流程中添加任意多的Action。

工作中的新用户注册

现在,一切都准备好了。回到你的示例应用程序,点击页面右上角的登录链接,并点击Auth0通用登录页面中的注册链接。

Auth0 Universal Login page with user registration

通过提供电子邮件和密码创建一个新用户。一分钟后,你应该收到你在发送欢迎信息动作中创建的欢迎邮件。

这就是全部!现在你已经掌握了创建你自己的Auth0动作的基本知识,可以定制各种Auth0流程。

总结

在本文的最后,我相信你学到了很多东西。你了解了什么是Actions,以及如何创建它们来定制用户的注册过程。虽然这篇文章集中在一个特定的Action例子上,但你学到的功能对一般的Auth0 Actions都是有效的。例如,你学到了如何管理Action的依赖关系和存储秘密,测试它并将其部署到生产中,检查Action的历史版本并可能恢复到以前的版本,以及将Action添加到Auth0流程中。

通过使用Auth0 Actions,你将能够定制默认的Auth0行为以满足你的特定需求。


© 2013-2022 Auth0公司。保留所有权利。