기본 콘텐츠로 건너뛰기

meteor 에서 E-mail 인증하기


MAIL_URL은 gmail을 쓸 경우 다음과 같이 설정하면 된다.

smtp://사용자계정%40gmail.com:계정암호@smtp.gmail.com:465/

혹은 google apps 계정은 경우

smtp://사용자계정%40구글Apps도메인:계정암호@smtp.gmail.com:465/

----
가입자 확인 메일 발송엔 몇가지 문제가 있는데
1. Text로 메일을 보낸다.
2. Formatted 형식을 사용할 수 없다.

이건 내가 생각해봐도 좀 아니다 싶다.
server 쪽에서 startup 할때 기존 Accounts.emailTemplate과 Accounts.sendVerificationEmail 등등이 제대로 작동하도록 바꿔치기 해주자.

:: email.coffee

Meteor.startup ->
  # set Mail configuration
  Email = Package.email.Email;

  _.extend Accounts.emailTemplates,
    from: "Gearlounge <no-reply@gearlounge.com>"
    verifyEmail:
      subject: (user)->
        "#{"#{user.profile.displayName}님, "if (user.profile and user.profile.displayName)?}가입을 환영합니다."
      html: (user, url)->
        Handlebars.templates['verifyEmail'](
          user: user.profile && user.profile.displayName
          verifyEmailUrl: url
          urlHome: Meteor.absoluteUrl()
        )
  # hack for handlebars-server
  _.extend Accounts.sendVerificationEmail = (userId, address) ->
    user = Meteor.users.findOne userId
    throw new Error "Can't find user" if not user?
    if not address?
      email = _.find user.emails || [], (e) -> !e.verified
      address = (email || {}).address

    throw new Error "No such email address for user." if not address or not _.contains(_.pluck(user.emails || [], 'address'), address)

    tokenRecord =
      token: Random.id()
      address: address
      when: new Date()
    Meteor.users.update
      _id: userId
    ,
      $push:
        "services.email.verificationTokens": tokenRecord
    verifyEmailUrl = Accounts.urls.verifyEmail tokenRecord.token
    Email.send
      to: address
      from: Accounts.emailTemplates.from
      subject: Accounts.emailTemplates.verifyEmail.subject user
      html: Accounts.emailTemplates.verifyEmail.html user, verifyEmailUrl
    return

