6

Em um app utilizando AngularJS e Ionic, qual a melhor forma de fazer autenticação em uma API? Faço a verificação de login em todas as telas ou utilizo algum mecanismo de sessão?

Imagino que fazer autenticação em todas as controllers talvez consuma dados demais... Qual o melhor caminho?

2 Respostas 2

5

O ideal é utilizar APIs que suportam OAuth 2, você então realiza os procedimentos iniciais para obter o bearer token e o armazena em um cookie para ser utilizado em toda requisição à API (ou pelo menos aos endpoints que requerem essa autenticação). Vou te dar um exemplo de um service que estou utilizando em uma aplicação para realizar todos os procedimentos autenticação com uma API que faz uso do OAuth 2.

Aqui está o código do service:

(function () {
    'use strict';

    angular
        .module('zigforumApp')
        .service('users', users);

    users.$inject = ['$http', '$cookies', 'TOKEN_URL'];

    function users($http, $cookies, TOKEN_URL) {
        var sv = this;

        function NoAuthenticationException(message) {
            this.name = 'AuthenticationRequired';
            this.message = message;
        }

        function AuthenticationExpiredException(message) {
            this.name = 'AuthenticationExpired';
            this.message = message;
        }

        function AuthenticationRetrievalException(message) {
            this.name = 'AuthenticationRetrieval';
            this.message = message;
        }

        sv.userData = {
            isAuthenticated: false,
            username: '',
            bearerToken: '',
            expirationDate: null
        };

        function isAuthenticationExpired(expirationDate) {
            var now = new Date();
            expirationDate = new Date(expirationDate);

            if (expirationDate - now > 0) {
                return false;
            } else {
                return true;
            }
        }

        function saveData() {
            removeData();
            $cookies.putObject('auth_data', sv.userData);
        }

        function removeData() {
            $cookies.remove('auth_data');
        }

        function retrieveSavedData() {
            var savedData = $cookies.getObject('auth_data');

            if (typeof savedData === 'undefined') {
                throw new AuthenticationRetrievalException('No authentication data exists');
            } else if (isAuthenticationExpired(savedData.expirationDate)) {
                throw new AuthenticationExpiredException('Authentication token has already expired');
            } else {
                sv.userData = savedData;
                setHttpAuthHeader();
            }
        }

        function clearUserData() {
            sv.userData.isAuthenticated = false;
            sv.userData.username = '';
            sv.userData.bearerToken = '';
            sv.userData.expirationDate = null;
        }

        function setHttpAuthHeader() {
            $http.defaults.headers.common.Authorization = 'Bearer ' + sv.userData.bearerToken;
        }

        this.isAuthenticated = function () {
            if (!(sv.userData.isAuthenticated && !isAuthenticationExpired(sv.userData.expirationDate))) {
                try {
                    retrieveSavedData();
                } catch (e) {
                    return false;
                }
            }

            return true;
        };

        this.removeAuthentication = function () {
            removeData();
            clearUserData();
            $http.defaults.headers.common.Authorization = null;
        };

        this.authenticate = function (username, password, persistData, successCallback, errorCallback) {
            this.removeAuthentication();
            var config = {
                method: 'POST',
                url: TOKEN_URL,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: 'grant_type=password&username=' + username + '&password=' + password
            };

            $http(config)
                .success(function (data) {
                    sv.userData.isAuthenticated = true;
                    sv.userData.username = data.userName;
                    sv.userData.bearerToken = data.access_token;
                    sv.userData.expirationDate = new Date(data['.expires']);
                    setHttpAuthHeader();
                    if (persistData === true) {
                        saveData();
                    }
                    if (typeof successCallback === 'function') {
                        successCallback();
                    }
                })
                .error(function (data) {
                    if (typeof errorCallback === 'function') {
                        if (data && data.error_description) {
                            errorCallback(data.error_description);
                        } else {
                            errorCallback('Unable to contact server; please, try again later.');
                        }
                    }
                });
        };

        try {
            retrieveSavedData();
        } catch (e) { }
    }
})();

A função mais importante é a authenticate ela recebe os dados de login do usuário, faz uma requisição à API para obter o token, armazena o token em um cookie e para autenticar automaticamente todas as requisições que serão feitas daqui em diante ele adiciona esse token como header padrão.

Você pode utilizar esse service como base para montar o seu.

1
  • Boa @Zignd! Farei uma implementação utilizando OAuth2 e seguindo seu exemplo de código. Obrigado. Commented 8/02/2016 às 18:23
3

A melhor forma de fazer login com AngularJS é...

Não faça login com angularJS.

Sério. Sendo uma tecnologia que é executada no cliente, toda e qualquer regra de validação de credenciais (conexão a um endpoint para verificar usuário e senha, por exemplo) pode ser explorada por um usuário malicioso.

A melhor maneira, neste caso, envolveria delegar a responsabilidade de ações de sign-in e sign-out para outra parte da aplicação - no exemplo bem-dado por Zignd, esta tecnologia seria OAuth.

O resultado final de uma antenticação via OAuth é um token, que pode ser armazenado em LocalStorage ou em um cookie. Utilize este token para obter informações a respeito do usuário atualmente logado.

2
  • Certo @Ibotinelly, tenho uma autenticação em dois passos em uma api... Vou buscar implementar o padrão OAuth2. Obrigado. Commented 8/02/2016 às 18:19
  • 1
    @MaurílioNovais Não por isso - sinta-se à vontade para postar mais perguntas quando as dúvidas a respeito da implementação começarem a aparecer. Neste post (em inglês) são fornecidos vários links que podem ajudar nas suas pesquisas iniciais: stackoverflow.com/questions/29660828/…
    – OnoSendai
    Commented 8/02/2016 às 18:22

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 .