🧗🏻 👤 🌔 Meteorアプリケーションの招待（招待）システムを作成します 🅾️ 😹 📉

こんにちは

今日は、Meteorアプリケーション用のシンプルでありながら非常に機能するメール招待システムの作成方法を説明します。

なぜこれが必要なのでしょうか？たとえば、プロジェクトの同じグループ内で数人が作業する必要があるアプリケーションを開発している場合。これは、たとえば、複数の人が編集できるトレーニングスケジュールや、会社のオンラインストアの製品カタログにすることができます。

ネットワークにはすでに英語とCoffeScriptのマニュアルが1つありますが、そこに記載されているアプローチは私にとって不便であるように思えたため、自分のプロジェクトに招待システムを実装し、それをホーカーと共有することにしました。

したがって、この例では次のことが可能になります。

1）既存の招待のリストと新しい招待を送信するためのフォームを含む招待インターフェースを表示します。

2）すべての招待状をデータベースに保存します。

3）招待のステータスを監視します。

4）招待状をメールで送信します。

5）ユーザーの役割を監視します。

6）新しいユーザーの招待をアクティブにします。

7）多数のサードパーティモジュールを使用します。

注意：この例は、生きているプロジェクトに基づいて検討されるため、コピーして自分に貼り付けるだけではおそらく動作しません...

何が必要ですか？まず、次のパッケージをインストールする必要があります。

accounts-base -     accounts-google -      accounts-password -    / accounts-ui -   alanning:roles -    aldeed:autoform -   aldeed:collection2 -       email -    iron:router -    mizzao:bootboxjs -     random -

さらに、サンプルインターフェイスはBootstrapのMaterial Designを使用して記述されており、これもプロジェクトに統合する必要があります。始めましょう。

最初のアプローチ

まず、招待のステータスを担当し、将来必要になるいくつかの簡単な定数について説明します。

Lib / constants.jsファイル

 //       INVITE_CREATED = 0; //   Email       -    INVITE_EMAILED = 1; //      INVITE_COMPLETED = 2;

また、ヘルパー関数をいくつか作成する必要があります。

Lib / helpers.jsファイル

 //    ,       if (Meteor.isClient) { //   .      ,      Template.registerHelper('userCompany', function () { var company = Company.findOne({userId: Meteor.userId()}); if (company == undefined) { if (Meteor.userId() != null) { var user = Meteor.users.findOne({_id: Meteor.userId()}, {fields: {'companyId': 1}}); company = Company.findOne({_id: user.companyId}); } } return company; }); //     Email        Template.registerHelper('validateEmail', function (email) { var re = /\S+@\S+\.\S+/; return re.test(email); }); }

データを共同で編集する必要があるアプリケーションがあるとします（これらは関係ありません）。これを行うには、最初のユーザーを作成するときに、会社の特定のカード（または誰にとっても便利なグループ）を作成し、他のユーザーの招待時にインターフェイスを提供します。

データ構造とサーバーロジック

エンティティのデータスキーマを説明しましょう。これを行うには、Simple Schemaの機能と、aldeedパッケージであるcollection2を使用します。

会社のデータスキームを説明する最初の。たとえば、会社名、簡単な説明、会社を作成したユーザーのID、レコードが作成された日付、最後に更新された日付が含まれます。

スキームの説明では、次のような値を設定できることに注意してください。

type-フォームを生成するときに将来使用される条件付きフィールドタイプ
min、max-最小および最大文字数
autoValue-フィールドの自動値
denyInsert、denyUpdate-レコードの挿入/更新時にフィールドへの書き込みを禁止
オプション-デフォルトのフィールドは必須ですが、修正できます

Lib / collections / company.jsファイル

 Company = new Mongo.Collection('company'); //  if (Meteor.isServer) { Meteor.methods({ //  .        registerAdminUser: function(companyId, userId) { check(companyId, String); check(userId, String); Roles.addUsersToRoles(Meteor.userId(), ["CompanyAdmin"]); } }); } //SimpleSchema.debug = true; // Company.attachSchema(new SimpleSchema({ //  title: { type: String, label: "", min: 3, max: 200 }, //  description: { type: String, label: " ", min: 20, max: 1000, autoform: { rows: 5 } }, //id   .         . userId: { type: String, autoValue: function() { if (this.isInsert) { return Meteor.userId(); } else { this.unset(); } }, label: "", //denyInsert: true, denyUpdate: true, optional: true }, // .   createdAt: { type: Date, autoValue: function() { if (this.isInsert) { return new Date; } else if (this.isUpsert) { return {$setOnInsert: new Date}; } else { this.unset(); } }, denyUpdate: true, optional: true }, //  .   updatedAt: { type: Date, autoValue: function() { if (this.isUpdate) { return new Date(); } }, denyInsert: true, optional: true }, }));

同様に、招待のスキームを説明します。コレクションファイルには、新しい招待の送信、既存の招待の削除、およびユーザーによる招待のアクティブ化の3つのサーバーメソッドが含まれます。コレクションには、招待者のメール、アクティベーションコード、招待ステータス、招待をアクティブにしたユーザーとのコミュニケーションフィールド、招待を送信したユーザーとのコミュニケーション、招待の作成/更新日が保存されます。さらに、フィールド「更新日」の最後の値は、招待のアクティブ化の日付と時刻に等しくなり、フィールド「作成日」-送信の日付と時刻に等しくなります。

ファイルlib / collections / invite.js

 Invite = new Mongo.Collection('invite'); //SimpleSchema.debug = true; //  if (Meteor.isServer) { Meteor.methods({ //    email invationSender: function (email) { check(this.userId, String); check(email, String); // .       Email var token = Random.hexString(10); //        . var company = Company.findOne({userId: this.userId}); var companyName = company.title; //        //   -  ,     var inviteId = Invite.insert({email:email,token:token,status:INVITE_CREATED}); //     ,       this.unblock(); //       //    ,       Email.send({ to: email, from: 'info@forsk.ru', subject: '   '+companyName+'       Kellot.ru', html: '!   Kellot.Ru   '+Meteor.user().profile.name+'   ' + '        "'+companyName+'". ' + '<br/><br/>   : '+token+ '<br/><br/>   ,     ' + '<a href="http://p.kellot.ru/company/invite/'+token+'">http://p.kellot.ru/company/invite/'+token+'</a> ' + '    .     .'+ '<br/><br/> ,        Kellot.Ru' }); //    ""  "" Invite.update({_id:inviteId}, {$set: {status: INVITE_EMAILED}}, {}, function(error, count) { console.log('update error', error, count); }); return true; }, //       deleteInvite: function(inviteId) { check(inviteId, String); var invite = Invite.findOne({_id: inviteId}); //     ""    . //   ,         if (invite.status != INVITE_COMPLETED) { Invite.remove({_id: inviteId}); return true; } else { return false; } }, //    activateInviteToken: function (activationToken, userId) { check(this.userId, String); check(activationToken, String); check(userId, String); //   -  ,    var user = Meteor.users.findOne({_id:userId}); var invite = Invite.findOne({token:activationToken}); var company = Company.findOne({_id:invite.companyId}); //    -    if (invite.status == INVITE_COMPLETED) { return false; } //         Meteor.users.update({_id:userId}, { $set: {companyId: company._id } }); //         Invite.update({_id:invite._id}, { $set: {invitedUserId: userId, status: 2 } }); //     Roles.addUsersToRoles(Meteor.userId(), ["CompanyMember"]); return true; } }); } // Invite.attachSchema(new SimpleSchema({ //Email   ,      email: { type: String, label: "  / Email", min: 3, max: 30 }, //    .   token: { type: String, label: " ", min: 10, max: 10 }, //  status: { type: Number, label: " " }, //    invitedUserId: { type: String, label: "  ", optional: true }, //   ? creator: { type: String, label: "", autoValue: function() { if (this.isInsert) { return Meteor.userId(); } else { this.unset(); } }, denyUpdate: true, optional: true }, //    companyId: { type: String, autoValue: function() { if (this.isInsert) { return Company.findOne({userId:Meteor.userId()})._id; } else { this.unset(); } }, label: "", denyUpdate: true, optional: true }, //  createdAt: { type: Date, autoValue: function() { if (this.isInsert) { return new Date; } else if (this.isUpsert) { return {$setOnInsert: new Date}; } else { this.unset(); } }, denyUpdate: true, optional: true }, // . //      updatedAt: { type: Date, autoValue: function() { if (this.isUpdate) { return new Date(); } }, denyInsert: true, optional: true } }));

基本的にサーバーで必要なのはこれだけです。ご覧のとおり、ロジックは2回のシンプルなものです。ユーザーは会社（グループ）を作成します。自動的に所有者になり、他のユーザーに招待状を送信します。招待の送信について考えを変えた場合、受信者が招待を適用しなかったが、管理者は招待を削除する権利があり、受信者は成功しません。招待がアクティブで、受信者がレター内のリンクをクリックすると、「登録」ボタンをクリックするだけですぐに招待をアクティブにできます。しかし、これが機能するためには、ルーターに何かを教える必要があります...

