用JMAP实现Fastmail的“焦点和回复”

2020-08-20 00:30:24

上个月我把我的电子邮件换成了Fastmail。Fastmail的一个有趣之处在于,他们构建了一种名为JMAP的新协议,使用起来比IMAP方便得多。因此,在过去的几天里,我为自己构建了一个有趣的迷你电子邮件功能,以便与JMAP一起使用。

这篇文章的重点主要是给出一个简单的端到端示例,说明如何使用JMAP API,因为我在弄清楚它的时候找不到很多示例。下面是GitHub存储库和一个要点,其中显示了如何进行身份验证&发出您的第一个请求。

当https://hey.com电子邮件服务问世时,我试了一下。这不是给我的,但我喜欢他们的“聚焦和回复”功能。以下是该功能的屏幕截图(来自该功能的营销网站页面上的一段视频)。

基本上,它使一批回复大量电子邮件变得稍微简单一些。所以我想-我可以使用JMAP来实现来自嘿的焦点和回复功能吗?

我有点太害怕了,不敢真正发送电子邮件开始(只读是安全的!),所以我决定从做一个UI开始,它会显示我需要回复的所有电子邮件,并给我一个文本框来填写回复。然后我可以复制并粘贴回复到我的网络邮件客户端来发送它们。这有点不靠谱,但我现在不介意。

我在Fastmail中已经有一个名为“稍后回复”的文件夹,我在那里手动归档了我需要回复但还没有回复的电子邮件。所以我有了一个可以使用的数据源!万岁。开始编码的时间到了。

我找不到在Fastmail中使用JMAP的快速入门指南,我对如何使用感到困惑了很长一段时间,所以我在这篇博客中的目标是给出一个如何入门的例子。我将发出第一个API请求所需的所有代码放在一个要点中:fast mail-jmap-ickstart.js。

您可以使用您的用户名和Fastmail应用程序密码,使用HTTP基本身份验证来验证您的所有请求。

向https://jmap.fastmail.com/.well-known/jmap.发出GET请求。这会给你一个“会话”作为响应,给你你的帐户ID。其他所有API调用都需要这个帐户ID。我发现这有点令人惊讶,因为我通常认为.熟知的文件中的内容是静态文件,但这是一个使用HTTP基本身份验证进行身份验证的动态端点。(使用您的电子邮件/应用程序密码)。

一开始让我对JMAP产生反感的一件事是,您必须用。

例如,这是一个获取所有邮箱(文件夹)列表的请求。我认为";0";是请求的ID:

{";使用";:[";urn:ietf:params:jmap:core";,";urn:ietf:params:jmap:mail";],";method Calls";:[[";Mailbox/Get";,{";accountId";:account";IDS";:null},&#。

起初,API并不是那么直观,但通过阅读https://jmap.io.上的规范,我能够理解如何做我想做的事情。

下面是我用来从JMAP获取电子邮件的查询。我基本上只是从JMAP文档中的示例中复制了这个查询,但我认为很有趣的是,它不只是一个查询,它实际上是5个不同的链接查询,它们构建在彼此之上。例如,您拥有:

[";email/query";,{";accountId";:account tId,//todo:实际进行稍后回复";filter";:{";inMailbox_id},";排序";:[{";property";:";ReceivedAt";,";isAscending";::true,";position";:0,";Limit";:20,";culateTotal";:true},";t0";],[";email/get";,{";accountId";:account tId,";#id";:{";result of";:";t0";,:";Email/Query";,";路径";:";/IDS";},";properties";:[";threadId";]},";t1";],...。

它查询特定邮箱(我的“replylater”邮箱)中所有电子邮件ID的列表,将其命名为t0,然后使用t0的结果请求所有这些电子邮件。

JMAP中的一个重要想法似乎就是这种链接--如果您可以在单个请求中完成所有工作,那么它确实可以减少延迟。

一旦我有了所有的电子邮件,呈现它们就相当简单-我只需要使用vue.js+Tailwind。整件事总共有170行组织不是特别好的Javascript。

它起作用了!。它已经帮我回复了一些电子邮件。GitHub回购是https://github.com/jvns/focus-reply-fastmail.。

代码的主要问题是现在它将密码存储在本地存储中,我认为这不是一个好的安全实践。

我很好奇,所以我使用了Network选项卡来查看Fastmail的Web界面是如何使用jmap的。

FastMail的WebMail界面似乎没有使用https://jmap.fastmail.com/,而是使用了https://www.fastmail.com/jmap/api.。也许这只是他们使用的代理,这样请求就会发送到同一来源?不清楚。

它还以一种不同的方式进行身份验证,使用Authorization:Beager。这似乎是一种更好的身份验证方式,但我还没有找到任何有关如何使用这样的持有者身份验证而不是使用应用程序密码的信息。

由于某些原因,它发送的请求有时会被DEFLATE压缩(而不是gzip),我想这是可以的,但这意味着不可能在dev工具中查看它们,因为Firefox不理解DEFLATE。怪怪的!

最初,我将纯文本电子邮件包含为HTML。这是一个XSS漏洞(有人可能在其纯文本邮件中包含恶意CSS),有人非常有帮助地建议只将纯文本电子邮件包装在<;pre>;标记中以防止XSS。

我对<;pre>;标签设置了类似这样的样式,这样文本将自动换行,并且不使用等宽字体。

JMAP速成课程(我是在完成这项工作后才发现的,但看起来非常有用!)。

官方的Javascript库https://github.com/jmapio/jmap-js,,我没有使用它,但可能会让很多事情变得更容易。

我认为任何人都可以只用JMAP来做有趣的电子邮件UI实验,而不需要处理电子邮件的困难部分,这个想法真的很有趣!

而且这真的很酷,我可以让它100%作为一个前端应用程序工作,根本不需要任何服务器代码!所有的电子邮件数据都可以通过JMAP访问,因此似乎极有可能只使用客户端的JMAP请求来做所有事情。