0

A minha função myFunction pega os elementos username e password digitados,e envia esses valores armazenando em uma variável global para a próxima página.

A minha função tToken autentica essa informação e joga para próxima página o Token valido para eu manipular.

O problema é que não estou conseguindo fazer ou pensar em um modo de jogar o login e senha digitados no campo para as próximas paginas dinamicamente. Ai eu consegui fazer isso porém funciona apenas na pagina de LOGIN, ele exibe o objeto preenchido apenas na pagina de login. Quando o login é feito e autenticado, apos atualizar a pagina tudo some, exatamente por estar armazenado em variáveis os valores que eu quero. Como fazer isso, sem ser por variáveis?

var globalcredential =  "/v1/credentials";
var globalauth = "/v1/auth";
var userlogin = new String();
var passwordlogin = new String();

function myFunction(){
       var userElement = document.getElementsByName('username');
       var passwordElement = document.getElementsByName('password');
       userlogin = $(userElement).val().toString();
       passwordlogin = $(passwordElement).val().toString();
    };



function auth(){

var account = {
        grant_type: "password",
        login : userlogin,
        senha : passwordlogin
    };

    var jsonAccount = JSON.stringify(account);

    console.log(jsonAccount);
    $.ajax({
                  type: "POST" 
                , method : "POST"
                , url : globalauth
                , contentType : "application/json"
                , dataType : "json"
                , data: jsonAccount
                ,success : function(data){
                    console.log("oi");

                },beforeSend : function(request){
                request.setRequestHeader('Content-Type', 'application/json');
        },
        }).done(function(response, status){
          console.log(response,status);     
        }).fail(function(error){
          console.log(error);
        }).always(function(response, status){
        });
}

var classname = document.getElementsByClassName("buttonlogin");

 Array.from(classname).forEach(function(element) {
          element.addEventListener('click', myFunction);
                  element.addEventListener('click', auth);
      });
3
  • Tá meio confuso isso. Vc tá autenticando via Ajax e quer redirecionar pra outra página?
    – Sam
    Commented 7/02/2018 às 19:51
  • Pelo que pude entender, vc não vai querer enviar senha via cliente-side porque a confidenciabilidade e segurança disso cai pra baixo de zero. Talvez armazenando numa SESSION seja mais seguro e viável.
    – Sam
    Commented 7/02/2018 às 20:01
  • Quero retornar o usuario e senha, mais esse usuario e senha nao pode estar inline no codigo.Tem que ser dinâmico. Commented 8/02/2018 às 12:10

2 Respostas 2

0

Você pode usar o objeto window.localStorage (veja mais em https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Com ele você irá conseguir armazenar informações em uma página e recuperar em outra, já que ele guarda as informações no browser.

Incrementando seu código:

function myFunction(){
   var userElement = document.getElementsByName('username');
   var passwordElement = document.getElementsByName('password');
   userlogin = $(userElement).val().toString();
   passwordlogin = $(passwordElement).val().toString();

   // armazenar o usuário
   window.localStorage.setItem('usuario', userLogin);

};

Em uma página subsequente, será possível obter o usuário com a instrução:

var usuario = window.localStorage.getItem('usuario');

Quando precisar remover o item, utilize:

window.localStorage.removeItem('usuario')

Mas tome cuidado com o armazenamento de informações sensíveis (como senhas) no browser, elas poderão ser acessadas por outra página! O melhor é armazenar com alguma criptografia. Os mecanismos de autenticação mais comuns nas diversas linguagens não requerem que você envie a senha a cada requisição, então é interessante não armazená-la! Normalmente para requisições subsequentes, após o login, utiliza-se um número de sessão gerador pelo servidor, ou tokens criptografados, como no JWT.

6
  • Isso eu ja faco, porem para passar um token voce precisa de usuario e senha. Commented 8/02/2018 às 12:12
  • Não seria o caso de você armazenar somente o token então? E reenviá-lo nas consultas subsequentes, isso depende de como o server está implementado, se foi implementado por você, você deveria trabalhar dessa forma. Se não, No trecho de código ** success : function(data){ console.log("oi"); } ** Nesse callback de retorno do ajax você tem o retorno do server, que suponho que tenha o token, além do login e da senha que você enviou, dá pra armazenar tudo no localStorage se quiser nesse momento. Commented 8/02/2018 às 18:26
  • Entendi Vinicius, porem para armazenar o token eu preciso fornecer um login e password. var account = { grant_type: "password", login : "", senha : "" }; A ideia e eu capturar esse login e senha digitados em um input qualquer dinamicamente e armazenar para eu obter o token normalmente apos isso. Commented 20/02/2018 às 18:29
  • Se dentro dessa função myFunction você já consegue obter o usuário e senha, e nesse ponto você armazenar no localStorage, você pode obter as informações do localStorage depois quando quiser, com window.localStorage.getItem, mesmo se a tela der refresh. Resumindo: em myFunction() você define as variáveis no localStorage, e na função auth(), você as obtém, para montar o objeto account e fazer a sua requisição de autenticação. Commented 20/02/2018 às 21:42
  • Ja consegui fazer o problema e que no localstorage eu nao consigo trazer as informacoes para outros servidores, e na questao ai, estou fazendo isso em uma extensao. Commented 21/02/2018 às 18:01
0

A ideia seria uma extensao para auxiliar um sistema em Angular, onde eu puxo informacoes de um servidor x e uso essas informacoes para otimizar logins automaticos em urls z v y.

Utilizei uma funcao especifica da documentacao da google.storage que seria um pouco diferente do localstorage https://developer.chrome.com/extensions/storage Com localstorage nao seria possivel, pois como ja diz é local, eu nao conseguiria utilizar ele para autenticar e fornecer o token para puxar os logins e passwords armazenados em um servidor para acessar automatico as urls z v y.

Exemplo de GET :

   tToken(function(d){
            $.ajax({
                  type: "GET"
                , method : "GET"
                , url : globalauth
                , contentType : "application/json"
                , dataType : "json"
                , Authorization : "Bearer" + d

Abaixo esta apenas a funcao que capta dinamicamente o que e digitado autentica o token para realizar posteriormente um ajax de GET dessas informacoes para puxar os dados do banco.

 function tToken(callback){
    var b;
    var a;
    chrome.storage.local.get('login', function (result) {
              b = result.login;
              console.log(b); 
          chrome.storage.local.get('password', function (result) {
              a = result.password; 

  var account = {
            grant_type: "password",
            login : b,
            senha : a
        };

  var jsonAccount = JSON.stringify(account);
  console.log(jsonAccount);
        $.ajax({
                      type: "POST" 
                    , method : "POST"
                    , url : globalext
                    , contentType : "application/json"
                    , dataType : "json"
                    , data: jsonAccount
                    ,success: function(data){
                        var obs1 = JSON.stringify(data);
                        var newa = JSON.parse(obs1);  
                        var key = newa.data["token"];
                        callback(key);
                    },beforeSend : function(request){
                    request.setRequestHeader('Content-Type', 'application/json');                   },
    }).done(function(response, status){
    }).fail(function(error){
      console.log(error);
    }).always(function(response, status){
    });
    });
    });
  }

function save(){
    var userElement = document.getElementsByName('username');
    var passwordElement = document.getElementsByName('password');
    var channels = $(userElement).val();
    var keywords = $(passwordElement).val();

    chrome.storage.local.set({'login': channels});
    chrome.storage.local.set({'password': keywords});
    console.log(keywords);
    console.log(channels);
}


var classname = document.getElementsByClassName("buttonlogin");

 Array.from(classname).forEach(function(element) {
           element.addEventListener('click', save);
      });

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 .