【问题标题】:Blazor client side send an emailBlazor 客户端发送电子邮件
【发布时间】:2021-05-23 14:56:15
【问题描述】:

我在剃须刀页面中添加了一个联系表单,因此用户可以在其中填写他的电子邮件、主题和正文。当他提交时,电子邮件将发送到我的电子邮件地址。

我的代码看起来像这样example

但是当我提交表单时,我遇到了这个错误

此平台不支持操作。

不支持,因为我在浏览器(客户端)上运行它。

我想知道是否有人作为这种情况的周转,而不使用 smtp 服务器(因为用户可以访问服务器的凭据)或

test@example.com

谢谢。

问候,萨米赫。

【问题讨论】:

  • 您需要一个 API 服务器来为您处理这个问题。和一个 SMTP 服务器帐户。

标签: c# email web blazor blazor-client-side


【解决方案1】:

这篇博文可能对您有所帮助:Blazor (Wasm) – How to Send Email from a PWA。它调用用户的本机邮件应用程序,而不是依赖于基于服务器或基于 API 的实现。

摘录,“...对于非常基本的电子邮件需求,是利用老式技术,即使用“mailto:”锚链接并结合注入 Blazor 的 IJSRuntime。”

protected void SendLocalEmail(string toEmailAddress, string subject, string body)
{
      JsRuntime.InvokeAsync<object>("blazorExtensions.SendLocalEmail",
      new object[] { toEmailAddress, subject, body });
}

然后,在您的 wwwroot 文件夹中,您应该有一个相应的 .js 文件(即 GlobalFunctions.js),其中包含相应的 JavaScript SendLocalEmail() 函数

window.blazorExtensions = {
  SendLocalEmail: function (mailto, subject, body) {
    var link = document.createElement('a');
    var uri = "mailto:" + mailto + "?";
    if (!isEmpty(subject)) {
        uri = uri + "subject=" + subject;
    }

    if (!isEmpty(body)) {
        if (!isEmpty(subject)) { // We already appended one querystring parameter, add the '&' separator
            uri = uri + "&"
        }
 
        uri = uri + "body=" + body;
    }
 
    uri = encodeURI(uri);
    uri = uri.substring(0, 2000); // Avoid exceeding querystring limits.
    console.log('Clicking SendLocalEmail link:', uri);
 
    link.href = uri;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
  }
};

function isEmpty(str) {
  return (!str || str.length === 0);
}

最后,确保在 index.html 文件中包含对 .js 文件的引用(也在 wwwroot 文件夹中):

<script src="GlobalFunctions.js"></script>

我将上面的脚本引用放在这一行下面:

<script>navigator.serviceWorker.register('service-worker.js');</script>

【讨论】:

    【解决方案2】:

    这是不可能的,因为浏览器有禁止发送电子邮件的安全限制。此限制并非来自 Blazor 或 ASP.NET Core。它也不适用于 JavaScript。或者至少没有可疑的hacks

    我不建议使用像 smtp.js 这样试图解决这些限制的项目:他们通过使用服务器端 API 来做唯一合适的方法。 但是这里的问题是,您通过生成安全令牌将这些凭据至少暴露给 smtp.js,因为它们会将您的凭据存储在 他们的服务器上,以便 API 可以获取当你从 JS 中调用他们的 Email.send() 方法时,他们就会这样做。

    为了安全地实现这一点,您需要在服务器端使用某种 API 来使用邮件服务器(主要使用 SMTP)发送这些邮件。既然你说它在浏览器上运行,我假设你正在使用 Blazor WebAssembly。因此,要么创建一个可以使用例如调用的 API 项目。 WASM 项目中的 Ajax 或切换到 Blazor Server which allows you to run the code directly on the server, if this is suiteable for the use-case

    重要提示:注意滥用!

    即使您自己的 API 使用秘密存储在您自己服务器上的凭据,防止滥用也很重要。如果有一个 API 可以不受任何限制地向使用您帐户的任何人发送邮件,那么机器人滥用它们发送垃圾邮件只是时间问题 - 即使凭据没有暴露!

    这可能会在很多方面伤害您:

    • 您的名下的垃圾邮件甚至恶意内容
    • 您的邮件帐户已被删除
    • 由于您的邮件在每个垃圾邮件列表中,因此无法发送所需邮件
    • ...

    因此,您应该只从您的服务器发送邮件并对该 API 进行适当限制,例如只允许将发件人列入白名单、速率限制等。

    【讨论】:

    • 非常感谢您的回答
    猜你喜欢
    • 2022-01-13
    • 2012-07-07
    • 2010-11-09
    • 2016-08-18
    • 2013-04-03
    • 2020-12-22
    • 1970-01-01
    • 2020-05-23
    相关资源
    最近更新 更多