[Angular2 with TypeScript] 6. Google Login API

이번 포스트에서는 Angular 에서 구글 로그인을 구현해보도록 한다.

https://developers.google.com/identity/sign-in/web/sign-in

위 링크는 구글에서 제공하고 있는 로그인 API 이다.

내가 이 포스팅을 하는 이유는 자바스크립트에 대한 구글로그인 기능 구현은 아주 잘 나와있지만,
타입스크립트(앵귤라)에서 구현하는 것은 한국어 자료가 없기때문이다. 
특히 오늘 중점으로 볼 것은 다른 것보다도 this(현재 컨텍스트)를 어떻게 잡아두느냐이다. 

cannot read property 'router' of undefined

특히 인증과정을 거치고 라우터를 통해 인증관련 페이지로 보내려고하는데 저런 에러를 만난다면
이 포스트를 잘 찾아오셨다고 말씀드리고 싶다.
( 부족한 사람이 생각해낸 임시방편...이라도 도움이 된다면)


기본적인 구글로그인 기능구현은 위 문서에 잘 나와있으니 그것을 참고하도록 하자.

웹 어플리케이션을 위한 기본적인 클라이언트 아이디가 있다는 가정하에 바로 시작하도록 하겠다.

우리는 gapi라는 것을 통해 구글로그인을 구현 할 수가 있다. 물론 필수적으로 html 문서에는 ...!

87번째 줄과같이 구글 api에 대한 CDN이 들어가 있어야 사용할 수가 있을 것이다.



gapi.load(name,callback) 를 통해 우리가 사용하고자하는 구글 api를 활성화 시켜야 한다. 
첫번째 매개변수인 name은 여러 api중에 우리가 사용하고자하는 api이름을 기술하면 되고, 두번째 매개변수로 콜백함수를 넘겨주어야 한다.

auth2는 우리가 로그인을 위한 인증 api를 쓰겠다는 의미이다.  콜백 함수는 우리가 사용하고자 하는 api를 init 해주는 메소드를 쓰면 된다 .

gapi.auth2.init() 메소드는 사용하고자하는 인증 api에 특정 값들을 설정할 수가 있다. 보는 바와 같이 클라이언트 아이디와 쿠키정책, 그 범위를 지정할 수가 있다. 
참고.
https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2initparams


그 다음줄에서는 로그인 되었는지 안되어있는지를 확인해서 상태를 조정하는 로직을 적었다. 

타입스크립트는 자바스크립트의 호환이기때문에 우리가 알고있는 것처럼 사용해도 로그인 기능이 잘 구현된다. 내가 구현을 함에 있어서 가장 애를 먹었던 부분은 this의 범위였다. 

53번째 줄을 보면 that = this; 를 통해 현재 사용되고 있는 컨텍스트를 메소드 안의 변수에 담아 두었다. load 함수의 두번째 매개변수인 콜백함수 내에서는 this가 그 범위를 전혀 엉뚱한 곳에 잡아두기 때문에 내가 사용하고자 하는 클래스의 변수와 함수를 이용하기위해서는 저런 형태로 따로 변수에 담아 두어야 했다. 
특히 로그인이 되었는지 안되었는지를 감지하고, 변화에 따른 움직임을 줄 수 있는
68번째 줄의 auth2.isSignedIn.listen(callback) 사용함에 있어 이 this의 범위가 더욱 애매해진다. 

나는 현재 컴포넌트(this)를 통해 로그인이 감지되면 관련 페이지로 갈 수 있도록 router를 이용하고자 했지만 

cannot read property 'router' of undefined 

위의 에러를 쳐다볼수 밖에 없었다. 왜 못 읽을까 했더니 this의 범위가 해당 컴포넌트가 아니였던 것이다. 

보시다시피 전부 that을 통해 해당 컴포넌트의 라우터를 쓰고 있다. 

이 컴포넌트가 실행되는 순서를 보면 
ngAfterViewInit() {
   ...
   googleInit() {
   gapi.load(auth2, function() {
        ....
        auth2.isSignedIn.listen(that.signinChanged);
        }

   }

} 

ngAfterViewInit 훅을 통해 가동을 시키고 googleinit이 그 다음에 실행이되어지고 
gapi.load의 콜백함수를 이용해서 리스너를 붙여주고 있다. 
리스너 역시 콜백함수를 부르고 있기때문에

명시적으로 this를 잡아주지 않으면 필자가 만났던 에러를 똑같이 만나보게 될것이다.

해결책은 다음과 같다.

클래스 밖에 다가 전역변수를 설정해주는 것이다. 
auth2 변수같은 경우 역참조를 하고 있는데 이 인증관련 객체를 다른 컴포넌트에서도 쓰기 위함이다. 


스코프에 대한 해결책으로는 전역변수를 쓰는 방법밖에 생각해내지 못했는데 좀더 깔끔한 
코딩을 위해서 더 나은방법은 계속해서 모색해 나갈 것이다.