具有HTML标签的Cognito自定义消息
Mar*_*ujo 1 html amazon-cognito aws-lambda
我正在向Cognito验证链接发送带有HTML标记的消息。
我正在尝试在自定义按钮内发送codeParameter：
<div align="center" class="button-container center" style="padding-right:5px;padding-left:5px;padding-top:15px;padding-bottom:15px">
<a href="{####}" target="_blank" style="display:block;text-decoration:none;-webkit-text-size-adjust:none;text-align:center;color:#323232;background-color:#ffc400;border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;max-width:210px;width:160px;width:auto;border-top:0 solid transparent;border-right:0 solid transparent;border-bottom:0 solid transparent;border-left:0 solid transparent;padding-top:5px;padding-right:25px;padding-bottom:5px;padding-left:25px;font-family:'Droid Serif',Georgia,Times,'Times New Roman',serif;mso-border-alt:none">
<span style="font-size:16px;line-height:32px">Verify your email</span>
</a>
</div>
但是它发送给我：
x-webdoc://9166B278-3889-4E59-A9E2-F88FD6970944/%7B##</a>
而不是像这样的链接：
https://xxxxx.auth.us-east-2.amazoncognito.com/confirmUser?client_id=xxxxxxxxxxxxxxx&user_name=marcuspdg22&confirmation_code=244905
小智 7
我有同样的问题。以下是一些对我有用的提示：
- 不要使用完整的HTML页面，只需将HTML代码包含在您的
<body></body> - 不支援Javascript，Jquery等
- 在UserPool控制台中，转到“消息自定义”，然后将验证类型更改为“代码”。之后，只需在您的lambda触发器中使用此代码创建一个确认链接，例如
'https://{yourUserPoolDomain/confirmUser?client_id={yourClientId}&user_name=' + event.userName + '&confirmation_code=' + event.request.codeParameter
您可以将此确认链接放在href标签内。让我知道它是否对您有用。
我设法（经过数小时的反复试验）使用Custom Message Lambda Trigger向用户发送 HTML 电子邮件。
第 1 步：正如@Olavo 所述，将验证类型更改为代码。
第 2 步：在用户池 -> 触发器下，设置一个 lambda 函数来自定义您的电子邮件
第 3 步：创建一个如下面的 lambda 函数
请注意，您可能没有用户属性名称。你可以删除它。
这是我的完整 Lambda 函数，带有像您这样的按钮：
'use strict';
module.exports.verificationEmail = async (event, context, callback) => {
const template = (name, link) => `<html>
<body style="background-color:#333; font-family: PT Sans,Trebuchet MS,sans-serif; ">
<div style="margin: 0 auto; width: 600px; background-color: #fff; font-size: 1.2rem; font-style: normal;font-weight: normal;line-height: 19px;" align="center">
<div style="padding: 20;">
<p style="Margin-top: 20px;Margin-bottom: 0;"> </p>
<p style="Margin-top: 20px;Margin-bottom: 0;"> </p>
<img style="border: 0;display: block;height: auto; width: 100%;max-width: 373px;" alt="Animage" height="200" width="300" src="https://picsum.photos/300/100" />
<p style="Margin-top: 20px;Margin-bottom: 0;"> </p>
<h2
style="font-size: 28px; margin-top: 20px; margin-bottom: 0;font-style: normal; font-weight: bold; color: #000;font-size: 24px;line-height: 32px;text-align: center;">Hi ${name}</h2>
<p style="Margin-top: 20px;Margin-bottom: 0;"> </p>
<p style="Margin-top: 20px;Margin-bottom: 0;font-size: 16px;line-height: 24px; color: #000">Click the link below to confirm your signup. Cheers!</p>
<p style="Margin-top: 20px;Margin-bottom: 0;"> </p>
<div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 24px;">
<div style="Margin-bottom: 20px;text-align: center;">
<a
style="border-radius: 4px;display: block;font-size: 14px;font-weight: bold;line-height: 24px;padding: 12px 24px 13px 24px;text-align: center;text-decoration: none !important;transition: opacity 0.1s ease-in;color: #ffffff !important;box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);background-color: #3b5998;font-family: PT Sans, Trebuchet MS, sans-serif; letter-spacing: 0.05rem;"
href="${link}">CLICK HERE TO VERIFY YOUR EMAIL</a>
</div>
</div>
</div>
</div>
</body>
</html>`
const link = `https://<yourUserPoolDomain>/confirmUser?client_id=${event.callerContext.clientId}&user_name=${event.userName}&confirmation_code=`
const name = event.request.userAttributes.name.split(" ")[0]
if (event.triggerSource === "CustomMessage_SignUp") {
event.response = {
emailSubject: "AweseomeApp2000 | Confirm your email",
emailMessage: template(name, link + event.request.codeParameter)
}
}
callback(null, event);
};
这是电子邮件在 gmail 中的外观截图：
| 归档时间： |
|
| 查看次数： |
864 次 |
| 最近记录： |