관리 메뉴

HAMA 블로그

IoT 를 위한 하이브리드앱 개발 (5) - 고급 로그인 시스템 본문

하이브리드앱

IoT 를 위한 하이브리드앱 개발 (5) - 고급 로그인 시스템

[하마] 이승현 (wowlsh93@gmail.com) 2015. 6. 1. 18:19


1. Ionic App 안의 AngularJS 에서 토큰기반 인증 개발하기 

 

여기서 알아볼것은 아래와 같다. 

  • 사용자 로그인 및 유져세션 저장  ( 토큰 기반 인증 !)
  • 인증 상태 와 사용자롤 기반의 라우트 보호 
  • 인가안된 요청 알림 및 새로운  로그인 요청

여기의 예제구현은 Ionic App 이지만  많은 부분의 로직은 AngularJS 거나 마찬가지다.  따라서  사용자인증시스템을 AngularJS 에 넣던 하이브리앱에 적용하던 상관없이 이 기사가 유용할것이다. 함 즐겨볼까~?

(굉장히 많은 코드가 나열될것인데  이 기사 끝에  완전한 프로젝트에 대한 링크가 있다.)


프로젝트 초기 setup 하기!!

언급했듯이 , 우리는 아이오닉 프로젝트를 만들거고, 옵션은 blank (tabs 하지말고) 로 하자. 
이미 bower 는 인스톨됬다고 치고 , 아래  커맨드라인을 실행시켜서 프로젝트를 만들자.

(bower 는 npm install bower 하면 설치할수있다) 

만들어진 프로젝트에서   www/js/  폴더를 찾아서 다음 세가지 파일을 만들자  controllers.jsservices.js and constants.js.

index.html 의 헤더에 다음 파일들을 포함하고

추가적으로 app.js 에 ngMockE2E 디펜던스 추가.

다음으로  www/templates/  를 만들고 안에  아래 html 파일  추가 

login.htmlmain.htmldashboard.htmlpublic.htmladmin.html.

이쯤하면 일단  초기세팅은 됬고 , 이제 인증 코딩을 시작해보자~


공통 상수 만들기!!

일단 우리는 어디에서나 접근할수있는 몇가지 상수를 정의해야한다. 이것들은 이벤트나 권한(롤)을
위한 문자열 정의로서  constants.js 파일에 다음을 넣자.


뷰 만들기 !!

우리가 만들 앱은 로그인뷰 와 3개의 탭으로 구성된 간단한 모양새인데 , 탭들은 유저인증에 의해 보호되고있다.
로그인을 하지않고서는 저 탭들의 뷰에 라우팅 할 수 없다는 말이다. (기사 마지막쯤 하이라이트가 나온다.) 

index.html 을 열고 다음과 같이 변경하자.

우리는 라우트로 연결된 뷰를 보여줄수있는 네이게이션 뷰와 바를 가지고있다.  
각 뷰와 연결될 컨트롤러들을 controller.js 파일을 열어서 다음과 같이 추가한다.

login 뷰는 다음과 같이 2개의 입력필드를 가질것이고 로그인 액션을 위한 하나의 버튼을 갖는다.
login.html 을 열어서 아래와 같이 코딩해넣자.

다음 뷰는 탭들의 추상뷰인데 , 3개의 탭들은 라우트로 연결되있고 ,
nav-view 안에 연결된 뷰를 로드할것이다. main.html 을 열어서 아래와 같이 추가해넣자.

사용자가 로그인했을때 보여지는 첫뷰는 대시보드이다. 이 뷰는 환영인사 및 로그아웃버튼과 3개의 다른 요청버튼들로 
이루어져있다. 화면은 보이겠지만 모든 액션은 해당 컨트롤러와 서비스가 만들어지기전까진 작동하지 않을꺼다. 
dashboard.html 을 열고 아래와 같이 코딩해보자.

public.html 을 열어서 아래와 같이 코딩하자. 참고로 public 과 위의 dashboard 는 사용자 롤 기반.

마지막으로 admin.html 를 아래와 같이 코딩해넣자. 참고로 이것은 관리자 권한을 가지고있다.

아직까지는 실제 인증에 대한 어떠한 코드도 들어가있지 않다. 

기본 라우팅 구현 

우리 데모앱을 위한 라우팅은 매우 간단하다. 위에서 본것처럼 로그인뷰 및 3개의 탭뷰 정도?
여기서 특별한것은 37~39라인의 admin 탭과 연결된 데이타오브젝트정도인데, 이것은 USER_ROLES.admin 인 유저만 접근할수있게 한다. 지금 당장은 작동하지 않을건데 먼저 app.js 에 다음을 추가하자.   


