2013-01-08 47 views
2

我正在爲一家小公司實習一個實習文檔共享項目。我想用流星做這個。我很常見的HTML/JavaScript,但不是與數據庫。 我的問題是處理用戶。由於我在這裏的研究,我不確定是否已經可以在客戶端創建用戶。官方文檔顯示了一些如何處理用戶的方法,但沒有例子。 我試圖創建這樣的服務器端列表:如何創建用戶端的用戶?

Users = new Meteor.Collection("users"); 

然後我想插入這樣在啓動時用戶:

//on Client side 
if (Meteor.isClient) { 
var username = "My Name"; 

    Meteor.call("create_user", username, function(error, user_id) { 
     Session.set("user_id", user_id); 
}); 
} 

//on Server side 
if(Meteor.is_server) { 
Meteor.methods({ 
    create_user: function(username) { 
     console.log("CREATING USER"); 
     var USER_id = Users.insert({name: username}); 
     return user_id; 
    }, 
}); 
} 

但在HTML模板讀取用戶名不工作...

是否有任何良好的示例與註冊和登錄?

乾杯

回答

1

您不需要手動創建用戶系統。只需使用accounts package

流星帳戶系統建立在用戶id支架的頂部在發佈和方法。核心軟件包添加了存儲在數據庫中的用戶文檔的概念,其他軟件包添加安全密碼驗證,與第三方登錄服務集成以及預先構建的用戶界面。

雖然你的代碼應該可以工作。但是你不會將用戶名屬性暴露給客戶端,所以也許這就是爲什麼你不能在你的模板中看到它。

+0

所以我放在package.js到我的項目使用的文檔中描述的命令? – dome12b

+0

你不需要對javascript文件做任何事情。從命令行運行'meteor add accounts-base'等。這是如何工作的:http://docs.meteor.com/#meteoradd – Rahul

+0

現在我明白了。這是問題!謝謝! – dome12b

7

添加賬戶的功能是很容易的流星..可以說,它是簡單的電子郵件,密碼,或通過使用Facebook Connect /嘰嘰喳喳等。

做以下與用戶帳戶設置爲得到一個簡單的應用程序流星了..

meteor create simpleapp 
cd simpleapp 

添加帳戶的用戶界面和賬戶密碼包

meteor add accounts-ui 
meteor add accounts-password 

只需添加其他帳戶相關的軟件包執行FAC電子書/嘰嘰喳喳/ github上/登錄Google等

列出其他可用流星包使用此命令

meteor list 

現在編輯simpleapp.html文件,這添加登錄按鈕等。

<head> 
    <title>simpleapp</title> 
</head> 

<body> 
    {{> hello}} 
</body> 

<template name="hello"> 
    <h1>Hello World!</h1> 
    {{greeting}} 
    <input type="button" value="Click" /> 
    {{loginButtons}} 
</template> 

我只是增加{{loginButtons}}到默認的HTML文件中添加默認的登錄按鈕..

現在運行流星應用程序,並去爲localhost:3000

meteor 

你實現了登錄功能,但沒有做太多的工作。4-5行代碼,它甚至照顧忘記密碼,註冊新用戶等東西

接下來的事情是你需要在用戶登錄時顯示一個特定的html。 你使用全局的{{currentUser}}

你實現它相應

<template name="hello"> 
    <h1>Hello World!</h1> 
    {{greeting}} 
    <input type="button" value="Click" /> 
    {{loginButtons}} 
    {{#if currentUser}} 
    {{> loggedInTemplate}} 
    {{else}} 
    {{> loggedOutTemplate}} 
    {{/if}} 
</template> 

<template name="loggedInTemplate"> 
    <!-- user is logged in --> 
</template> 
<template name="loggedOutTemplate"> 
    <!-- user is logged out --> 
</template> 
+0

非常好,我能夠確定新用戶是否已註冊,並向他們詢問其他輸入問題。 – Andy

0

好的,謝謝你,很簡單。但是,我不能修改loggedInTemplate或loggedOutTemplate。

我會讓你知道我有:

//the html 

<head> 
    <title>myApp | documents</title> 
</head> 

<body> 
<div id="headerBox"> 
    {{> header}} 
</div> 
<div id="sideBox"> 
    {{> side}} 
</div> 
<div id="contentsBox"> 
    {{> contents}} 
</div> 
</body> 


<template name="header"> 
<h1>Company name</h1> 
</template> 

<template name="contents"> 
{{#if currentUser}} 
    <p>Welcome to documents</p> 
{{else}} 
    <h3>Hello! Please log in!</h3> 
    <p><input type="text" id="username" placeholder="Username"><input type="text" id="password" placeholder="Password"><input type="button" value="log me in!"></p> 
{{/if}} 
</template> 

<template name="side"> 
<p>Hello {{ activeUser }}</p> 
<p><input type="button" value="Create New Document" onclick="createPage()"></p> 
<h3>Documents:</h3> 
</template> 

//client.js 

Pages = new Meteor.Collection("pages"); 

Meteor.startup(function() { 
    Session.set("activeUser", "please log in!"); 
}); 

Template.side.activeUser = function() { 
    return Session.get("activeUser"); 
}; 

//server.js 

Meteor.startup(function() { 
    Accounts.createUser({username: "MyName", email: "[email protected]", password: "123456"}); 
}); 

和我在尋找登錄該用戶創建一個手動的方式在啓動英寸當然後來讓這個用戶創造新的用戶...

問題是添加

// Returns an event_map key for attaching "ok/cancel" events to 
// a text input (given by selector) 
var okcancel_events = function (selector) { 
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector; 
}; 

// Creates an event handler for interpreting "escape", "return", and "blur" 
// on a text field and calling "ok" or "cancel" callbacks. 
var make_okcancel_handler = function (options) { 
var ok = options.ok || function() {}; 
var cancel = options.cancel || function() {}; 

return function (evt) { 
    if (evt.type === "keydown" && evt.which === 27) { 
    // escape = cancel 
    cancel.call(this, evt); 
    } else if (evt.type === "keyup" && evt.which === 13) { 
    // blur/return/enter = ok/submit if non-empty 
    var value = String(evt.target.value || ""); 
    if (value) 
     ok.call(this, value, evt); 
    else 
     cancel.call(this, evt); 
    } 
}; 
}; 

Template.contents.events = {}; 

Template.contents.events[okcancel_events('#password')] = make_okcancel_handler({ 
    ok: function (text, event){ 
     var usernameEntry = document.getElementById('username'); 
     var passwordEntry = document.getElementById('password'); 
     Meteor.loginWithPassword({usernameEntry, passwordEntry}); 
     event.target.value = "";  
    } 
}); 

到客戶端不能正常工作......

+0

accounts-ui包負責整個登錄用戶界面。您只需使用{{currentUser}}全局來確定用戶是否已登錄。我不知道你爲什麼在「內容」模板中有用戶名和輸入字段。如果你想更改由accounts-ui軟件包提供的默認用戶的登錄用戶界面,有一個截屏視頻,但我似乎無法看到現在找到..我會發布它,當我找到它.. – syllogismos

+0

http://www.eventedmind.com/posts/meteor-customizing-login此屏幕錄像可能會幫助.. – syllogismos