관리 메뉴

HAMA 블로그

IoT 를 위한 하이브리드앱 개발 (4) - 로그인 시스템 만들기 본문

하이브리드앱

IoT 를 위한 하이브리드앱 개발 (4) - 로그인 시스템 만들기

[하마] 이승현 (wowlsh93@gmail.com) 2015. 5. 28. 17:14

로그인 시스템 만들기  (맛보기 버전) 

레퍼런스

https://github.com/saimon24/devdactic-ionic_login

http://devdactic.com/user-auth-angularjs-ionic/



클라이언트  구현  


// app.js 에서 login 상태 설정 

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('login', {

      url: '/login',

      templateUrl: 'templates/login.html',

      controller: 'LoginCtrl'

  })


// template 에 login.html 추가  

<ion-view view-title="Login" name="login-view">

  <ion-content class="padding">

      <div class="list list-inset">

          <label class="item item-input">

              <input type="text" placeholder="Username" ng-model="data.username">

          </label>

          <label class="item item-input">

              <input type="password" placeholder="Password" ng-model="data.password">

          </label>

      </div>

      <button class="button button-block button-calm" ng-click="login()">Login</button>

  </ion-content>

</ion-view>



// 컨트롤러에서 login 함수 호출  ,  LoginService 를 DI 받고 있으며, 호출 성공,실패에 대한 콜백함수 등록되있다.

angular.module('starter.controllers', [])

.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {

    $scope.data = {};

    $scope.login = function() {

        LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {

            $state.go('tab.dash');

        }).error(function(data) {

            var alertPopup = $ionicPopup.alert({

                title: 'Login failed!',

                template: 'Please check your credentials!'

            });

        });

    }

})



// 서비스에서 ajax 를 통해서 서버에 로그인 호출 

.service('LoginService', function($q, $http) {

    return {

        loginUser: function(name, pw) {

            var deferred = $q.defer();

            var promise = deferred.promise;  // 프라미스 객체가져와서 

             // Ajax 호출 : 프라미스 객체 반환됨.

            var reqPromice = $http.post('http://192.168.1.191:8080/login', {username: name, password: pw});

     

 // 서버 로그인 호출  성공시    

     reqPromice.success(function(data){

                console.info("login Success !");

                deferred.resolve('Welcome ' + name + '!');  // resolve 를 호출하여 promise 객체의 success 실행

             });

             

           // 서버 로그인 호출 실패시 

            reqPromice.error(function(data){

               console.info("login fail !");

               deferred.reject('Wrong credentials.');                

            });


            promise.success = function(fn) {

                promise.then(fn);  // 서비스를 호출하는쪽에서 등록한 콜백함수를 호출해줌. 

                return promise;

            }

            promise.error = function(fn) {

                promise.then(null, fn);

                return promise;

            }

            return promise;

        }

    }

})



서버구축 


인증서버는 Node 로 구축한다.  Node 는 1편에서 설치했다. 

여기서는 Node 를 좀더 편하게 웹서버로서 사용가능하게 해주는 express 모듈을 설치해본다. 아래와 같이 설치하라. 

(여기서는 PACKAGE.JSON  (프로젝트  패키지 관리 파일)  를 활용하지 않는다) 


위처럼 다음 모듈도 설치한다.  

body-parser

cookie-parser

express-session


서버 실행은 다음과 같다. 

node run express_auth_session.js


이제 서버 코드를 살펴보자 

// 필요한 모듈을 가져온다. 

var express = require('express');

var bodyParser = require('body-parser');

var cookieParser = require('cookie-parser');

var session = require('express-session');

var crypto = require('crypto');


// 비밀전호를 해쉬화하고 문자열로 반환해준다.

function hashPW(pwd){

  return crypto.createHash('sha256').update(pwd).

         digest('base64').toString();

}


// express 모듈 설정

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

app.use(cookieParser('MAGICString'));

app.use(session());


// 세션에 사용자가 설정되있다면 REST 호출 허용한다.

app.get('/restricted', function(req, res){

  if (req.session.user) {

        ...

  } else {

      req.session.error = 'Access denied!';

      res.send(200, {

             message: 'Acess denied ';

        });    

  }

});


//  로그아웃을 호출하면 세션에서 삭제해준다.

app.get('/logout', function(req, res){

  req.session.destroy(function(){

    res.send(200, {

     message: 'loggedOut sucess'

    });    

  });

});


//  로그인 동작 

app.post('/login', function(req, res){

  if (req.body.password === "mypass"){// 비밀번호 확인 , body-parser 이용 req.body 사용.

    console.info("success login");

   

    req.session.regenerate(function(){

      req.session.user = req.body.username;

      req.session.success = 'Authenticated as ' + req.body.username;

    });


    res.send(200, {

     message: 'loggedIn sucess'

    });    


  } else {

    console.info("success fail");

    req.session.regenerate(function(){

      req.session.error = 'Authentication failed.';

    });


    res.send(401, {

       message: 'loggedIn fail'

      });    


  }

});

app.listen(8080);  // express 실행 ( 8080번 포트로 ) 



여기까지하고 테스트해보면 

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8090' is therefore not allowed access.    

이건 동일 근원 법칙을 어긋나서 그런데 간단히 말해서  rest 서비스를 요청할때 이곳 저곳 서버에 요청할수 없는걸 말한다. 

(현재 페이지가 읽혀진 서버에만 요청가능)  해결하는 가장 쉬운 node  방법은 npm install cors 을 통해 모듈을 다운받은후에

var cors = require('cors');

var app = express();

app.use(cors());

이렇게 설정해두는것이다. ( 스프링 REST  서버도 마찬가지고 대부분 쉽게 해결하는 방법이 있다) 


Comments