angular-mocks 을 추가했고 , 그에 따라 하나 다른 기능을 app.js 에 추가해야한다.

이것은  $httpBackend  mock  기본 세팅이다.  우리의 일반 라우팅 요청은 통과시키고 (Ajax 요청에만 반응하도록) 
우리는 우리의 뷰에 접근할수있다. 지금 한번 serve / deploy 해보면 3개의 탭을 가지고 로그인된 모을 볼수있다. 
/main/dash  fallback 라우트 되어있다.  

user-authentication-interface

여기까지는 인증에 관해 별다른 코드가 없다. 자 진짜 사용자 인증에 관해서 알아보자. !!


사용자 인증 서비스 !!

지금 우리는 3개의 탭을 가진 탭바 인터페이스를 가지고있다. 하나는 데이터 오브젝트를 가지고있는데 그것은 오직 admin 롤을 가진 사용자한테만 허가되있다. 우리는 현재  다른 어떤 사용자 권한 서비스도 가지고 있지 않다.

추가해보자!! 

인증은 사용자가 로그인을 시작했을때 시작된다. 우리는 사용자 이름과 비밀번호를 획득할테고 , 서버로부터 토큰을
받는데 사용된다.  우리는 사용자 신용서를 로컬 스토리지내부에 저장할것이다.  우리는 사용자 정보 (이름 및 롤) 를 가지고있는 신용서를 사용할것이다. 중요한것은  $http.defaults.headers.common['X-Auth-Token']  을  설정한다는 것이다. 이 얘기는 앞으로 우리가 서버에 요청하는 모든것은 이 토큰 정보를 가지고 사인된다는 의미이다. (서버는 이것을 활용하는 로직을 만들어야겠지~) 

서비스의 로그아웃은 모든것을 되돌려 놓는데  (토큰을 삭제하고 세팅 초기화) destroyUserCredentials 를 호출한다.
보안된 기능을 호출한다던가, 라우팅할때 다음 2가지 함수에 의해서 검증되는데 

isAuthenticated
이것은 기본 인증 상태이다. 네가 사용자 권한을 만들때 항상 필요하다. 현재 유저가 로그인되었는지 아닌지 알려준다.

isAuthorized
이것은 특정한 라우트나 행동을 막기위한 허가 상태를 나타내는데 
USER_ROLES.public 를 가지면 이것에 알맞는 페이지나 행동만 할수있음을 나타낸다.

마지막으로 우리의 서비스가 만들어질때마다 자동적으로 로컬 스토리지로 부터 토큰을 가져와서 loadUserCredentials 가 호출된다. 결국 앱이 실행(?)될때, 저장소에 토큰이 존재하면 자동적으로 인증처리가되고 기능을 사용할수있게 된다.

services.js 에 다음을 추가해보자!

우리는 만약 우리가 요청을 비정상적인  토큰으로 요청한다면 우리는 경고를 줄것인데  그 기능을 위해서는
"인터셉터"가 필요하다. 인터셉터는 response 에러를 알려줄거고 우리의 앱에 브로드캐스트 할것이다.
services.js 에 다음을 추가하자.! 

우리가 서버에 요청할때마다 401 이나 403 을 리턴하는데 우리는 그 메세지를 브로드캐스트한다. 
우리는 어떻게 우리가 이런 메세지를 핸들링할수있는지 아래 컨트롤러에 관련 기능을 추가할때 볼수있다.


컨트롤러 만들기!


우리는 AppCtrl 을 추가할것이고 , 그것은 우리가 브로드캐스트한 모든 이벤트를 받고 핸들링 하는걸 보여준다. 
controllers.js 에 다음을 추가하자.  ($on 은 리스너이다)

인가되지 않았다는  이벤트를 받거나 허가되지 않은 요청에 대해서 사용자에게 알린다.
만약 우리가 인증되지 않았다는  이벤트를 받으면 우리는 AuthService.logout() 을 호출하고 로그인페이지로 바꾼다.
우리는 현재 사용자를 세팅하기위한  스코프평션을 가지는데 이것은 모든 자식 스코프에서 후에 사용될수있다.

다음은 LoginCtrl 이다. 우리의 로그인페이지와 연결되는데 로그인폼의 데이터와 액션과  연동된것을 볼수있다.
controllers.js 파일에 다시한번 추가하자.