Meteor-accounts

提供:Dev Guides
移動先:案内検索

Meteor-アカウント

このパッケージにより、完全なユーザー認証機能が可能になります。 コマンドプロンプトウィンドウで次のコードを実行して追加できます。

C:\Users\username\Desktop\meteorApp>meteor add accounts-password

認証の例

この例では、基本認証を示します。 register、login 、および home テンプレートを作成します。 currentUser がある場合(ユーザーが正常に登録またはログインしている場合)、 home テンプレートが表示されます。 currentUser がない場合、 register および login テンプレートが表示されます。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   {{#if currentUser}}
      {{> home}}
      {{else}}
      {{> register}}
      {{> login}}
   {{/if}}
</body>

<template name = "register">
   <h2>REGISTER:</h2>
   <form>
      <input type = "email" name = "registerEmail"><br>
      <input type = "password" name = "registerPassword"><br>
      <input type = "submit" value = "Register"><br>
   </form>
</template>

<template name = "login">
   <h2>LOGIN:</h2>
   <form>
      <input type = "email" name = "loginEmail"><br>
      <input type = "password" name="loginPassword"><br>
      <input type = "submit" value = "Login"><br>
   </form>
</template>

<template name = "home">
   <p>You're logged in.</p>
   <button class = "logout">Logout</button>
</template>

最初に、 register イベントを作成する必要があります。 この関数は、レジスタ入力を読み取り、新しいユーザーを作成して、データベースに保存します。

2番目のイベントは login です。 今回は、関数は login テンプレートから入力を読み取り、電子メールとパスワードが有効な場合はユーザーをログインし、有効でない場合はエラーを返します。

そして最後に、ボタンがクリックされると、ユーザーをログアウトするために logout イベントが使用されます。

meteorApp.js

if (Meteor.isClient) {

   Template.register.events({
      'submit form': function(event) {
         event.preventDefault();

         var registerData = {
            email: event.target.registerEmail.value,
            password: event.target.registerPassword.value
         }

         Accounts.createUser(registerData, function(error) {

            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.login.events({

      'submit form': function(event) {
         event.preventDefault();
         var myEmail = event.target.loginEmail.value;
         var myPassword = event.target.loginPassword.value;

         Meteor.loginWithPassword(myEmail, myPassword, function(error) {

            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.home.events({

      'click .logout': function(event) {
         event.preventDefault();

         Meteor.logout(function(error) {

            if(error) {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });
}

アプリが起動すると、次のページが表示されます。

流星アカウント開始

登録*フォームに電子メールとパスワードを入力すると、新しいユーザーを登録してログインできます。 コンソールがユーザー *id を記録し、 home テンプレートがレンダリングされることがわかります。

流星アカウント登録

電子メールとパスワードが正しい場合、 login イベントはデータベースをチェックし、ユーザーをログインさせます。 そうでない場合、コンソールはエラーを記録します。

流星アカウントのログインエラー

ユーザーが LOGOUT ボタンをクリックすると、アプリはユーザーをログアウトし、 register および login テンプレートを表示します。