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