Estou escrevendo um webapp em Angular em que a autenticação é controlada por um token JWT, o que significa que cada solicitação tem um cabeçalho de "Autenticação" com todas as informações necessárias.

Isso funciona bem para chamadas REST, mas não entendo como devo lidar com links de download para arquivos hospedados no back-end (os arquivos residem no mesmo servidor onde os serviços da web estão hospedados).

Não posso usar <a href='...'/>links regulares, pois eles não carregam nenhum cabeçalho e a autenticação falhará. O mesmo vale para os vários encantamentos de window.open(...).

Algumas soluções que pensei:

1. Gerar um link de download não seguro temporário no servidor
2. Passe as informações de autenticação como um parâmetro de url e lide manualmente com o caso
3. Obtenha os dados por meio de XHR e salve o arquivo do lado do cliente.

Todos os itens acima são menos que satisfatórios.

1 é a solução que estou usando agora. Não gosto disso por dois motivos: primeiro não é o ideal em termos de segurança, segundo funciona, mas requer bastante trabalho, especialmente no servidor: para baixar algo, preciso chamar um serviço que gera um novo "aleatório "url, armazena em algum lugar (possivelmente no banco de dados) por algum tempo e o devolve ao cliente. O cliente obtém o url e usa window.open ou semelhante com ele. Quando solicitado, o novo url deve verificar se ainda é válido e, em seguida, retornar os dados.

2 parece pelo menos tanto trabalho.

3 parece muito trabalhoso, mesmo usando as bibliotecas disponíveis, e muitos problemas potenciais. (Eu precisaria fornecer minha própria barra de status de download, carregar o arquivo inteiro na memória e então pedir ao usuário para salvar o arquivo localmente).

A tarefa parece bastante básica, então estou me perguntando se há algo muito mais simples que eu possa usar.

Não estou necessariamente procurando uma solução "do jeito Angular". Javascript regular seria bom.

Esta é uma maneira de baixá-lo no cliente usando o atributo download , a API fetch e URL.createObjectURL . Você deve buscar o arquivo usando seu JWT, converter a carga útil em um blob, colocar o blob em um objectURL, definir a origem de uma tag âncora para esse objectURL e clicar nesse objectURL em javascript.

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);
    });

O valor do downloadatributo será o nome do arquivo eventual. Se desejar, você pode extrair um nome de arquivo pretendido do cabeçalho de resposta de disposição de conteúdo, conforme descrito em outras respostas .

Técnica

Com base neste conselho de Matias Woloski de Auth0, conhecido evangelista do JWT, resolvi o problema gerando um pedido assinado com Hawk .

Citando Woloski:

A maneira de resolver isso é gerando uma solicitação assinada como a AWS, por exemplo.

Aqui você tem um exemplo dessa técnica, usada para links de ativação.

Processo interno

Eu criei uma API para assinar meus urls de download:

Solicitação:

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

Resposta:

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

Com um URL assinado, podemos obter o arquivo

Solicitação:

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

Resposta:

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

frontend (por jojoyuji )

Dessa forma, você pode fazer tudo com um único clique do usuário:

function clickedOnDownloadButton() {

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

}

Uma alternativa às abordagens existentes "fetch / createObjectURL" e "download-token" já mencionadas é um Form POST padrão que visa uma nova janela . Assim que o navegador ler o cabeçalho do anexo na resposta do servidor, ele fechará a nova guia e iniciará o download. Essa mesma abordagem também funciona bem para exibir um recurso como um PDF em uma nova guia.

Isso oferece melhor suporte para navegadores mais antigos e evita a necessidade de gerenciar um novo tipo de token. Isso também terá um suporte de longo prazo melhor do que a autenticação básica no URL, uma vez que o suporte para nome de usuário / senha no url está sendo removido pelos navegadores .

No lado do cliente , usamostarget="_blank" para evitar a navegação mesmo em casos de falha, o que é particularmente importante para SPAs (aplicativos de página única).

A principal ressalva é que a validação do JWT do lado do servidor deve obter o token dos dados POST e não do cabeçalho . Se sua estrutura gerencia o acesso aos roteadores de rota automaticamente usando o cabeçalho de autenticação, pode ser necessário marcar seu manipulador como não autenticado / anônimo para que possa validar manualmente o JWT para garantir a autorização adequada.

O formulário pode ser criado dinamicamente e imediatamente destruído para que seja devidamente limpo (observação: isso pode ser feito em JS simples, mas JQuery é usado aqui para maior clareza) -

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();
}

Basta adicionar quaisquer dados extras que você precisa enviar como entradas ocultas e certifique-se de que eles sejam anexados ao formulário.

Gostaria de gerar tokens para download.

No angular, faça uma solicitação autenticada para obter um token temporário (digamos uma hora) e adicione-o ao url como um parâmetro get. Desta forma, você pode baixar arquivos da maneira que quiser (window.open ...)

Uma solução adicional: usando autenticação básica. Embora exija um pouco de trabalho no back-end, os tokens não serão visíveis nos logs e nenhuma assinatura de URL terá que ser implementada.

Cliente

Um exemplo de URL poderia ser:

http://jwt:<user jwt token>@some.url/file/35/download

Exemplo com token fictício:

http://jwt:eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIwIiwibmFtZSI6IiIsImlhdCI6MH0.KsKmQOZM-jcy4l_7NFsv1lWfpH8ofniVCv75ZRQrWno@some.url/file/35/download

Você pode então enfiar isso <a href="...">ou window.open("...")- o navegador cuida do resto.

Lado do Servidor

A implementação aqui depende de você e depende da configuração do seu servidor - não é muito diferente de usar o ?token=parâmetro de consulta.

Usando o Laravel, peguei o caminho mais fácil e transformei a senha de autenticação básica no Authorization: Bearer <...>cabeçalho JWT , deixando o middleware de autenticação normal cuidar do resto:

class CarryBasic
{
    /**
     * @param Request $request
     * @param \Closure $next
     * @return mixed
     */
    public function handle($request, \Closure $next)
    {
        // if no basic auth is passed,
        // or the user is not "jwt",
        // send a 401 and trigger the basic auth dialog
        if ($request->getUser() !== 'jwt') {
            return $this->failedBasicResponse();
        }

        // if there _is_ basic auth passed,
        // and the user is JWT,
        // shove the password into the "Authorization: Bearer <...>"
        // header and let the other middleware
        // handle it.
        $request->headers->set(
            'Authorization',
            'Bearer ' . $request->getPassword()
        );

        return $next($request);
    }

    /**
     * Get the response for basic authentication.
     *
     * @return void
     * @throws \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException
     */
    protected function failedBasicResponse()
    {
        throw new UnauthorizedHttpException('Basic', 'Invalid credentials.');
    }
}