기본 콘텐츠로 건너뛰기

Meteor 에서 외부 Application으로 DDP 인증.

http://stackoverflow.com/questions/16729992/authenticating-with-meteor-via-ddp-and-srp

Basic Auth로 websocket frame을 떠봤더니

o
1
오전 1:47:09
a["{\"server_id\":\"X43fG44wD7iJNCdoq\"}"]
42
오전 1:47:09
["{\"msg\":\"connect\",\"version\":\"pre1\",\"support\":[\"pre1\"]}"]
69
오전 1:47:09
["{\"msg\":\"sub\",\"id\":\"8jW8AaNcWf2iRhXWC\",\"name\":\"meteor.loginServiceConfiguration\",\"params\":[]}"]
110
오전 1:47:09
a["{\"msg\":\"connected\",\"session\":\"ZddaS7aatWT4i8nAR\"}"]
62
오전 1:47:09
a["{\"msg\":\"added\",\"collection\":\"users\",\"id\":\"aHC7AHZXbnhs7Efs9\",\"fields\":{\"username\":\"mone\",\"profile\":{\"photoSmall\":\"/image/tempImage/member_photo_placeholder.png\"}}}"]
192
오전 1:47:09
a["{\"msg\":\"added\",\"collection\":\"users\",\"id\":\"HuL3adLrtPKMoFWMK\",\"fields\":{\"profile\":{\"photoSmall\":\"/image/tempImage/member_photo_placeholder.png\"},\"username\":\"admin\"}}"]
193
오전 1:47:09
a["{\"msg\":\"added\",\"collection\":\"users\",\"id\":\"MZqYAk6C9kYao3ATz\",\"fields\":{\"profile\":{\"photoSmall\":\"/image/tempImage/member_photo_placeholder.png\"},\"username\":\"spectrum\"}}"]
196
오전 1:47:09
a["{\"msg\":\"ready\",\"subs\":[\"8jW8AaNcWf2iRhXWC\"]}"]
----------------------------------------------------------------------

여기까지 로그인 전

----------------------------------------------------------------------
"{\"msg\":\"method\",\"method\":\"login\",\"params\":[{\"srp\":{\"M\":\" \"}}],\"id\":\"2\"}"]
158
오전 1:48:22
a["{\"msg\":\"changed\",\"collection\":\"users\",\"id\":\"MZqYAk6C9kYao3ATz\",\"fields\":{\"emails\":[{\"address\":\"spectrick@gmail.com\",\"verified\":false}]}}"]
163
오전 1:48:22
a["{\"msg\":\"ready\",\"subs\":[\"8jW8AaNcWf2iRhXWC\"]}"]
57
오전 1:48:22
a["{\"msg\":\"updated\",\"methods\":[\"2\"]}"]
46
오전 1:48:22
a["{\"msg\":\"result\",\"id\":\"2\",\"result\":{\"token\":\"oGyFPfZM3c95yXw7M\",\"id\":\"MZqYAk6C9kYao3ATz\",\"HAMK\":\"b372e317d359b294cd9c5a4ca39c8f5523c310288661eba731191e2b4614ef17\"}}"]
190
오전 1:48:22
h

뭐 대략 이렇게 나오는데
a는 응답일테고

순서대로 보면
1. Connect 요구
{ msg: 'connect',
  version: 'pre1',
  support: [ 'pre1' ] }
이건 간단한데
{msg: "connected", session: "4vXhahuK5GTNzcC4S"}
이런 식으로 응답이 오면 오케이

2. 인증설정요구
{ msg: 'sub',
  id: 'xaiCo33DPqaEJhkbc',   /* id는 UUID. 아무거나 넣어도 된다. */
  name: 'meteor.loginServiceConfiguration',
  params: [] }

잠시 삼천포
UUID 생성은

