鑰匙要點(diǎn)

• >用流星創(chuàng)建自定義登錄和注冊表格涉及安裝帳戶通信軟件包，該軟件包將自動創(chuàng)建Meteor.users Collection來存儲用戶數(shù)據(jù)，消除了為用戶相關(guān)功能編寫自定義邏輯的需要。
>可以使用簡單的HTML表單來開發(fā)登錄和注冊系統(tǒng)的用戶界面。這些表格的模板包含電子郵件和密碼的字段，以及提交按鈕。>>
• >事件處理程序可以設(shè)置以響應(yīng)用戶與表格的交互。例如，可以創(chuàng)建“提交表單”事件，以防止表格的默認(rèn)行為并在提交表單時輸出確認(rèn)消息。
>流星的內(nèi)置方法，例如counders.createuser（）和Meteor.loginwithpassword（），可用于注冊新用戶并分別登錄現(xiàn)有用戶。這些方法在注冊后自動加密密碼并登錄用戶，減少需要編寫的代碼數(shù)量。
• 開箱即用，您可以使用流星JavaScript框架可以做的最簡單的事情之一就是創(chuàng)建一個用戶帳戶系統(tǒng)。只需安裝一對軟件包 - 帳戶通信和Account-ui-您最終都會獲得以下功能功能的界面：
但是，盡管這種簡單性很方便，但依靠此樣板接口并不能完全具有靈活性。那么，如果我們想創(chuàng)建一個自定義界面供用戶注冊并登錄到我們的網(wǎng)站？ 幸運(yùn)的是，這根本不太困難。在本文中，我將向您展示如何使用流星創(chuàng)建自定義登錄和注冊表格。但是，本文假設(shè)您知道如何使用自己的框架來設(shè)置項(xiàng)目。 要播放本文中開發(fā)的代碼，請查看我設(shè)置的GitHub存儲庫。
• 基本設(shè)置
在一個新的流星項(xiàng)目中，通過執(zhí)行命令來添加帳戶通信包：

通過將此軟件包添加到一個項(xiàng)目中，將創(chuàng)建流星集合來存儲用戶的數(shù)據(jù)，而我們不必為用戶相關(guān)功能編寫自定義邏輯。 因此，盡管創(chuàng)建自定義界面意味著我們將失去Account-UI軟件包的便利性，但這并不意味著我們必須失去流星可以提供的后端“魔術(shù)”的便利。 開發(fā)接口

對于完整的登錄和注冊系統(tǒng)，我們必須為其中創(chuàng)建許多功能，包括：

meteor <span>add accounts-password</span>

注冊

登錄

• >忘記密碼
• “確認(rèn)您的電子郵件”頁面
• “已確認(rèn)電子郵件”頁

但是目前，我們將討論列出的前兩個點(diǎn)（注冊和登錄）表格。原因是，一旦您獲得了基礎(chǔ)知識，就很難弄清楚如何創(chuàng)建其他接口。 以下片段顯示了注冊表格的代碼：

meteor <span>add accounts-password</span>

下一個片段改為顯示登錄表單的代碼：

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

如您所見，模板非常相似。它們包含表單，電子郵件和密碼的字段以及提交按鈕。唯一的區(qū)別是輸入字段和模板的名稱屬性的值。 （我們將盡快參考這些值，因此請確保它們是獨(dú)一無二的。） 我們只希望這些模板為尚未熟悉的用戶顯示。因此，我們可以參考開口和關(guān)閉主體之間的當(dāng)前使用者對象 標(biāo)簽：

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

如果當(dāng)前用戶已登錄，則此代碼顯示“您登錄”消息，否則“注冊”和“登錄”模板。

創(chuàng)建事件

目前，我們的形式是靜態(tài)的。為了使他們做某事，我們需要他們對提交事件做出反應(yīng)。讓我們通過關(guān)注“寄存器”模板來證明這一點(diǎn)。 在項(xiàng)目的JavaScript文件中，編寫以下內(nèi)容：

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

在這里，我們編寫了代碼，以便“寄存器”模板中的形式：

1. 響應(yīng)提交事件
2. 沒有任何默認(rèn)行為
3. >在控制臺上輸出確認(rèn)消息

我們還將此代碼放置在Isclient條件中，因?yàn)槲覀儾幌Ｍ摯a在服務(wù)器上運(yùn)行（因?yàn)樗鼉H用于接口）。 在活動內(nèi)部，我們將要獲取電子郵件和密碼字段的值，并將它們存儲在兩個變量中。因此，讓我們修改以前的代碼：

<span>if (Meteor.isClient) {
</span>    <span>Template.register.events({
</span>        <span>'submit form': function(event) {
</span>            event<span>.preventDefault();
</span>            <span>console.log("Form submitted.");
</span>        <span>}
</span>    <span>});
</span><span>}</span>

對于“登錄”模板，代碼幾乎相同：

<span>Template.register.events({
</span>    <span>'submit form': function(event){
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

>將事物鉤在一起

將帳戶通信軟件包添加到項(xiàng)目后，我們可以使用許多方法：

accounts.changepassword（） accounts.ResetPassword（）
• >

我們將重點(diǎn)介紹Createuser方法，但是，基于方法名稱，不難找出其他方法的目的。 在“注冊”模板的提交事件的底部，寫下：

meteor <span>add accounts-password</span>

這是我們可以用來創(chuàng)建新用戶的代碼，默認(rèn)情況下，它需要兩個選項(xiàng)：電子郵件和密碼。 要通過它們，寫信：

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

活動的最終代碼應(yīng)該類似：

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

通過使用此代碼而不是通用插入 函數(shù)我們的優(yōu)勢是密碼會自動加密。此外，注冊后登錄了用戶，我們不必編寫太多代碼。 還有一個loginwithpassword（）方法，我們可以在“登錄”事件中使用：

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

它還接受電子郵件和密碼值：

<span>if (Meteor.isClient) {
</span>    <span>Template.register.events({
</span>        <span>'submit form': function(event) {
</span>            event<span>.preventDefault();
</span>            <span>console.log("Form submitted.");
</span>        <span>}
</span>    <span>});
</span><span>}</span>

在上下文中，這就是代碼應(yīng)該的樣子：

<span>Template.register.events({
</span>    <span>'submit form': function(event){
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

登錄

現(xiàn)在，用戶可以注冊并登錄，但是，要允許他們登錄，讓我們首先制作一個新的“儀表板”模板，該模板將在登錄時顯示：

<span>Template.login.events({
</span>    <span>'submit form': function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.loginEmail.value;
</span>        <span>var passwordVar = event.target.loginPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

然后將以下代碼包含在我們本文之前寫的IF語句中：

<span>Accounts.createUser({
</span>    <span>// options go here
</span><span>});</span>

現(xiàn)在，我們可以創(chuàng)建一個事件，該事件附加到“儀表板”模板中的“注銷”鏈接：

<span>Accounts.createUser({
</span>    <span>email: emailVar,
</span>    <span>password: passwordVar
</span><span>});</span>

要執(zhí)行登錄過程，我們只需要使用注銷方法：

<span>Template.register.events({
</span>    <span>'submit form': function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>Accounts.createUser({
</span>            <span>email: emailVar,
</span>            <span>password: passwordVar
</span>        <span>});
</span>    <span>}
</span><span>});</span>

現(xiàn)在應(yīng)按預(yù)期工作，注冊，登錄和登錄。

結(jié)論

我們的代碼很少，我們?nèi)〉昧撕艽蟮倪M(jìn)步，但是如果我們想為帳戶系統(tǒng)創(chuàng)建一個完整的接口，那么還有很多事情要做。 這是我建議的：

1. 啟用驗(yàn)證新用戶的電子郵件。
2. 驗(yàn)證用戶的創(chuàng)建（并登錄）。>
>將視覺驗(yàn)證添加到“寄存器”和“登錄”表單中。
3. 登錄嘗試失敗時要做一些事情。
4. 允許用戶更改其密碼。
5. 可能需要一個下午才能找出有關(guān)如何實(shí)現(xiàn)這些功能的細(xì)節(jié)，但是根據(jù)我們在本教程中涵蓋的內(nèi)容，這都不是您無法觸及的。流星為我們付出了艱苦的工作。 如果您想使用本文開發(fā)的代碼，請查看我設(shè)置的GitHub存儲庫。
經(jīng)常詢問的問題（常見問題解答）關(guān)于使用流星

創(chuàng)建自定義登錄/注冊表格

>如何將其他字段添加到流星中的注冊形式？

>在流星中的注冊表格中添加其他字段非常簡單。您可以通過在accounts.createuser方法中添加更多字段來擴(kuò)展用戶配置文件。例如，如果要為用戶的全名添加一個字段，則可以這樣做：

accounts.createuser（{

用戶名：'tastuser'，
密碼：'密碼：' '，
profile：{
fullname：'test用戶'
}
}）;
在此示例中，“ FullName”是添加到用戶配置文件中的附加字段。您可以稍后使用Meteor.user（）。profile.fullname。

>我如何自定義流星中的登錄/注冊表格的外觀？

Meteor不提供一個內(nèi)置方式來自定義登錄/注冊表格的外觀。但是，您可以根據(jù)需要使用CSS對表格進(jìn)行樣式。您可以將類分配給表單元素，然后在CSS文件中使用這些類以應(yīng)用樣式。另外，您可以使用Bootstrap或Material-ui等UI庫來樣式表單。

如何在Meteor中實(shí)現(xiàn)電子郵件驗(yàn)證？

Meteor為電子郵件驗(yàn)證提供內(nèi)置支持。您可以使用帳戶。sendverificiencemail方法向用戶發(fā)送驗(yàn)證電子郵件。此方法將用戶的ID作為參數(shù)，并發(fā)送帶有鏈接的電子郵件，用戶可以單擊以驗(yàn)證其電子郵件地址。創(chuàng)建這樣的新用戶之后，您可以調(diào)用此方法：

accounts.createuser（{
電子郵件：'test@example.com'，
密碼：'password'
}， function（err，userId）{
> if（err）{
//處理錯誤
} else {
accounts.sendverificitionEmail（userId）;
> }

}）;

>在流星注冊時如何處理錯誤？

在使用accounts.createuser創(chuàng)建新用戶時，您可以提供一個被調(diào)用的回調(diào)函數(shù)如果發(fā)生錯誤，則使用錯誤對象。此錯誤對象包含有關(guān)出了什么問題的信息。您可以使用此信息向用戶顯示適當(dāng)?shù)腻e誤消息。以下是一個示例：

accounts.createuser（{
>用戶名：'tastuser'，
密碼：'password'
}，function（err）{
if（err）if（err）{
> console.log（'注冊期間的錯誤：'，err）;
}

}）;

>我如何實(shí)現(xiàn)密碼流星中的重置功能？

>流星為密碼重置功能提供內(nèi)置支持。您可以使用accounts.forgotpassword和accounts.ResetPassword方法來實(shí)現(xiàn)此目標(biāo)。 accounts.forgotpassword方法通過可以單擊的鏈接將電子郵件發(fā)送給用戶，以重置密碼。 accounts.ResetPassword方法用于實(shí)際更改用戶的密碼。它從重置鏈接中將令牌和新密碼作為參數(shù)。

>

>我如何將社交登錄添加到我的流星應(yīng)用程序中？

Meteor支持與Facebook，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，并通過其帳戶軟件包進(jìn)行Twitter。要將社交登錄添加到您的應(yīng)用程序中，您需要添加適當(dāng)?shù)能浖ɡ?，用于Facebook登錄帳戶書籍），并使用社交提供商的應(yīng)用程序?qū)⑵渑渲脼?h3 id="gt-我如何根據(jù)流星中的用戶身份驗(yàn)證限制對某些路由的訪問">>我如何根據(jù)流星中的用戶身份驗(yàn)證限制對某些路由的訪問？