위 코드는 기존 accounts-password.js의 Accounts.emailTemplates을 그대로 옮겨(물론 coffeescript로 바꾸긴 했지만) 놓은 수준이다.
하지만 노랑색으로 그어 놓은 부분이 변경한 부분인데 기존 Accounts.emailTemplates는 text밖에 사용할 수 없어서 html을 인자로 주었고 메일 양식도 하드코딩된 부분을 handlebars-server(https://github.com/EventedMind/meteor-handlebars-server) 패키지를 사용하여 양식화하였다.

      html: (user, url)->
        Handlebars.templates['verifyEmail'](
          user: user.profile && user.profile.displayName
          verifyEmailUrl: url
          urlHome: Meteor.absoluteUrl()
        )

위 코드에서 보듯 verifyEmail 이란 template 을 사용하는데 server쪽 디렉토리 아래 적당히 verifyEmail.handlebars 라는 파일을 생성하면 알아서 잘 찾는다.
은근 괜찮음 추천추천.

서버사이드 핸들바도 클라이언트처럼 쓰면 된다. user, verifyEmailUrl, urlHome 을 각각 인자로 사용하는데 이 세개를 handlebars에서도 똑같이 이용한다.

<div>
<img src="{{urlHome}}image/header.img">
</div>
<p>
  안녕하세요. {{user}}님. 가입을 환영합니다.
</p>
<p>
  사용자 확인을 위해 아래 링크를 클릭해주세요.
</p>
<p>
  <a href="{{verifyEmailUrl}}" target="_blank">{{verifyEmailUrl}}</a>
</p>

이렇게 구성하면 오케이.
아마 verifyEmailUrl 은 아마도 http://localhost:3000/#/verify-email/HmfLCxjRKoRreqKWW 이런 형태일텐데

이제 이 경로로 오면 실제로 처리해주는 걸 만들어주면 되겠다.
클라이언트로 /verify-email/<token> 의 URL요청이 들어오면 처리하면 될텐데
내 경우엔 meteor-router(https://github.com/tmeasday/meteor-router) 패키지를 사용하므로
아래와 같이 구현했다.

Meteor.Router.add
....
  '/verify-email/:token':(token)->
    result = Meteor.call 'confirmEmail', token
    'confirmMail'

token을 인자로 'confirmEmail' method를 호출하면 해당계정의 email의 verified가 true가 되면서 사용가능한 상태로 만들 수 있다. 그리고 confirmMail 템플릿으로 포워딩하는 것으로 마무리.
만일 싱글페이지 앱이라면 url 분석해서 처리하는 방법도 있겠다.

물론 인증이 필요한 부분에 필터링을 한다던가 하는 세세한 부분의 구현이 있지만 실제로 해보면서 확인해보자.

이 블로그의 인기 게시물

vulcanJS - 10. Posts Update/Delete

마지막으로 수정과 삭제를 구현해보면 목록 조회(List), 상세 조회, 쓰기, 수정, 삭제까지 모든 필요한 요소를 아우를 수 있을 것이다.
감이 좋은 분들은 눈치 챘을지도 모르겠지만 사실 수정이란 건 UI면에서 볼때 이미 양식이 채워져있는 신규 쓰기와 별반 다르지 않다.

먼저 해야할 것은 역시나 Component를 만드는 일이다.
$ vulcan g component
? Package name spectrum-simplebb
? Component name PostsEditComponent
? Component type Class Component
? Register component Yes
   create packages/spectrum-simplebb/lib/components/PostsEditComponent.jsx
 conflict packages/spectrum-simplebb/lib/components/index.js
? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite
    force packages/spectrum-simplebb/lib/components/index.js PostsEditComponent를 만들었다.
route도 만들자. /posts/edit/:id 이렇게 경로를 만들면 좋겠다. 그러고보니 이전 글에서 만든 상세보기도 /posts/view/:id 형식으로 만들껄 그랬다.
$ vulcan g route
? Package name spectrum-simplebb
? Route name postsEdit
? Route path /posts/edit/:_id
? Component name PostsEditComponent
? Layout name
 conflict packages/spectrum-simplebb/lib/modules/routes.js
? Overwrite packages/spectrum-simplebb/lib/modules/routes.js? overwrite
   …

VulcanJS 특징 번역

VulcanJS 특징http://docs.vulcanjs.org/features.html 의 내용입니다. GraphQL 스키마 생성 Vulcan은 SimpleSchema JSON 스키마를 기반으로 컬렉션의 GraphQL 스키마를 자동으로 생성합니다.
이렇게하면 두 가지 형식으로 스키마를 두 번 지정할 필요가 없습니다. 이 기능은 완전히 선택적이며 필요에 따라 수동으로 스키마를 지정할 수도 있습니다.

자동 생성 폼 Vulcan은 스키마를 사용하여 클라이언트 측 폼을 생성하고 적절한 Apollo Mutation을 통해 제출을 처리합니다.
예를 들어 하나의 동영상을 편집하기위한 양식을 표시하는 방법은 다음과 같습니다.
<VulcanForm
  collection={Movies}
  documentId={props.documentId}
  queryName="moviesListQuery"
  showRemove={true}
/> queryName 옵션은 작업이 완료되면 자동으로 업데이트되는 쿼리를 VulcanForm에 통지하는 한편, showRemove 옵션은 "Delete Movie' 버튼을 폼에 추가합니다.
VulcanForm 클라이언트 저장소에 아직 로드되지 않은 경우 수정할 문서를 읽어오기도 합니다.

쉬운 데이터 적재 Vulcan에는 Apollo 데이터를 쉽게 로드할 수 있도록 데이터 로딩 헬퍼 세트로 withList (복수 문서용)와 withDocument (단일 문서용)를 제공합니다.
예를 들어, withList를 사용하여 MoviesList 구성 요소에 모든 동영상을 포함하는 결과를 prop에 전달하는 방법은 다음과 같습니다.
const listOptions = {
  collection: Movies,
  queryName: 'moviesListQuery',
  fragment: fragment,
};
export default withList(listOptions)(MoviesList); …

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에서도 해결이 안되었군요. 해결되어 적용되면 다시 글 올리겠습니다.