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은 앱 시크릿 코드 를 입력해 주시면 되겠습니다.
server/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Set up login services
Meteor.startup(function() {
// 페이스북 옵션
ServiceConfiguration.configurations.remove({
service: "facebook"
});
ServiceConfiguration.configurations.insert({
service: "facebook",
appId: '발급받은 앱 ID',
secret: '발급받은 앱 시크릿 코드'
});
Accounts.config({
loginExpirationInDays: 1,
[아래 생략]
.
.
.
});
이제 실제 액션을 통해서 페이스북 로그인이 일어나도록 만들어 보겠습니다. login.js에 아래 소스를 참고로 'click button[name=facebook]' (evt, tmpl){} 부분에 대한 부분을 입력해 주세요. 클릭을 하면 Meteor.loginWithFacebook(function(err) 을 호출하게 됩니다. 간단하죠 ^^
client/login.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Template.login.events({
'click button[name=btn-singIn]' (evt, tmpl)
{
.
.
.
[중략]
.
.
.
return false;
},
'click button[name=facebook]' (evt, tmpl)
{
evt.preventDefault();
Meteor.loginWithFacebook(function(err)
{
if(!err)
{
FlowRouter.go('/');
console.log(currentUser);
}
else
{
console.log(err);
Bert.alert( err , 'danger', 'growl-top-right' );
}
});
}
마지막은 페이스북에서 가입 정보를 받아와 넣어주는 것입니다. 실제로 가입아이디(email) 등은 기본 user 객체에 저장되지만 그 외의 정보(성, 이름, 성별 등등)과 같은 정보의 경우 user.profile 객체 아래에 정리해 두면 됩니다. 참고로 각 서비스 별로 넘겨주는 가입자 정보는 다릅니다. 그래서 사이트에 맞게 정리해 주셔야만 합니다. facebook의 경우 first_name으로 넘어오는 값이 google은 given_name 으로 넘어 오는 것을 볼 수 있습니다. 각각의 서비스에서 제공하는 API가 어떤 형태로 개발자 문서 등을 통해서 꼭 확인하시고 필요한 값들을 정의해 사용하시면 되겠습니다.
server/accounts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//기타서비스(facebook 등) 으로 로그인시 profile정보를 따로 입력해줘야 함.
Accounts.onCreateUser(function (options, user) {
user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...
참고로 로그인 성공시 기본으로 제공되는 값들은 각 로그인 콜랙션의 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에 개발자 센터에서 받은 키 값을 등록 합니다.
server/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Set up login services
Meteor.startup(function() {
ServiceConfiguration.configurations.remove({
service: "facebook"
.
.
.
[위 생략]
// google 인증 API 설정
ServiceConfiguration.configurations.remove({
service: "google"
});
ServiceConfiguration.configurations.insert({
service: "google",
clientId: "발급받은 클라이언트 ID",
secret: '발급받은 클라이언트 보안 비밀',
loginStyle: "popup"
});
Accounts.config({
loginExpirationInDays: 1,
[아래 생략]
.
.
.
로그인 페이지에서 google버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다.
clinet/login.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Template.login.events({
'click button[name=btn-singIn]' (evt, tmpl)
{
.
.
.
[중략]
.
.
.
return false;
},
'click button[name=facebook]' (evt, tmpl)
{
...[중략]
},
// google 로그인 클릭 추가
'click button[name=google]' (evt, tmpl)
{
evt.preventDefault();
Meteor.loginWithGoogle(function(err)
{
if(!err)
{
FlowRouter.go('/');
}
else
{
console.log(err);
Bert.alert( err , 'danger', 'growl-top-right' );
}
});
}
google로 부터 받아온 값을 profile에 등록하는 설정을 해줍니다.
server/accounts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//기타서비스(facebook) 으로 로긴시 profile정보를 따로 입력해줘야 한다.
Accounts.onCreateUser(function (options, user) {
user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...
자이제 twitter로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다.
8.4. kakao API 인증
이제 마지막으로 kakao API연동을 해보겠습니다. 한국에서 많이 사용하는 kakao의 경우 한국 개발자 분이 패키지를 만들어 둔 상태입니다. 덕분에 kakao도 쉽게 연동할 수 있습니다. ^^
처음으로 할일은 개발자 사이트에서 키 값을 받는것 입니다. kakao에서 사용하는 값들은 REST API키가 되겠습니다. 한가지 아쉬운 점은 현재 패키지의 경우 Client Secret설정을 활성화 하면 작동을 안한다는 점입니다. 그래서 다른 서비스와 다르게 secret을 아직까지 사용할 수 없습니다.
다음 패키지를 설치해주세요.
설치 패키지 meteor add spectrum:accounts-kakao
다음은 main.js configuration에 개발자 센터에서 받은 키 값을 등록 합니다.
server/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Set up login services
Meteor.startup(function() {
ServiceConfiguration.configurations.remove({
service: "facebook"
.
.
.
[위 생략]
// kakao 인증 API 설정
ServiceConfiguration.configurations.remove({
service: "kakao"
});
ServiceConfiguration.configurations.insert({
service: "kakao",
clientId: "발급받은 REST API 키",
loginStyle: "popup"
});
[아래 생략]
.
.
.
Accounts.config({
loginExpirationInDays: 1,
로그인 페이지에서 kakao버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다.
clinet/login.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Template.login.events({
'click button[name=btn-singIn]' (evt, tmpl)
{
.
.
.
[중략]
.
.
.
return false;
},
'click button[name=facebook]' (evt, tmpl)
{
...[중략]
},
// kakao 로그인 클릭 추가
'click button[name=kakao]' (evt, tmpl)
{
evt.preventDefault();
Meteor.loginWithKakao(function(err)
{
if(!err)
{
FlowRouter.go('/');
}
else
{
console.log(err);
Bert.alert( err , 'danger', 'growl-top-right' );
}
});
}
kakao로부터 받아온 값을 profile에 등록하는 설정을 해줍니다.
server/accounts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//기타서비스(facebook) 으로 로긴시 profile정보를 따로 입력해줘야 한다.
Accounts.onCreateUser(function (options, user) {
user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...
// facebook profile 설정
if(user.services.facebook)
{
...[중략]
}
// kakap profile 설정
if(user.services.kakao)
{
user.emails = [
{
address: 'none',
verified: true
}
];
user.profile.serviceType = 'kakao';
user.username = user.profile.name;
user.profile.gender = '';
}
[아래 생략]
Meteor.setTimeout(function() {
.
.
.
이제 kakao로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다. kakao의 경우 api로 받을 수 있는 부분이 매우 제한적인 것을 볼 수 있습니다. 이부분은 개발자 페이지에서 따로 사용자가 정의 하여 항목을 늘릴 수 있으니 이부분은 kakao 개발자 페이지를 참고하여 개발하시면 될 것 같습니다.
9. 기타 사항
사실 Meteor를 이용해 개발을 할 경우 강좌에서와 같이 버튼 하나하나를 만들어 사용하지 않아도 됩니다. 기본적으로 제공하는 account를 이용하면 다음 패키지를 추가 하는 것으로 회원가입 로그인 등의 많은 기능을 바로 사용할 수도 있습니다. 패키지 추가 후 템플릿에 아래와 같이 loginButtons 만 추가하면 됩니다.
이상으로 Meteor custom account 관련 강좌를 마치겠습니다. Meteor 초보 개발자 분들에게 조금이나마 도움이 되었으면 좋겠네요. 개인적으로 느낀 meteor의 가장 큰 매력은 아마도 생산성이 아닐까 생각합니다. 이미 다양한 패키지(강좌에서는 facebook, google 등 다양한 서비스의 인증 연동)를 바로 사용할 수 있고, 백앤드와 프론트앤드를 동시에 개발 할 수 있으며, 심지어 프론트엔드의 빌드머신? 으로 사용하시는 분들도 있는 것으로 알고 있습니다. 하지만 아직 국내에는 meteor를 사용하는 사람이 그리 많지 않아 참 많이 아쉽다는 생각이 듭니다. 여튼 제 부족한 강좌가 조금이나마 meteor에 대한 호기심을 자극한다면 개인적으로 만족할 것 같습니다. 조만간 다른 강좌를 통해서 또 뵙겠습니다. ^^
