1

Eu criei uma tela de login e quando eu clico em login eu recebo de volta um token JWT e sua expiração. O que eu quero fazer é armazenar esse token e redirecionar para uma outra página. Eu sei que tenho que fazer a autorização usando header mas não sei exatamente como fazer. Estou usando Jquery

<form action="https://www.teste.teste.com:3000/api/v1/sign-in " method="post" name="login" id="login">
    <div class="box">
  <div class="box-top">
  <p style="position:absolute; top:30px; left:160px; color:white; font-size: 150%;">Logar</p>

    </div>

 </div>

<input type="text" id="name" class="input_text" name="name" placeholder="Usuário" value="pontual">

<div class="container">

<input type="password" id="password" name="password" class="input_text" placeholder="Senha" value="#P0ntu@l">

<input type="hidden" class="input_text" name="type_login" id="type_login" value="service"/>

<div>

 </div>

</div>

<button type="submit" id="salvar" name="myButton" value="foo">Logar</button>

    </div>
 </form>

Esse é o retorno que eu recebo:

{
id: 1,
name: "pontual",
token: "JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NTU1OTM4OTksImlkIjoxLCJuYW1lIjoicG9udHVhbCIsInR5cGVfbG9naW4iOiJzZXJ2aWNlIn0.WJuGoxa0ditgNhylkKkXBacvqUAA7GXDIeJCW5v1rOU",
token_expires: "2019-04-18 10:24:59"
}

2 Respostas 2

1

Olá Gabriel tudo certo?

Você pode armazenar o token no client localStorage ou em cookie. Porém pelo visto você está tentando enviar o token pelo POST de um form submit no qual sabemos que não é possível controlar os headers em um form por isso ou enviamos um cookie ou um nos parametros do nosso form com um input oculto que é o que aparentemente está tentando fazer.

<input type="hidden" name="LTI-Authorization" value="Token consumerKey:consumerSecret" />

Pode utilizar a requisição Ajax:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "LTI-Authorization":"Token consumerKey:consumerSecret"
    },
    data: {
       "lti_version":"${lti_version}" // all other data
    }
}).done(function(data) { 
    alert(data); 
});

Caso tenha interesse em fazer de forma diferente efetuar um POST Ajax utilizando XHR.

$.ajax({
    type: "POST", //GET, POST, PUT
    url: '/authenticatedService'  //a url para a chamada
    data: seusDados,     //Dados a serem enviados para o server
    contentType: contentType,           
    beforeSend: function (xhr) {   //Inclui o bearer token no header 
        xhr.setRequestHeader("Authorization", 'Bearer '+ jwt);
    }
}).done(function (response) {
    //Response ok. process reuslt
}).fail(function (err)  {
    //Error during request
});

Espero ter ajudado, abraços!

Fontes: When auto-submitting a form, how do I add a header? JWT token with AJAX, non-AJAX, JQuery

2
  • Obrigado pela resposta! Se eu entendi corretamente (ainda sou iniciante) aonde fica url eu coloco o http que eu uso na form? E data eu coloco especificamente o que? o login e a senha utilizados? Commented 18/04/2019 às 14:18
  • Exato Gabriel, na URL ficam os dados para onde vai a requisição, e no data ficarão os outros dados, veja como sua api quer receber esses dados e monte a conforme o solicitado por ela. Commented 18/04/2019 às 14:26
1

Gabriel, conforme perguntou como faria.. segue outro exemplo:

HTML:

<input id="tokenField" type="hidden" />
<input id="submitButton" type="button" />

Javascript:

$('#submitButton').on('click',function(){
    $.ajax({
          url: "http://localhost:3000/api/valores",
          type: 'POST',
          contentType: 'application/json',
          headers: {
                    "Authorization": "Bearer " + $('#tokenField').val()
                 },
          async: false
            }});

FONTE: How Set Authorization headers at HTML Form or at A href

5
  • 1
    tokenField é referente ao token que é retornado como eu coloquei na pergunta? Commented 18/04/2019 às 14:38
  • Isso ai.. qq acontece, como eu comentei anteriormente até onde eu saiba (que também não é muito rsrs) não conseguimos manipular os cabeçalhos das requisições por meio do submit de formulário. Por isso precisamos criar um campo oculto e inserir nele o token. Então resumidamente, sim é ali que teria que ficar seu token para ser enviado. Commented 18/04/2019 às 14:42
  • Entendi!, sem querer abusar da sua boa vontade me tira uma duvida porfavor? Eu criei por form ali, para que eu passe a url no ajax eu tenho que remover o form? Commented 18/04/2019 às 17:29
  • Não Gabriel, você só precisa criar uma função Javascript com esse Ajax e chamar a função na action do seu formulário. Ex: <form action="#" onsubmit="return validateFormOnSubmit(this);"> Referência: stackoverflow.com/questions/10520899/… Commented 18/04/2019 às 17:42
  • Se essas respostas estão te ajudando, por favor vote como úteis e caso consiga solucionar o seu problema marque como Resposta ;D pt.meta.stackoverflow.com/questions/1078/… Commented 18/04/2019 às 17:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .