O oauth 2.0 é um padrão de autenticação utilizado por muitas aplicações como por exemplo pelo facebook e pelo google.

Muitas linguagens podem utilizar este tipo de autenticação para liberar acesso a aplicações de front-end para consumirem serviços, um exemplo disso é o spring cloud que utiliza também o oauth 2.0 para permitir acesso aos recursos dos micro-services.

Mas neste artigo vamos nós deter no client em Vue.js. Neste iremos mostrar um exemplo de autenticação utilizando o VueResource com o $http para as chamadas de backend.

Vue.js autenticando em backend com oauth 2.0

Para este exemplo considere o formulário:

<form action="/login" method="POST" @submit.prevent="onSubmit">

	<ui-textbox floating-label label="Usuário" placeholder="Informe seu usuário" v-model="usuario">
	</ui-textbox>

	<ui-textbox floating-label label="Senha" placeholder="Informe sua senha" v-model="senha" type="password">
	 </ui-textbox>

	<ui-button color="primary">LOGIN</ui-button>
</form>

Neste formulário estamos utilizando os componentes do Keen UI disponível no github.

Note que temos um formulário comun com um campo para usuário e outro para a senha, e apenas um botão para fazer o submit, que dispara o método onSubmit.

No método onSubmit é onde faremos o login propriamente dito, veja o código deste método:

export default {

    // [...]

    data() {
        return {
            usuario : '',
            senha : ''
        }
    },
    methods : {
        onSubmit() {

            var formData = new FormData();
            formData.append('username', this.usuario);
            formData.append('password', this.senha);
            formData.append('grant_type', 'password');

            this.$http.post('http://localhost:28080/oauth/token', formData, {
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded',
                    'Authorization':'Basic YXBwOmFwcA=='
                }
            })
            .then((response) => {

                    localStorage.setItem('authorization', JSON.stringify(response.body.access_token));

                    // ir para a home do sistema
                    //location.href = '/index';
                    this.$router.push({name: 'index'});
                }, err => {
                    console.log("erro ao realizar o login");
                }
            );
        }

        // [...]
    }
}

Explicando o Código do método onSubmit()

Em data temos apenas os campos que fazem o data binding com os campos da tela, ou seja, receberam os valores de usuário e senha correspondente ao usuário que irá logar no sistema.

Nos métodos deixamos apenas o onSubmit que será chamado ao fazer o login no sistema, o qual tem toda a lógica envolvida na autenticação. Para explicar o código vamos dividir em subtópicos:

Parametros da request

As linhas abaixo são responsáveis por preparar os valores que serão enviados via post, enviando o username, password e o grant_type.

var formData = new FormData();
formData.append('username', this.usuario);
formData.append('password', this.senha);
formData.append('grant_type', 'password');

Os valores this.usuario e this.senha são os valores de usuário e senha.

E estes valores são passados no segundo parâmetro do método post.

Headers da request

Dois valores são necessários no header para que o servidor receba corretamente as requisições, no Vue.js podemos passar os headers no terceiro parâmetro do método post.

headers: {
	'Content-Type':'application/x-www-form-urlencoded',
	'Authorization':'Basic YXBwOmFwcA=='
}

Os parâmetros dos headers são o Content-Type que indica que serão enviados os parâmetros como se fosse um formulário e o Authorization que possúi o valor Basic YXBwOmFwcA== que corresponde ao usuário e senha da aplicação no servidor de oauth, no meu caso app/app, para gerar este hash utilizei o código java abaixo:

public static void main(String args[]) {
	String authorization = new BASE64Encoder().encode("app:app".getBytes());
	System.out.println( authorization );
}

Note que o código gera apenas um Base 64 do usuário e senha separados por :.

Tendo entendido isso o resto corresponde ao retorno que foi obtido do servidor e o tratamento da aplicação sobre o que foi obtido.

Em caso de dúvidas deixe nos comentários.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.