すぐにメール送信の設定を気にする必要がないことに注意してください。すぐに使えるMeteorはMailgunサービスを使用するように構成されており、1日に最大200文字、または1か月に最大10,000文字を送信できます。ただし、独自のメールサーバーまたはサードパーティのメールサーバーで動作するように設定することを妨げるものはありません。これを行うには、アプリケーションを起動するときに、環境変数MAIL_URLを定義するだけです。

次のようなもの： "MAIL_URL"： "smtp：// user：password@domain.ru：587 /"。その後、レターの送信は、指定したサーバーでの承認を通じて行われます。

重要！ meteor-upを使用してアプリケーションをデプロイし、環境変数を記述するmup.jsonファイルをプロジェクトに保存する場合は注意してください。GitHubなどのオープンリポジトリにコードを投稿しないでください。そうしないと、全員がメールを読むことができます。

ルーターと出版物

Iron Routerは、新規参入者がレターから移動するリンクを処理するタスクを実行し、2つの条件に基づいてアクティベーションを招待するサーバー側のメソッドも呼び出します。

現在のユーザーはいずれかの企業に関連付けられていますか？
現在のセッションにアクティベーションコードはありますか？

Lib / router.jsファイル

 Router.map(function () { ... //          this.route('activateInviteToCompany', { trackPageView: true, path: '/company/invite/:activationToken', waitOn: function () { //   ,    ,    Meteor.subscribe("inviteToken", Router.current().params.activationToken); Meteor.subscribe('companyToken', Router.current().params.activationToken); return Meteor.subscribe('userToken', Router.current().params.activationToken); } }); ... Router.onBeforeAction(function (pause) { Alerts.removeSeen(); //          if (Meteor.userId() == null) { if (pause.url != '/index' && pause.url != '/' && pause.url != '/reviews' && pause.url != '/company/invite/'+Router.current().params.activationToken) { Router.go('index'); } } //   ,        , //          //          , //           if (Meteor.isClient && Meteor.userId() != null) { //        ... if (UI._globalHelpers.userCompany() == undefined && (pause.url != '/firstLogin' && pause.url != '/company/register' )) { //...      , ... if (Session.get('activationToken') != undefined) { //       var activationToken = Session.get('activationToken'); Session.set('activationToken', undefined); //     var invite = Invite.findOne({ token: activationToken }); //     Meteor.call('activateInviteToken', activationToken, Meteor.userId(), function (error, result) { //  if (error) { //    ... console.log(error); bootbox.alert("   . ,    ! : " + error.reason); } else { //          ! Meteor.subscribe('company'); Meteor.subscribe('invite'); bootbox.alert("  !"); } }); } else { //        -    // (   ) Router.go('firstLoginForm'); } } } this.next(); }); });

コードからわかるように、ユーザーがリンク '/ company / invit / <activation code>'をクリックすると、activateInviteToCompanyテンプレートが自動的にレンダリングされ、クライアントには招待自体、会社、および新しいメンバーを招待したユーザーに関する情報が表示されます。これらのデータは少し後で必要になります。

onBeforeAction関数では、いくつかのアクションを実行します。

まず、許可されていないユーザーのみがメインページにアクセスしてアプリケーションの機能を確認し、フィードバックページを表示し、アクティベーションの招待ページにアクセスできるようにします。それ以外の場合-どこで取得しようとしても、常にメインページに送信します。

次に、ユーザーがまだ許可されている場合、管理者または参加者として、既存の会社への添付ファイルを確認します。このチェックが成功した場合、ユーザーに続行させます。

第三に、ユーザーがまだどの会社にも割り当てられていない場合、セッションで招待アクティベーションコードを探します。ある場合は、ユーザーをアクティブにします。そうでない場合は、特別なページに送信して、新しい会社の作成を提案します。

とても簡単です。ただし、セッションで招待コードを保存する場所は表示されません。どうして？これについては後ほど説明します。

出版物は残ります。クライアントのルーターのコードから判断すると、招待、会社、招待を送信したユーザーに関する情報が必要です。次のセクションでは、その理由が明らかになります。

これを行うには、パブリケーションファイルに次のコードを追加します。

ファイルサーバー/ publications.js

 //      function getCompanyByInviteToken(tokenId) { var invite = Invite.findOne({ token: tokenId }); var company = Company.findOne({ _id: invite.companyId }); //console.log('getCompanyByInviteToken', tokenId, invite.companyId, company._id); return company; } ... Meteor.publish('inviteToken', function (tokenId) { check(tokenId, Match.Any); return Invite.find({ token: tokenId }); }); Meteor.publish('companyToken', function (tokenId) { check(tokenId, Match.Any); var company = getCompanyByInviteToken(tokenId); return Company.find({_id:company._id}); }); Meteor.publish('userToken', function (tokenId) { check(tokenId, Match.Any); var company = getCompanyByInviteToken(tokenId); return Meteor.users.find({ _id: company.userId }, {fields: {'services':0, 'roles':0, createdAt:0}}); });

したがって、上に示したように、最小限の必要な情報をクライアントに転送できます。すべてのフィールドをクライアントに転送することはできませんが、選択したフィールドのみを転送することはできませんでしたが、これは不要だと思います。

インターフェース

私たちのロジックはすべて、インターフェースなしでは何もありません。インターフェース全体は、いくつかのテンプレートで構成されます。

招待リスト-招待のリストと新しい招待を送信するためのフォームを備えたパネル。
inviteSendとinviteSend-自動的に生成される一連のフィールドを含む招待フォーム（1つのみ）。
activateInviteToCompany-このユーザーによってアクティブにされた招待に関する情報を招待されたユーザーに表示するためのいくつかのオプション。

ファイルクライアント/ビュー/招待/invite.html

 <template name="inviteList"> <div class="panel panel-success" style="float: left; margin-right: 20px;"> <div class="panel-heading"> <h3 class="panel-title">  !</h3> </div> <div class="panel-body"> {{#if invitedUsers.count}} <div class="list-group"> {{#each invitedUsers}} <div class="list-group-item"> <div class="row-content"> <div class="least-content">{{inviteTextStatus}} {{#if isInRole 'CompanyAdmin'}} {{#if inviteIsComplete}} {{else}} <a class="deleteInviteBtn" data-id="{{_id}}" href="#">x</a> {{/if}} {{/if}} </div> <p class="list-group-item-text">{{email}}</p> </div> </div> <div class="list-group-separator"></div> {{/each}} </div> {{else}}      ! {{/if}} </div> {{#if isInRole 'CompanyAdmin'}} <div class="panel-footer"> {{> inviteSend}} </div> {{/if}} </div> </template> <template name="inviteSend"> {{#autoForm collection="Invite" id="inviteSend" type="insert"}} {{> inviteFieldset}} <button id="sendInviteBtn" class="btn btn-primary" style="width:100%"></button> {{/autoForm}} </template> <template name="inviteFieldset"> <fieldset> {{> afQuickField name='email'}} </fieldset> </template> <template name="activateInviteToCompany"> {{#if currentUser}} .            . {{ else }} {{#if inviteIsActivated}} ,  <b>{{userActivationCode}}</b>  .      . {{ else }} ! <br/><br/>   ,        -    <b>{{companyNameByInviteCode}}</b>   <b>{{companyUserNameByInviteCode}}</b>. <br/><br/>       <b>{{userActivationCode}}</b>      !<br/><br/> ,     " / "    ,                <b>{{companyNameByInviteCode}}</b>! {{/if}} {{/if}} </template>

ここにある。

InviteListテンプレートには、inviteSend送信フォームと会社の招待状のリストが表示されます。ユーザーの役割と招待状の状態に基づいて、招待状を送信するためのフォームと「削除」ボタンが表示または非表示になります。

activateInviteToCompanyテンプレートは、招待ステータス（送信済み/アクティブ化）およびユーザーステータス（承認済み/未承認）に基づいて、アクティベーション招待またはいずれかの理由で招待を使用できないことに関する情報を表示します。

さらに、ユーザーの招待テンプレートactivateInviteToCompanyのページには、ユーザーを招待したユーザー、理由、場所に関する詳細情報が含まれています。これは非常に重要です。なぜなら、ユーザーが手紙のリンクをたどるのは、理解できないサービスの誰かからの招待を受け入れたいという事実ではないからです。

これが招待ウィジェットの外観です。

そして、ユーザー招待ページ：

クライアント側のロジック

ふふ...記事を書く3時間目...

少し残っています。最後に、インターフェイスにロジックをかけ、システムのすべての部分を接続する必要があります。このために、

ファイルクライアント/ビュー/招待/invite.js

 Template.inviteSend.events({ 'click #sendInviteBtn': function () { //      Email var email = $('#inviteSend [name=email]').val(); $('#sendInviteBtn').attr("disabled", true); //    Email   var existsInvite = Invite.findOne({email:email}); if ( existsInvite == undefined ) { //      -  Email   if (UI._globalHelpers.validateEmail( email )) { // Email   -       Meteor.call('invationSender', email, function (error, result) { if (error) { //-   .   $('#inviteSend [name=email]').val(""); $('#sendInviteBtn').removeAttr("disabled"); bootbox.alert("   .     ! : " + error.reason); } else { // .  ,    $('#inviteSend [name=email]').val(""); $('#sendInviteBtn').removeAttr("disabled"); Meteor.subscribe('invite', Meteor.userId()); bootbox.alert("     " + email); } }); } else { // Email    -    $('#inviteSend [name=email]').val(""); $('#sendInviteBtn').removeAttr("disabled"); bootbox.alert("Email    email@example.ru!"); } } else { //    Email   -    . $('#inviteSend [name=email]').val(""); $('#sendInviteBtn').removeAttr("disabled"); bootbox.alert("  Email     !"); } } }); Template.inviteList.events({ //      'click .deleteInviteBtn': function () { //            Meteor.call('deleteInvite', this._id, function (error, result) { if (error) { bootbox.alert("   .     ! : " + error.reason); } else { bootbox.alert(" !"); } }); } }); //        Template.inviteList.helpers({ //   invitedUsers: function () { return Invite.find(); }, //        inviteTextStatus: function() { var textStatus = '-'; switch(this.status) { case INVITE_CREATED: textStatus = ''; break; case INVITE_EMAILED: textStatus = ''; break; case INVITE_COMPLETED: textStatus = ''; break; } return textStatus; }, //   inviteIsComplete: function () { if (this.status == INVITE_COMPLETED) { return true; } else { return false; } }, //   inviteIsEmailed: function () { if (this.status == INVITE_EMAILED) { return true; } else { return false; } }, //   inviteIsCreated: function () { if (this.status == INVITE_CREATED) { return true; } else { return false; } } }); if (Meteor.isClient) { //             Template.activateInviteToCompany.rendered = function () { Session.set('activationToken', Router.current().params.activationToken); }; //   Template.activateInviteToCompany.helpers({ //        companyNameByInviteCode: function () { var invite = Invite.findOne({token:Router.current().params.activationToken}); var company = Company.findOne({_id:invite.companyId}); return company.title; }, //        companyUserNameByInviteCode: function () { var invite = Invite.findOne({token:Router.current().params.activationToken}); var company = Company.findOne({_id:invite.companyId}); var user = Meteor.users.findOne({_id:company.userId}); return user.profile.name; }, //      userActivationCode: function () { return Router.current().params.activationToken; }, //      //      inviteIsActivated: function () { var userInviteCode = Router.current().params.activationToken; var invite = Invite.findOne({token: userInviteCode}); if (invite.status == INVITE_COMPLETED) { return true; } else { return false; } } }); }

このファイルでは、欠落しているロジックのほとんどすべてを説明しました。それを見てみましょう...

最初に、イベントを「招待状を送信」ボタンと「招待状を削除」ボタンに割り当てました。

[招待状を送信]ボタンをクリックすると、電子メールの複製と正当性が検証され、その後エラーメッセージが表示されるか、招待状を送信するサーバーメソッドが呼び出されます。

「招待の削除」ボタンを押すと、招待を削除するサーバーメソッドが呼び出されます。上で彼を見ました。

以下は、各招待状の表示を制御する招待状のリストを持つパネルの簡単なヘルパーです。

最後に、招待のアクティベーションページで使用されるヘルパーもいくつかあります。

このコードの最も興味深い部分は、Template.activateInviteToCompany.renderedの定義です。セッション内でアクティベーションコードとともに変数を保存するのは、このコードです。

ボトムラインとライブデモ

最終的なロジックは、ユーザーがレターからのリンクを介して当社のサービスにアクセスできることです。セッションは招待アクティベーションコードに関する情報を保存し、アプリケーションの利用可能なページを切り替え、メインページの説明を読み、Reformalからレビューを読み、興味深い-彼は「ログイン/登録」ボタンをクリックし、適切な認証方法を選択し、システムにログインし、自動的に会社（グループ）のメンバーになり、すぐに仕事を始めることができます。

または、ユーザーは単にサイトにアクセスして、自分が良いことを確認し、登録し、新しい会社を作成し、同僚に協力してもらうことができます。

実際、それがすべてです。非常にうまくいったと思いますが、何と言いますか？

プロジェクトのライブデモンストレーションはp.kellot.ru で見ることができます。自動

テストの実行では本格的なテストは行いませんでしたが、コードを公開する前にすべての操作を手動で数回行いました。デモンストレーションに慣れている間に突然何かがおかしくなったら、これをReformalに報告してください。

Meteorアプリケーションの招待（招待）システムを作成します