Olá pessoal! Tudo bem? Vamos falar mais um pouco sobre tokens de acesso? Depois de explicações detalhadas sobre tokens de acesso em três postagens (aqui, aqui e aqui), vamos agora ir para o Front-End – de forma bem simples, vamos aprender como criar um Front-End com jQuery que acessa uma WebApi com tokens de acesso.
Como sempre, fique à vontade para baixar o código fonte deste projeto para estudos. Como Back-End, eu estou usando o projeto básico de WebApi com tokens de acesso.
Basicamente eu fiz uma página de login usando jQuery e Bootstrap para ter um visual minimamente bonito. Aqui temos duas situações. O botão de Login envia nome de usuário e senha para o Back End e recebe uma mensagem de erro ou o token de acesso. Já o botão Obter informação faz uma requisição ao Back End passando o token de acesso e recebe a informação ou uma mensagem de erro.

Ambos as ações são feitas usando JavaScript. O botão de login (#btn_login) basicamente pega as informações nos campos de nome de usuário (#text_username) e senha (#text_password).
$("#btn_login").click(function(){ var username = $("#text_username").val(); var password = $("#text_password").val(); }
A comunicação com o BackEnd é uma chamada Ajax do jQuery, sem nenhum mistério. Note que o parâmetro url recebe exatamente o endereço de fornecimento do token do BackEnd. Lembra as variáveis que você deve passar para receber o token? Veja como eu montei um objeto com os parâmetros e estou passando-os em data.
$.ajax({ type: "POST", url: "http://localhost:55090/token", data: { "grant_type": "password", "username": username, "password": password, } });
Obviamente, você precisa configurar os parâmetros success e error com as funções que processarão o retorno dos dados. De forma bem simples, se o login foi feito com sucesso, o retorno será um objeto que tem o parâmetro access_token, que tem o token, claro! É esse token que precisamos guardar – note que eu estou usando a variável token para guardar o token de acesso.
$.ajax({ success: function(data) { token = data.access_token; console.log(data); }, error: function(data) { console.log(data); } });
Esta é a função de clique do botão Login completa:
var token = ""; $("#btn_login").click(function(){ var username = $("#text_username").val(); var password = $("#text_password").val(); $.ajax({ type: "POST", url: "http://localhost:55090/token", //aqui deve ser o endereco do backend data: { "grant_type": "password", "username": username, "password": password, }, success: function(data) { token = data.access_token; console.log(data); }, error: function(data) { console.log(data); } }); });
Agora vamos ver o funcionamento do botão Obter informação (#btn_get). Basicamente fazemos diretamente uma chamada Ajax para o endereço do BackEnd (veja a configuração em url). O segredo é como passamos o token na chamada.
Como o token deve ser passado como parâmetro do cabeçalho da requisição, criamos um objeto que é passado no parâmetro headers. A propriedade que queremos passar no cabeçalho é Authorization, e o valor é o texto Bearer com o token de acesso que já temos – veja o espaço entre os textos!
$.ajax({ type: "GET", url: "http://localhost:55090/api/teste", //aqui deve ser o endereco do backend headers: { "Authorization": "Bearer " + token } });
O processamento do retorno da Api, como esperado, é através das funções success e error. Note que, se uma chamada de WebApi retorna erro porque o token não foi reconhecido (token errado ou token vencido), a mensagem de erro não vem como um Json – eu tive que fazer a conversão usando a função parseJSON do jQuery para extrair a mensagem de erro.
$.ajax({ success: function(data) { console.log(data); }, error: function(data) { console.log($.parseJSON(data.responseText).Message); } });
Veja a função completa de clique do botão Obter Informação.
$("#btn_get").click(function(){ $.ajax({ type: "GET", url: "http://localhost:55090/api/teste", //aqui deve ser o endereco do backend headers: { "Authorization": "Bearer " + token }, success: function(data) { console.log(data); }, error: function(data) { console.log($.parseJSON(data.responseText).Message); } }); });
Com isso, conseguimos fazer uma WebApi com token de acesso e integrá-la num Front-End. Use o projeto deste artigo como base para seus estudos e implementações. Até a próxima!
[]’s
Paulo Roberto