Meteor custom account 강좌 5
8. 다른 서비스 api를 통한 로그인(facebook, google, twitter, kakao)
이제 meteor 사용자 정의 계정(coustom account) 강좌의 마지막 챕터에 대해서 설명드리도록 하겠습니다. 이챕터에서는 각종 SNS 및 외부 서비스를 통한 로그인 연동을 구현해보도록 하겠습니다. 저번 강좌에도 조금 말씀드렸지만 이 강좌를 한번 써볼까 라고 생각한 것이 이 외부 서비스 연동을 테스트 해보면서 였습니다. 처음에 조금 헤매이기는 했지만, 몇몇 세팅만 익히면 이런 외부 소셜 로그인이 척척 붙어서 작동하는 모습은 정말 Meteor라는 플랫폼이 주는 생산성이 무엇인지를 잘 보여준다고 생각됩니다. 일단 facebook부터 연동을 해볼 텐데요. 나머지 기능들은 이 facebook API 인증과 거의 같은 구조라고 보시면 되겠습니다.
그럼 이제 시작해 보겠습니다. ^^
8.1. facebook API 인증
처음으로 연동해볼 API는 facebook이 되겠습니다. 우선 페이스북 개발자센터(developers.facebook.com/apps) 에 앱을 등록해 주셔야 합니다. 그리고 여기서 여기서 앱ID, 앱 시크릿 코드를 사용해 진행되니 따로 기록해 두시면 좋습니다.
다음으로 다음 패키지를 설치해야 합니다. service-configuration는 위에서 말씀드린 앱ID나 시크릿키 등을 등록하는 것을 조금 편하게 해주는 config가 되겠습니다. 다음으로 accounts-facebook는 facebook api를 사용할 수 있게 해주는 패키지가 되겠습니다.
# 설치 패키지
meteor add service-configuration
meteor add accounts-facebook
처음으로 할일은 다음을 참고하여 사용할 서비스의 키를 등록하는 것입니다. Meteor.startup(function() {} 부분의 페이스북 옵션을 작성해주시면 되겠습니다. 여기서 appId는 개발자 페이지의 앱 ID를 secret은 앱 시크릿 코드 를 입력해 주시면 되겠습니다.
이제 실제 액션을 통해서 페이스북 로그인이 일어나도록 만들어 보겠습니다. login.js에 아래 소스를 참고로 ‘click button[name=facebook]’ (evt, tmpl){} 부분에 대한 부분을 입력해 주세요. 클릭을 하면 Meteor.loginWithFacebook(function(err) 을 호출하게 됩니다. 간단하죠 ^^
마지막은 페이스북에서 가입 정보를 받아와 넣어주는 것입니다. 실제로 가입아이디(email) 등은 기본 user 객체에 저장되지만 그 외의 정보(성, 이름, 성별 등등)과 같은 정보의 경우 user.profile 객체 아래에 정리해 두면 됩니다. 참고로 각 서비스 별로 넘겨주는 가입자 정보는 다릅니다. 그래서 사이트에 맞게 정리해 주셔야만 합니다. facebook의 경우 first_name으로 넘어오는 값이 google은 given_name 으로 넘어 오는 것을 볼 수 있습니다. 각각의 서비스에서 제공하는 API가 어떤 형태로 개발자 문서 등을 통해서 꼭 확인하시고 필요한 값들을 정의해 사용하시면 되겠습니다.
참고로 로그인 성공시 기본으로 제공되는 값들은 각 로그인 콜랙션의 services 아래에서 확인이 가능합니다. 이 부분을 가공해서 profile에 정형화 해서 저장하는 작업이 아래 코드 입니다.
이제 페이스북버튼을 클릭해 보겠습니다. 정상적으로 Meteor.loginWithFacebook가 작동하여 팝업창이 뜨고 정확한 정보로 로그인을 하면 정상적으로 로그인 되는 것을 볼 수 있습니다.
이 과정을 요약하면 아래와 같습니다.
1단계. 연동할 서비스의 개발자 센터에서 서비스 등록 후 키값 받기
2단계. ServiceConfiguration.configurations에 키 등록
3단계. 소셜 버튼 클릭시 Meteor.loginWithFacebook() 호출
4단계. Accounts.onCreateUser()시 user.profile 에 사용자 정보 입력
나머지도 위의 4가지 과정을 똑같이 반복하면 됩니다. 그럼 나머지 서비스도 연동해보도록 하겠습니다.
8.2. google API 인증
구글도 개발자 센터(https://console.cloud.google.com/)에 가입하고 프로젝트를 만든 다음 키 값을 받아오면 됩니다. 클라이언트 ID와 클라이언트 보안 비밀이 사용됩니다. google의 경우 google cloud platform 에서 API 관리자로 들어가 발급을 할 수 있는데요. 먼가 좀 경로가 복잡하긴 하니 아래 이미지를 참고로 위치를 찾아가시면 도움이 되실 것 같습니다.
다음 패키지를 설치해주세요.
#설치 패키지
meteor add accounts-google
다음은 main.js configuration에 개발자 센터에서 받은 키 값을 등록 합니다.
로그인 페이지에서 google버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다.
google로 부터 받아온 값을 profile에 등록하는 설정을 해줍니다.
자이제 google로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다.
8.3. twitter API 인증
다음은 twitter 입니다. 과정은 역시 비슷합니다.
처음으로 할일은 개발자 사이트에서 키 값을 받는것 입니다. 트위터에서 사용하는 값들은 Consumer Key(API Key)와 Consumer Secret(API Secret)가 되겠습니다.
다음 패키지를 설치해주세요.
# 설치 패키지
meteor add accounts-twitter
다음은 main.js configuration에 개발자 센터에서 받은 키 값을 등록 합니다.
로그인 페이지에서 twitter버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다.
twitter 부터 받아온 값을 profile에 등록하는 설정을 해줍니다.
자이제 twitter로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다.
8.4. kakao API 인증
이제 마지막으로 kakao API연동을 해보겠습니다. 한국에서 많이 사용하는 kakao의 경우 한국 개발자 분이 패키지를 만들어 둔 상태입니다. 덕분에 kakao도 쉽게 연동할 수 있습니다. ^^
처음으로 할일은 개발자 사이트에서 키 값을 받는것 입니다. kakao에서 사용하는 값들은 REST API키가 되겠습니다. 한가지 아쉬운 점은 현재 패키지의 경우 Client Secret설정을 활성화 하면 작동을 안한다는 점입니다. 그래서 다른 서비스와 다르게 secret을 아직까지 사용할 수 없습니다.
다음 패키지를 설치해주세요.
# 설치 패키지
meteor add spectrum:accounts-kakao
다음은 main.js configuration에 개발자 센터에서 받은 키 값을 등록 합니다.
로그인 페이지에서 kakao버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다.
kakao로부터 받아온 값을 profile에 등록하는 설정을 해줍니다.
이제 kakao로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다. kakao의 경우 api로 받을 수 있는 부분이 매우 제한적인 것을 볼 수 있습니다. 이부분은 개발자 페이지에서 따로 사용자가 정의 하여 항목을 늘릴 수 있으니 이부분은 kakao 개발자 페이지를 참고하여 개발하시면 될 것 같습니다.
9. 기타 사항
사실 Meteor를 이용해 개발을 할 경우 강좌에서와 같이 버튼 하나하나를 만들어 사용하지 않아도 됩니다. 기본적으로 제공하는 account를 이용하면 다음 패키지를 추가 하는 것으로 회원가입 로그인 등의 많은 기능을 바로 사용할 수도 있습니다. 패키지 추가 후 템플릿에 아래와 같이 loginButtons 만 추가하면 됩니다.
# 설치 패키지
meteor add accounts-ui
이부분에 대한 문서는 아래 링크 페이지에 나와있으니 참고 하시면 되겠습니다.
이상으로 Meteor custom account 관련 강좌를 마치겠습니다. Meteor 초보 개발자 분들에게 조금이나마 도움이 되었으면 좋겠네요. 개인적으로 느낀 meteor의 가장 큰 매력은 아마도 생산성이 아닐까 생각합니다. 이미 다양한 패키지(강좌에서는 facebook, google 등 다양한 서비스의 인증 연동)를 바로 사용할 수 있고, 백앤드와 프론트앤드를 동시에 개발 할 수 있으며, 심지어 프론트엔드의 빌드머신? 으로 사용하시는 분들도 있는 것으로 알고 있습니다. 하지만 아직 국내에는 meteor를 사용하는 사람이 그리 많지 않아 참 많이 아쉽다는 생각이 듭니다. 여튼 제 부족한 강좌가 조금이나마 meteor에 대한 호기심을 자극한다면 개인적으로 만족할 것 같습니다. 조만간 다른 강좌를 통해서 또 뵙겠습니다. ^^
# 소스코드 링크