Meteor.uuid = function () {
  var HEX_DIGITS = "0123456789abcdef";
  var s = [];
  for (var i = 0; i < 36; i++) {
    s[i] = Random.choice(HEX_DIGITS);
  }
  s[14] = "4";
  s[19] = HEX_DIGITS.substr((parseInt(s[19],16) & 0x3) | 0x8, 1);
  s[8] = s[13] = s[18] = s[23] = "-";

  var uuid = s.join("");
  return uuid;
}

Random.choice = function (arrayOrString) {
  var index = Math.floor(Random.fraction() * arrayOrString.length);
  if (typeof arrayOrString === "string")
    return arrayOrString.substr(index, 1);
  else
    return arrayOrString[index];
}

이런 식이다.
아무튼 sub 즉 subscribe 메시지로 meteor.loginServiceConfiguration 이란 이름의 collection을 구독 요청하면

{ server_id: 'X43fG44wD7iJNCdoq' }
{ msg: 'connected', session: 'EzRf563xHiK7J2FDo' }
{ msg: 'added',
  collection: 'users',
  id: 'aHC7AHZXbnhs7Efs9',
  fields: 
   { username: 'mone',
     profile: { photoSmall: '/image/tempImage/member_photo_placeholder.png' } } }
{ msg: 'added',
  collection: 'users',
  id: 'HuL3adLrtPKMoFWMK',
  fields: 
   { profile: { photoSmall: '/image/tempImage/member_photo_placeholder.png' },
     username: 'admin' } }
{ msg: 'added',
  collection: 'users',
  id: 'MZqYAk6C9kYao3ATz',
  fields: 
   { profile: { photoSmall: '/image/tempImage/member_photo_placeholder.png' },
     username: 'spectrum' } }
{ msg: 'ready', subs: [ '1' ] }

유저명이 나오고, 'ready'를 받으면 끝. atmosphere.meteor.com 은 user 명을 보내지 않더라. 뭔가 설정이 있을 듯.


보내는게 무엇인지 살펴보니
{ msg: 'method',
  method: 'login',
  params: [ { srp: 
    "M":"HASHHASHHASHHASHHASHHASHHASHHASHHASHHASH"
  } ],
  id: '2' }
이렇다.
참고로 atmosphere는

{ msg: 'method',
  method: 'login',
  params: 
   [ 'atm',
     '0.1.0',
     { srp: 
      "M":"HASHHASHHASHHASHHASHHASHHASHHASHHASHHASH"
     } ],
  id: '2' }

뭔가 조금 더 있다.

요걸 보내면 된다는 말인데
M에 사용자계정과 암호를 잘 어떻게 해서 응답이 돌아오면 되겠다.

M에 해당하는 부분은 SRP라는 것으로 암호화되어있는데
이걸 사용하면 된다.
로직은 그냥 소스 읽자.

nextid = 0
connected = false;
ws = require 'ws'
ws = new ws 'ws://localhost:3000/websocket'
ws.on 'open', ->
  console.log "open socket"
  ws.send JSON.stringify
    msg: 'connect'
    version: 'pre1'
    support: ['pre1']
ws.on 'message', (data, flags)->
  dataJSON = JSON.parse data
  console.log dataJSON
  if dataJSON.msg is 'connected'
    connected = true
    ws.send JSON.stringify
      msg: 'sub'
      id: (++nextid).toString()
      name: 'meteor.loginServiceConfiguration'
  if dataJSON.msg is 'ready'
    ws.send JSON.stringify
      msg: 'method'
      method: 'login',
      params: [
        srp:
          M: "*이 부분에 SRP로 인코딩"
      ]
      id: '2'

해봤는데 잘 안된다.
사실 이 부분이 핵심인데 Basic auth / OAuth 도 다 다를것이다.
OAuth를 쓰면 어짜피 웹으로 왔다갔다 해야해서 모바일 등에서 쓰기 곤란할 듯.
그럼 로그인은 웹에서 하고 인증된 후에 재로그인이 가능한지 확인해보자.

{ msg: 'method',
  method: 'login',
  params: [ { resume: 'MvzqjyYD9bCs3rrcb' } ],
  id: '1' }

