Accountsの基本

• accounts-base
  Meteor.user(), Meteor.userId(), etc.
  ログイン管理、ユーザー管理などの基本機能を提供
  (※デフォルトでインストール済み）
   
• accounts-ui
  簡素なログインUIを提供
  以下のパッケージで好きなものを追加して使用
  accounts-password (オリジナルなアカウント管理が可能), accounts-facebook, accounts-google, accounts-github, accounts-twitter, accounts-meetup, accounts-meteor-developer

accounts-facebook

accounts-password

{{> loginButtons}}

HTML ( with Blaze )

Accountsの基本

• useraccounts:core
  • Meteorのユーザーアカウント機能の根幹
  • カスタマイズ可能
  • 他言語対応
  • バリデーション機能の提供
  • ログイン後のリダイレクト設定

( インストールする必要なし )

useraccounts:core

• スタイルのバージョン
  今のところ、以下から選択可能
  Twitter Bootstrap (useraccounts:bootstrap) 
  Zurb Foundation (useraccounts:foundatio)
  Ionic (useraccounts:ionic)
  Materialize (useraccounts:materialize)
  Polymer (WIP) (useraccounts:polymer)
  Ratchet (useraccounts:ratchet)
  Semantic UI (useraccounts:semantic-ui)
  plus others coming soon...
  
  *plain html and no CSS rules (useraccounts:unstyled )

useraccounts:core

Setup方法(※うまくいかない場合は一度入れなおしてみることをおすすめ：追記2016/3/2)

meteor add useraccounts:bootstrap

meteor add accounts-password
meteor add accounts-facebook
meteor add accounts-google

meteor add service-configuration
meteor add accounts-ui

サードパーティーログインサービス設定

※設定しないとfacebook等のログインボタンなどが表示されない

useraccounts:core

使用できるテンプレート

{{> atForm}}

のみ。

だけど、

sign in, sign up, forgot password, reset password, change password, and enroll account forms
アカウント機能に必要なものは網羅している。

※navbars用に、基本的なログインボタンがあったりもする
{{> atNavButton}

{{> atForm}}

• 特定の機能のみを提供できるように、変数が用意されている
  ex.)  {{> atForm state='signUp'}}

{{> atForm}}

Basic Customization

• I18n Support (他言語化)
  T9n.setLanguage('<lang>'); //任意の場所に記述
   
• API設定
  AccountsTemplates.configureRoute(route_code, options);
  AccountsTemplates.configure(options);
  ※Meteor.startup()内で記述してはダメ
  ※サーバーとクライアント両方から呼び出しの出来るファイルに記述すること（たとえば、lib/config/at_config.js）
  optionsで設定できる例
   confirmPassword, sendVerificationEmail, 
   showForgotPasswordLink, positiveValidation, onLogoutHook,
   texts (ボタンなどの文字列変更), etc....

Basic Customization

• reCaptcha が使える

Google が提供してくれるコレ

Basic Customization

• アカウント用フォームの準備待ちと完了検知

<template name="myLogin">
 {{#if atDisabled}}
  Please wait...
 {{/if}}
 <div class="{{atClass}}">
  {{> atForm}}
 </div>
</template>

Template.myLogin.helpers({
 atDisabled: function() {
  //成功失敗にかかわらず完了したらfalseを返す
  return AccountsTemplates.disabled(); 
 },
 atClass: function() {
  return AccountsTemplates.disabled() ? 'disabled' : 'active';
 }
});

Advanced Customization

• フォーム項目のテキスト変更、
  ソーシャルログインのアイコン変更が可能
   
• クライアント側でのユーザー作成を禁止する

AccountsTemplates.configure({
    forbidClientAccountCreation: true
});

Advanced Customization

• 登録フォームの項目のカスタマイズが可能

AccountsTemplates.addField({
    _id: 'name', // ユニークなフィールド名
    type: 'text', // 他にはpassword, email, tel, url, checkbox, select, radio, hidden
    displayName: "Name",
    func: function(value){return value !== 'Full Name';}, // バリデーション用
    errStr: 'Only "Full Name" allowed!',
});

Advanced Customization

• Checkboxes, Selects, Radios, Hidden も追加可能

AccountsTemplates.addField({
    _id: "fruit",
    type: "radio",
    displayName: "Preferred Fruit",
    select: [
        {
        text: "Apple",
        value: "aa",
      }, {
        text: "Banana",
        value: "bb",
      }, {
        text: "Carrot",
        value: "cc",
      },
    ],
});

Advanced Customization

• フィールドの削除
• 特別なフィールドの再定義

AccountsTemplates.removeField('password');
AccountsTemplates.addField({
    _id: 'password',
    type: 'password',
    required: true,
    minLength: 6,
    re: /(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
    errStr: 'At least 1 digit, 1 lower-case and 1 upper-case',
});

Advanced Customization

var pwd = AccountsTemplates.removeField('password'); 
//↑表示するフォームの順番を変更するため
AccountsTemplates.removeField('email');
AccountsTemplates.addFields([
  {
      _id: "username", 
     type: "text", displayName: "username",  required: true,  
     minLength: 5,
  },
  {
      _id: 'email', 
      type: 'email', displayName: "email", required: true, 
      re: /.+@(.+){2,}\.(.+){2,}/,
      errStr: 'Invalid email',
  },
  {
      _id: 'username_and_email',
      type: 'text',
      required: true,
      displayName: "Login",
  },
  pwd //ここに配置
]);

Advanced Customization

• フォームのテンプレート拡張
   
• フィールドを自由に設定できるので、
  複数 email アドレス設定
   
• パスワード変更確認、
  管理者によるユーザー追加通知などの設定
   
• メールに提示する各種URLリンクの設定
   
• メール内容の変更
  (悪夢をみるHTMLメールはやめたほうが良さそう)

Custom data about users

• Add top-level fields onto the user document
  任意のフィールドを作る場合は、最上位のフィールドに作ること
• Adding fields on user registration
  例えば、facebookアカウント等でユーザー作成がされた最初のタイミングで任意のフィールドを作りたい場合、Accounts.onCreateUser関数を使うこと
• Don’t use profile
  profileフィールドは、デフォルトでクライアントサイドでの編集が許されてしまっているので、安易に管理者フラグみたいなものを作らないこと。（Meteor.users.deny()は設定しておくこと）

Custom data about users

• Publishing custom data
  ユーザー情報は個人情報を含むので、publishする場合は気をつけること。（サーバーサイドでフィルターかけておく）
• Roles and permissions
  例えば、ブログ記事投稿でアドミンや一般ユーザーのパーミッションを考える場合、2通りの方法が思いつく。
  ・Role-based permissions
  ・Per-document permissions

Roles and permissions

• Role-based permissions - alanning:rolesの利用

// Give Alice the 'admin' role
Roles.addUsersToRoles(aliceUserId, 'admin', Roles.GLOBAL_GROUP);

// Give Bob the 'moderator' role for a particular category
Roles.addUsersToRoles(bobsUserId, 'moderator', categoryId);

const forumPost = Posts.findOne(postId);

const canDelete = Roles.userIsInRole(userId,
  ['admin', 'moderator'], forumPost.categoryId);

if (! canDelete) {
  throw new Meteor.Error('unauthorized',
    'Only admins and moderators can delete posts.');
}

Posts.remove(postId);

ユーザーが権限を持っているかチェックする

Roles and permissions

• Per-document permissions
  collectionのhelpersに編集可能かどうかを判別する関数を定義　（dburles:collection-helpers）

Lists.helpers({
  // ...
  editableBy(userId) {
    if (!this.userId) {
      return true;
    }

    return this.userId === userId;
  },
  // ...
});

const list = Lists.findOne(listId);

if (! list.editableBy(userId)) {
  throw new Meteor.Error('unauthorized',
    'Only list owners can edit private lists.');
}