用SendGrid和Auth0动作在密码更改后发送电子邮件（附代码）

简介

你的客户的数据安全是至关重要的，而且不仅仅是应用程序。当客户的账户信息发生变化时，例如用户名或密码，提醒客户，是向客户展示你为他们着想的一个好方法。你可以将Twilio SendGrid与Auth0 Actions配对，在用户的密码发生变化时向他们发送电子邮件，以建立另一层信任。

这篇博文将指导你使用SendGrid的Mail Send端点和Auth0 Actions来发送密码变更邮件。

设置SendGrid

在使用SendGrid发送邮件之前，你需要验证你的发送者身份并生成你的API密钥。验证发件人身份以确认你拥有你要发送的电子邮件地址。发件人身份是用户在收到你的电子邮件时看到的 "来自 "电子邮件地址。API密钥可以保护你的SendGrid账户的敏感区域免受未经授权的访问。

通过SendGrid验证你的发送者身份

在登录SendGrid后，在左侧菜单中向下滚动，并点击设置>发送者身份验证。

在 "发件人认证"页面上，你将有两个选项。域名认证和单一发件人验证。单一发件人验证是一种在开发过程中开始发送电子邮件的快速方法：

在 "发件人认证"页面，点击 "验证单一发件人 "按钮。

对于生产，建议使用域名认证来验证你的发件人身份：

填写出现在页面右侧的创建发件人表格。当所有需要的字段都填好后，点击创建。SendGrid将向提供的 "from "电子邮件地址发送一封电子邮件，以验证该电子邮件地址。这封邮件的主题是：请验证您的单一发件人。打开该邮件后，点击验证单一发件人。你将被重定向到SendGrid，并能够使用该电子邮件地址从Auth0发送邮件。

下一步是创建一个API密钥，该密钥将作为秘密储存在Auth0中。

生成SendGrid的API密钥

你可以通过进入左侧菜单并点击设置>API密钥来创建你的API密钥：

在API密钥页面，点击右上角的创建API密钥。在Create API Key 表格中为你的API密钥键入一个名字，在API密钥权限下选择完全访问，然后点击创建和查看。这个页面显示你的API密钥。建议你复制这个密钥并将其保存在一个安全的地方。最后，单击 "完成"。

SendGrid现在已经被配置为发送电子邮件。现在到Auth0创建一个Auth0动作，使用SendGrid来发送密码修改邮件。

什么是Auth0动作？

Auth0 Actions是用Node.js编写的无服务器函数。代码是在Auth0的浏览器内代码编辑器中编写的，该编辑器在Auth0拥有和维护的基础设施上存储和运行。还有Auth0行动市场，你可以在那里添加自定义集成，而无需编写任何代码。你还可以添加npm包，存储秘密，甚至在部署前测试Action。一旦部署，你就可以在授权流程中的各种触发点之后添加Action来运行。

今天你将学习Post Change Password流程中的Action。

创建一个Auth0动作

要创建一个Action，请登录Auth0，浏览你的仪表盘，在左边的菜单上，点击Actions > Library。你在图书馆 ，它显示你的行动。

库 页面 有两个标签。第一个选项卡，已安装*，*是为任何从行动市场上安装的第三方行动。第二个标签，自定义，是你创建的任何动作。要创建你的第一个动作，点击页面右上角的 "建立自定义"按钮。

点击 "建立自定义"将弹出 "创建动作"模式。在这里，你将给你的动作一个名字，选择你想用来激活动作的触发器，以及节点的版本，对于这个例子：

1. 在名称栏中填写 "SendGrid API"。
2. 从触发器下拉菜单中选择 "Post Change Password"。
3. 将Runtime保持在推荐的Node 16上。

在这三个字段填写完毕后，点击创建。

点击 "创建"将弹出 "行动 "的浏览器代码编辑器。在这里，你可以编写代码，使用SendGrid API发送电子邮件。

使用SendGrid邮件发送端点编写Auth0动作代码

在一头扎进写代码之前，先浏览一下代码编辑器。

在右上角，有三个按钮。版本历史，保存草稿，和部署。

• 版本历史是你可以存储你的行动的地方，可以恢复到以前的版本。

• 保存草稿是为了保存你的代码，以后再来处理。

• 部署是在你的代码完成并经过测试后，你准备使用它。

在编辑器的左侧，你会看到三个符号：

• 第一个是 "播放 "符号，在你部署之前，你将在这里测试你的行动。
• 下面是一个钥匙符号，你将在这里存储你的秘密，如API密钥。
• 最后一个符号是一个盒子；这是你要安装npm包的地方。

你要做的第一个步骤是安装npm包和存储秘密。

为了发送更改密码的电子邮件，你将使用Twilio SendGrid的邮件发送端点，通过HTTP请求发送电子邮件。Axios会让你从node.js进行HTTP请求。从npm安装axios来开始。

点击编辑器左侧的 "盒子 "图标。当依赖项菜单弹出时，点击添加依赖项。

在添加依赖的模式中，在名称栏中输入 "axios"。你可以不用管版本，因为它默认为最新发布的版本。最后一步是点击创建。现在axios@latest将显示在依赖关系菜单中。