resume 값을 기억하고 있으면 되는가보다 리프레쉬 했는데 같은 값을 반환한다.

open socket
{ server_id: 'X43fG44wD7iJNCdoq' }
{ msg: 'connected', session: 'ggEMcek5WmGD9vJSG' }
{ msg: 'added',
  collection: 'users',
  id: 'aHC7AHZXbnhs7Efs9',
  fields: 
   { username: 'mone',
     profile: { photoSmall: '/image/tempImage/member_photo_placeholder.png' } } }
{ msg: 'added',
  collection: 'users',
  id: 'HuL3adLrtPKMoFWMK',
  fields: 
   { profile: { photoSmall: '/image/tempImage/member_photo_placeholder.png' },
     username: 'admin' } }
{ msg: 'added',
  collection: 'users',
  id: 'MZqYAk6C9kYao3ATz',
  fields: 
   { profile: { photoSmall: '/image/tempImage/member_photo_placeholder.png' },
     username: 'spectrum' } }
{ msg: 'ready', subs: [ '1' ] }
{ msg: 'changed',
  collection: 'users',
  id: 'MZqYAk6C9kYao3ATz',
  fields: { emails: [ [Object] ] } }
{ msg: 'ready', subs: [ '1' ] }
{ msg: 'updated', methods: [ '11' ] }
{ msg: 'result',
  id: '11',
  result: { token: 'MvzqjyYD9bCs3rrcb', id: 'MZqYAk6C9kYao3ATz' } }
{ msg: 'result',
  id: '11',
  result: { token: 'MvzqjyYD9bCs3rrcb', id: 'MZqYAk6C9kYao3ATz' } }
{ msg: 'updated', methods: [ '11' ] }


음 token 이 어짜피 있어서 의미없나?
암튼 전체 소스
nextid = 0
connected = false;
ws = require 'ws'
ws = new ws 'ws://localhost:3000/websocket'
ws.on 'open', ->
  console.log "open socket"
  ws.send JSON.stringify
    msg: 'connect'
    version: 'pre1'
    support: ['pre1']
ws.on 'message', (data, flags)->
  dataJSON = JSON.parse data
  console.log dataJSON
  if dataJSON.msg is 'connected'
    connected = true
    ws.send JSON.stringify
      msg: 'sub'
      id: (++nextid).toString()
      name: 'meteor.loginServiceConfiguration'
  if dataJSON.msg is 'ready'
    ws.send JSON.stringify
      msg: 'method'
      method: 'login',
      params: [
        resume: 'MvzqjyYD9bCs3rrcb'
      ]
      id: '1'


이 블로그의 인기 게시물

meteor로 nw.js 개발하기.

실제로 nw.js 어플리케이션을 개발하다보면 UI구현하기 막막하고 수동으로 리프레쉬 하는 것도 귀찮아서 Meteor 연동을 하려고 했더니 생각보다 간단했다.

디렉토리 구조는 먼저 이렇게 잡았다.
`- app
  `-client
  `-public
`- dist
  `- 배포용 html,css,js
  `- package.json
