• Skip to content
  • Skip to primary sidebar
  • Skip to footer

R Andrade

Blog do Paulo Roberto - Desenvolvimento e arquitetura

Trabalhando num Front-End com tokens de acesso na WebApi

6 de julho de 2016 by Paulo Roberto Ramos de Andrade Leave a Comment

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

Filed Under: ASP.NET Web Api, JavaScript, Todas as postagens Tagged With: autenticação, autorização, front-end, javascript, tokens, webapi

Publicidade

Primary Sidebar

Quem sou eu

Meu nome é Paulo Roberto e tenho 32 anos, com 12 anos de experiência na área. Sou desenvolvedor, autodidata, iniciante nas artes da arquitetura de softwares, eterno interessado em aprender mais técnicas e tecnologias e também interessado em documentar e repassar o pouco que já sei.

Acompanhe o blog nas redes sociais

  • Email
  • Facebook
  • Github
  • Linkedin
  • Twitter

Publicidade

O que foi mais lido no último mês

  • Tokens de acesso: Primeiro passo para proteger WebApis
  • Depurando aplicações Xamarin.Forms diretamente um smartphone com Android
  • CORS: O que é isso e como ativá-lo numa Web API
  • Convertendo tabelas HTML em arquivos Excel no Front End

Categorias

Arquitetura de Sistemas ASP.NET MVC ASP.NET Web Api Autenticação e Autorização C# Cors Dicas e Truques Entity Framework JavaScript Mobile N Camadas OWIN Pessoal Segurança Sem categoria Sites que ajudam Softwares Todas as postagens Unit Testing Virtualização Xamarin Xaml

Footer

Pesquisar

Arquivo do blog

Copyright © 2018 · Magazine Pro on Genesis Framework · WordPress · Log in