Meteor - 賬戶



此包允許完整的使用者身份驗證功能。您可以在命令提示符視窗中執行以下程式碼來新增它。

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

身份驗證示例

此示例將顯示基本身份驗證。我們將建立註冊、登入主頁模板。如果存在currentUser(如果使用者已成功註冊或登入),則將顯示主頁模板。如果不存在currentUser,則註冊登入模板將可見。

meteorApp.html

<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>

首先,我們需要建立一個註冊事件。此函式將讀取註冊輸入,建立一個新使用者並將其儲存到資料庫中。

第二個事件是登入。這次,該函式將讀取登入模板中的輸入,如果電子郵件和密碼有效,則登入使用者,或者如果無效則返回錯誤。

最後,登出事件將用於登出使用者,一旦單擊按鈕。

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);
            }
         });
      }
   });
}

應用程式啟動後,我們將獲得以下頁面。

Meteor Accounts Start

註冊表單中輸入電子郵件和密碼後,我們可以註冊和登入新使用者。我們將看到控制檯記錄使用者的id,並且呈現主頁模板。

Meteor Accounts Register

登入事件將檢查資料庫並登入使用者,如果電子郵件和密碼正確。否則,控制檯將記錄錯誤。

Meteor Accounts Login Error

如果使用者單擊登出按鈕,應用程式將登出使用者並顯示註冊登入模板。

廣告

© . All rights reserved.