如何使用基于 JWT 的身份验证处理文件下载？

Question

我正在 Angular 中编写一个 webapp，其中身份验证由 JWT 令牌处理，这意味着每个请求都有一个包含所有必要信息的“身份验证”标头。

这非常适合 REST 调用，但我不明白我应该如何处理托管在后端的文件的下载链接（这些文件位于托管 Web 服务的同一台服务器上）。

我不能使用常规的<a href='...'/> 链接，因为它们不会携带任何标头并且身份验证将失败。 window.open(...) 的各种咒语也是如此。

我想到的一些解决方案：

1. 在服务器上生成一个临时的不安全下载链接
2. 将认证信息作为url参数传递，手动处理案例
3. 通过XHR获取数据并保存文件客户端。

以上所有都不尽如人意。

1 是我现在使用的解决方案。我不喜欢它有两个原因：首先它在安全方面并不理想，其次它可以工作，但它需要做很多工作，尤其是在服务器上：下载一些我需要调用一个服务来生成一个新的“随机" url，将其存储在某个地方（可能在数据库上）一段时间，然后将其返回给客户端。客户端获取 url，并使用 window.open 或类似的。当请求时，新的 url 应该检查它是否仍然有效，然后返回数据。

2 似乎至少有同样多的工作量。

3 似乎工作量很大，即使使用可用的库，也有很多潜在的问题。 （我需要提供自己的下载状态栏，将整个文件加载到内存中，然后要求用户将文件保存在本地）。

不过，这项任务似乎很基本，所以我想知道是否有任何更简单的东西可以使用。

我不一定要寻找“Angular 方式”的解决方案。常规的 Javascript 就可以了。

Answer 1

我会生成令牌以供下载。

在 Angular 内发出经过身份验证的请求以获取临时令牌（例如一个小时），然后将其作为 get 参数添加到 url。这样你就可以以任何你喜欢的方式下载文件（window.open ...）

Answer 2

技术

基于来自 Auth0 的 Matias Woloski 的 this advice，已知的 JWT 布道者，我通过使用 Hawk 生成签名请求来解决它。

引用沃洛斯基的话：

解决这个问题的方法是像 AWS 那样生成签名请求。

Here you have an example此技术，用于激活链接。

后端

我创建了一个 API 来签署我的下载网址：

请求：

POST /api/sign
Content-Type: application/json
Authorization: Bearer...
{"url": "https://path.to/protected.file"}

回复：

{"url": "https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c"}

通过签名的URL，我们可以得到文件

请求：

GET https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c

回复：

Content-Type: multipart/mixed; charset="UTF-8"
Content-Disposition': attachment; filename=protected.file
{BLOB}

前端（jojoyuji）

这样，您只需单击一次用户即可完成所有操作：

function clickedOnDownloadButton() {

  postToSignWithAuthorizationHeader({
    url: 'https://path.to/protected.file'
  }).then(function(signed) {
    window.location = signed.url;
  });

}

Answer 3

这是一种使用the download attribute、the fetch API 和URL.createObjectURL 在客户端上下载它的方法。您将使用 JWT 获取文件，将有效负载转换为 blob，将 blob 放入 objectURL，将锚标记的源设置为该 objectURL，然后在 javascript 中单击该 objectURL。

let anchor = document.createElement("a");
document.body.appendChild(anchor);
let file = 'https://www.example.com/some-file.pdf';

let headers = new Headers();
headers.append('Authorization', 'Bearer MY-TOKEN');

fetch(file, { headers })
    .then(response => response.blob())
    .then(blobby => {
        let objectUrl = window.URL.createObjectURL(blobby);

        anchor.href = objectUrl;
        anchor.download = 'some-file.pdf';
        anchor.click();

        window.URL.revokeObjectURL(objectUrl);
    });

download 属性的值将是最终的文件名。如果需要，您可以从内容处置响应标头as described in other answers 中挖掘出预期的文件名。

Answer 4

已经提到的现有“fetch/createObjectURL”和“download-token”方法的替代方法是标准针对新窗口的表单POST。一旦浏览器读取服务器响应中的附件标头，它将关闭新选项卡并开始下载。同样的方法也恰好适用于在新选项卡中显示诸如 PDF 之类的资源。

这对旧浏览器有更好的支持，并且避免了管理新类型的令牌。这也将比 URL 上的基本身份验证具有更好的长期支持，因为 support for username/password on the url is being removed by browsers。

在客户端，我们使用target="_blank" 来避免即使在失败情况下也能导航，这对于SPA（单页应用程序）尤其重要。

主要的警告是 服务器端 JWT 验证必须从 POST 数据 中获取令牌，而不是从标头。如果您的框架使用 Authentication 标头自动管理对路由处理程序的访问，您可能需要将您的处理程序标记为未经身份验证/匿名，以便您可以手动验证 JWT 以确保正确授权。

表单可以动态创建并立即销毁，以便正确清理（注意：这可以在纯 JS 中完成，但此处使用 JQuery 是为了清楚起见）-

function DownloadWithJwtViaFormPost(url, id, token) {
    var jwtInput = $('<input type="hidden" name="jwtToken">').val(token);
    var idInput = $('<input type="hidden" name="id">').val(id);
    $('<form method="post" target="_blank"></form>')
                .attr("action", url)
                .append(jwtInput)
                .append(idInput)
                .appendTo('body')
                .submit()
                .remove();
}

只需添加您需要作为隐藏输入提交的任何额外数据，并确保将它们附加到表单中。

Answer 5

詹姆斯回答的纯 JS 版本

function downloadFile (url, token) {
    let form = document.createElement('form')
    form.method = 'post'
    form.target = '_blank'
    form.action = url
    form.innerHTML = '<input type="hidden" name="jwtToken" value="' + token + '">'

    console.log('form:', form)

    document.body.appendChild(form)
    form.submit()
    document.body.removeChild(form)
}