接下来，你将添加你的SendGrid API密钥。点击密钥图标，弹出Secrets菜单。点击**"添加秘密**"，出现 "添加秘密"模式。

在这个例子中，在密钥栏中输入SENDGRID_API_KEY 。然后，将你在SendGrid仪表板上创建的API密钥粘贴到价值字段中，然后点击创建。

现在你可以开始在代码编辑器中编写代码了（耶！）。

将编辑器中的代码替换为以下内容。

const axios = require("axios");

exports.onExecutePostChangePassword = async (event) => {
  try {
    axios.post('https://api.sendgrid.com/v3/mail/send',
      {
        personalizations: [{
          to: [{ email: event.user.email }]
        }],
// Replace this email address for the verified sender in your SendGrid account
        from: { email: 'admin@exampleco.com' },
        subject: 'Your password was changed',
        content: [{
          type: 'text/plain',
          value: 'The password for your ' + event.connection.name + ' account ' + event.user.email + ' was recently changed.'
        }]
      },
      {
        headers: {
          'Authorization': 'Bearer ' + event.secrets.SENDGRID_API_KEY
        },
      }
    );
  } catch (err) {
    console.log(`Error sending email to ${event.user.email}:`, err.message)
    }
};

第一行代码，const axios = require("axios"); ，包括你项目中的axios npm包。

在exports.onExecutePostChangePassword 函数里面，你运行一个axiosPOST 请求，有两个参数：SendGrid Mail Send endpoint URL和一个包含你要发送到服务器的属性的对象。

在作为axios请求一部分的对象里面，你定义了Personalizations，这是一个带有关于邮件元数据的对象数组。在这个例子中，personalizations 数组定义了to,from,subject, 和content 的元数据。

你还在你的请求中发送了一个授权头，其中包括你的API密钥来验证这个请求。你有一个headers 属性，其值是一个带有Authorization 及其属性的对象，Bearer 加上你的API密钥作为其值。

现在点击保存草稿按钮，这样你的代码就安全了。注意你是如何得到以下数据的：

• to 字段中的电子邮件地址
• value 属性的应用程序的名称
• header 属性中的你的API密钥。

你使用Actions事件对象访问这些值。event 对象包含不同的信息，这取决于你使用的是哪种Action触发器。

在部署你的Action之前，最好先测试一下，然后再把它添加到你的应用程序中。

测试Auth0动作

你可以测试你的代码，以确保其正确运行，而无需离开编辑器页面。点击 "播放 "图标，就会出现测试菜单。这个菜单还显示了你可以用event 对象访问的所有属性。点击菜单底部的 "运行"：

你会得到一个测试结果弹出窗口，它将告诉你是否有任何错误，并给你一些统计数字，如运行时间和网络持续时间。确保错误部分是空的，然后点击 部署。

有了经过测试和部署的Action，下一步就是将Action添加到更改密码后的流程中，这样它就可以向用户开放了。

添加动作到修改密码流程中

Action有一个拖放编辑器，可以把你刚才写的代码添加到你的应用程序中。你可以在一个流程中添加多个动作，以获得真正的定制体验。

在左边的菜单上，点击行动>流程：

你现在在 "选择流程"页面。这个页面列出了所有可用的流程，你可以将其附加到Action上。对于今天的应用，选择 " 更改密码"。

浏览一下拖放式流程编辑器。在屏幕中央，你有两个点，"开始"，也就是触发器（更改密码），和 "完成"。你可以在这两个点之间拖动你想执行的行动。在右边，有一个添加行动部分。在 "添加动作"菜单中，有两个标签。安装选项卡是为你从市场上添加的行动。自定义选项卡是为你编写的自定义动作。

点击自定义标签，可以看到你刚刚创建的SendGrid API动作。现在，点击并拖动你的动作在开始和完成点之间，然后点击应用。

就这样，你的应用程序现在被配置为当用户的密码被改变时通过电子邮件提醒用户。最后一步是在你的实际应用中测试密码更改。

在实际应用中测试密码更改

行动现在已经上线，供你的用户在你的应用程序中试用。测试一下密码修改，从用户的角度体验一下。在本地运行你的应用程序，点击你的登录按钮。

这就会出现Auth0登录页面，让用户输入他们的电子邮件和密码。确保你已经有了这个应用程序的账户--如果你没有从这个页面注册并退出。幸运的是，你 "忘记 "了你的密码，正好可以测试一下这个新功能。继续点击忘记密码？在这个页面上输入你的电子邮件地址，发送密码重置说明，然后点击继续。

检查你的电子邮件，查看重置密码的链接。点击该链接，你将被带到Auth0更改密码页面。输入一个强大的密码并重新输入确认，然后点击重置密码。你会看到一个 "密码已被更改！"的页面，它将发送一封电子邮件，提醒你密码已被更改。祝贺你!

结论

你刚刚体验了SendGrid邮件发送端点与Auth0 Actions相结合的力量，使你的用户及时了解他们账户的变化。每当用户改变他们的密码时，他们会收到一封提醒他们的电子邮件。你不需要编写大量的自定义代码或重新配置你的应用程序。