`- package.json 아이디어는 이렇다. nw.js의 시작페이지를 http://localhost:3000으로 두고 배포시엔 meteor client 배포툴인 meteor-build-client를 사용하여 html,css,js 로 분리하는 계획이다.

가장 중요한 nw.js 용 package.json 파일은 아래와 같이 구성한다.
{
  "main": "http://localhost:3000",
  "node-remote": "http://localhost:3000",
  "name": "<앱이름>"
} 이게 전부. 어떻게 보면 Web과 nw.js를 동시에 개발할 수도 있는 환경이기도 한 것이다.
meteor create app 을 해서 meteor용 앱을 만들고 meteor 를 시작한다.
그리고, 위의 package.json이 있는 경로로 돌아가서 nw . 으로 nwjs를 실행한다.

한번 번쩍하더니 잘 된다.
cordova 등에서 index.html 대신 http://localhost:3000을 하는 것도 비슷한 느낌이다.

즐겁게 개발을 일단 마구 하고 실제로 배포하기 위해서는 개발환경이 아니라 html,css,js로 구성된 배포본을 만들어야한다.
npm install -g 해도 되지만 어짜피 Meteor에서만 쓸거
meteor npm install -g meteor-build-client 해버릴거다.

개발은 문제 없어 보이고 배포판을 한번 만들어보자. meteor app 이 있는 경로(meteor run으로 …

RxJS - ReactiveX 인터뷰

A: 왜 RxJS입니까
B: javascript는 참 쉽고 친숙한 언어죠.
A: 별로 그렇게 생각 안합니다만.
B: 그래서 좀 어렵고 있어보이는게 뭘까 싶어서...
A: 네?
B: 함수형이라는게 유행하기도 하고
f(x) 좋쟎습니까? 미스테리~ 미스테리~ 정수정짱짱 으아아

이런 수학선생님이라면 수포자 따윈 A: ...
B: 그리고 반응형이라는 말 뭔가
A: 뭔가?
B: 대충대충해도 막 알아서 할거 같고...
A: 그럴리가요?
B: 안그렇겠죠?
A: 네
B: 네

(잠시만 기다려주세요)

A: 그래도 뭔가 매력이 있으니 이렇게 시간을 내셔서 이것저것 Rx에 대해 글도 쓰고 이야기도 하고 그러시는거 아닌가요?
B: 매력이라.
으음.
제가 팔꿈치 터널 증후근이 좀 있어요.
오른손 세끼손가락, 약지손가락이 저립니다.
A: 무슨 상관이?
B: 그래서 각종 괄호를 쓰는게 너무 힘듭니다.
소중대괄호 만든 사람 죽었으면.
Hello world (ASCII): https://esolangs.org/wiki/Parenthesis_Hell
A: 이미 옛날에 돌아가셨겠죠.
B: 그렇겠네요.
아무튼 그래서 소중대괄호 의존이 적은 커피스크립트를 쓰는데요.
A: 빨리 본론을 말씀해주시죠.
B: 커피스크립트에서 가로로 80자 이상쓰면 Line exceeds maximum allowed length 라고 경고해요.
A: 그래서요?
B: 근데 Rx를 쓰면 코드를 가늘게 쓸 수가 있더라구요.
A: 호오?
B: 그리고 = 쓰는 것도 너무 힘듭니다.
A: 네?
B: 오른손을 쓰쟎아요.
A: ...
그러니까 정리하면
1. 괄호가 힘들다
2. 커피를 쓴다
3. 커피는 길게 쓰면 경고
4. Rx를 쓰면 코드가 가늘다
5. 대입문을 줄이고 싶다.
B: 네
하지만 5번은 생각보다 별로...
A:
B:

B: 아!
A: ?
B: 코드가 가늘어서 좋은 점이.
A: 네.
B: 핸드폰에서 코드를 보기 좋습니다.
A: ... 왜 팔꿈치 터널 증후근이 안 낫는지 알겠습니다.
B: 도와주세요.
쇠고기 사묵으면 나을 것 같습니…

Troubleshooting - Meteor package가 적용이 되지 않을 때

버전 1.5 기준 package.js에서 Package.onUse 에 새 패키지를 추가했는데 인식하지 못하는 경우가 있다.
Package.onUse((api) => {
  api.use([
    'vulcan:core',
    'vulcan:forms',
    'vulcan:accounts' /* <-- 추가함! */
  ]);
...
} 내부패키지건 원격패키지건 안되는 안된다. 이럴 때 meteor add 후 meteor remove 해도 되지만 더 간단한 방법이 있다. meteor update vulcan:accounts 이렇게 update 해주는 방법이 있다. .meteor/package 파일을 건들지 않아서 좋다. 그래도 역시 좋지 않다. Meteor 스럽지 않다. https://github.com/meteor/meteor/issues/7721 현재 1.5.2에서도 해결이 안되었군요. 해결되어 적용되면 다시 글 올리겠습니다.